Not being able to close the dynamic lightning component

Question

I am trying to create a dynamic lightning component with the help of $A.createComponents.

 $A.createComponents([
         ["c:SubmitForApprovalBody",{oppId:recordId}],
         [ "c:SubmitForApprovalFooter", { okLabel : "Confirm"}]            

       ],
       function(components, status){
           console.log('status : '+status);
           if (status === "SUCCESS") {
               modalBody = components[0];
               modalFooter = components[1];                 
               component.find('modalLib').showCustomModal({
                   header: "Submit for Approval",
                   body: modalBody,
                   footer:modalFooter,
                   showCloseButton: false,
                   closeCallback: function() {
                      alert('you decided to close');
                   }
               })
           }
       }
    );

The above is fine. And, I want to close the component when the user clicks on the ok button in SubmitForApprovalFooter.

I have used the below one in SubmitForApprovalFooter.

 ({
     handleOK : function(cmp, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
     }
  })

But nothing happens and the component does not disappear. Any help is much appreciated.

Answer 1

So I've faced the same problem you have a few times. The trick is to save the modal promise as an aura:attribute on your component.

1. In your component c:SubmitForApprovalFooter, create a parameter on the component called onClickAction of type Aura.Action
2. Set that attribute in your js as component.get("c.handleModalClose")
3. In the handleModalClose function, get the modal promise parameter and close the modal from the promise. (see below)

({
    yourAction : function(component, event, helper) {
        $A.createComponents([
            ["c:SubmitForApprovalBody",{oppId:recordId}],
            //Notice the `onclickAction` being set
            //If you experience issues with this then use component.getReference("c.handleModalClose")
            [ "c:SubmitForApprovalFooter", { okLabel : "Confirm",
                                            "onclickAction":component.get("c.handleModalClose")
                                        }]
          ],
          function(components, status){
              console.log('status : '+status);
              if (status === "SUCCESS") {
                  modalBody = components[0];
                  modalFooter = components[1];
                  //Set a variable containing the promise                 
                    var modalPromise = component.find('modalLib').showCustomModal({
                      header: "Submit for Approval",
                      body: modalBody,
                      footer:modalFooter,
                      showCloseButton: false,
                      closeCallback: function() {
                         alert('you decided to close');
                      }
                  })
                  //Set the modalPromise as an attribute on your component, type is `Object`
                  //So, `<aura:attribute name="modalPromise" type="Object"/>`
                  component.set("v.modalPromise",modalPromise);
              }
          }
       );
    },
    handleModalClose : function(component,event,helper){
        //I use this all the time now, otherwise aura may try to 
        //grab a modal promise that has been destroyed already
        event.stopPropagation();
        var modPromise = component.get("v.modalPromise");
        modPromise.then(function(m){
            m.close();

        });
    }
})