[SalesForce] Passing user input from `lightning:overlayLibrary` back to parent

I am using lightning:overlayLibrary to collect input from the user which will then be used in the parent component. The modal is simple: 1 lightning:select` in the body and a footer with "Select" and "Cancel" buttons. The only way I see to accomplish this is to:

  • fire event from an onchange handler in the body component that sends the selected value
  • handle change value event in footer
  • fire event from onclick event on "Select" button which sends selected value
  • handle said event in parent component

Is this the best way to do this? I tried messing with the closeCallback parameter in the showCustomModal function, but it appears that the attributes have already been wiped by that point (if you can access them at all).

Best Answer

There's another way to do this. You can bind an attribute in your parent component to an attribute in the modal body:

Create an attribute on the parent and on the body component.
In the controller function where you open the modal and generate the body and footer, pass a reference to the parent attribute to the body attribute. When you change the value of the modal body attribute, the value will be passed to the parent attribute through this binding.
Now you simply have to fire an onclick event to notify the parent that the Select button is clicked and to have it handle its logic. There is no need to send any parameters in the event.

$A.createComponents(
            [
                ["c:modalBody",
                    {
                        modalBodyAttributeName : component.getReference('v.parentAttributeName')
                    }],
                ['c:modalFooter', {}]
            ],
            function(contents, status, errorMessage) {
                if (status === "SUCCESS") {
                    modalBody = contents[0];
                    modalFooter = contents[1];
                    component.find('overlayLib').showCustomModal({
                        header: "header title",
                        body: modalBody,
                        footer: modalFooter,
                        showCloseButton: true,
                        closeCallback: function() {

                        }
                    });
                } else {
                    console.log(errorMessage);
                }
            }
        );
Related Topic