How to pass information to a Modal

Q&A
1

Hello,

I have a List Of Data. Let's say 

data: [ { "lastname": "Bates",  "firstname":"walter"},    { "lastname": "Kelly", "firstname":"Hello"} ]

 

I have a Container collection on the list. Fine, it's display the 2 names

Then, I want to add on each line a BUTTON. When the user clicks on that button, I want to open a Modal, displaying the detail of the user.

Note: this is not a DataTable, this is a Container with a list (there is a lot of data displayed on the line).

How can I do that? On the button "openModal", I can't provide any Javascript to fulfill a variable, that I can explode in the Modal.

Thank,

    

1 Like
2

Hi Pierre-Yves,

The button that opens a modal can call a function when it is clicked. 

In the button property named Modal Id switch to an expression, and set a function like controller.modalUser($item)

This function will set the value of $item (current line of the container) into a page variable selectedOne and then return the name of your modal

The function can be like:

return {
    modalUser : function(item){
        $data.selectedOne = item;
        return "showUserModal"
    }
}

In this way, everytime you click you call the function to know the name of the modal to open and by the way set the value

1710×1005 66.3 KB

Find here an image of how the page will look like
https://app.box.com/s/31f090v29bfgqu8htjqmd6b7fxff88au
 

 

1 Like
3

nice trick Pablo!

have you an example of how to do the same in a "add to list" button, that could open a modal to search for a product / user and add the result to the list ?

1 Like
4

Perfect! It's super bizarre, but works perfectly (bind a function ...)

 

1 Like
5

Sure, you can reuse same logic, instead of add to list, do open modal and in the modal Id , call to :

return {
    modalUser : function(item){
        $data.myList.push(item);
        return "showUserModal"
    }
}

In the other way around it is more complex as you need to use the modalService which is not exposed. You will need to extend the button (customWidget) and add the dependency.

1 Like