6

I'm building out some community features and one of them is like a related list with a new button. When the user presses the new button, I am launching a modal window with another custom component loaded that has the lightning:recordForm and shows the correct form fields for that user and the record type. This behavior I really like since it allows the administrators to change up the forms as they wish. The users are able to save their data, the window closes and the related list is updated with the new data.

However, if the user decides to hit the cancel button, nothing happens. I don't see an event to capture or anything for me to work from in order to get the window to close. Is there something I'm missing to get this working?

// parent component that load component in modal

    var applicant = component.get("v.applicant");
    $A.createComponent(
        "c:ApplicantInfo_ModalForm",
        {
            "Applicant" : applicant,
            "recordTypeId" : applicant.recordTypeId 
        },
        function(content, status) {
            if (status === "SUCCESS") {
                modalBody = content;
                component.find('overlayLib').showCustomModal({
                    header: component.get("v.RelatedListLabel"),
                    body: modalBody, 
                    showCloseButton: true,
                    cssClass: "mymodal",
                    closeCallback: function() {
                        console.log('You closed the modal!');
                        helper.loadData(component);
                    }
                })
            }                               
        });

// child component with applicant attribute

<lightning:recordForm
                      objectApiName="Custom_Object__c" 
                      recordTypeId="{!v.Applicant.recordTypeId}"
                      layoutType="Compact"
                      columns="2"
                      mode = "edit"
                      onload="{!c.handleLoad}"/>
6

try to add oncancel event in your component.

    <lightning:recordForm
                      objectApiName="Custom_Object__c" 
                      recordTypeId="{!v.Applicant.recordTypeId}"
                      layoutType="Compact"
                      columns="2"
                      mode = "edit"
                      onload="{!c.handleLoad}"
                      oncancel="{!c.onCancel}"
                      />

In your component controller

onCancel: function(component, event, helper) {

// Handle the cancel here.

}
  • i dont see this event registered in the documentation, did you try? – glls Aug 11 '18 at 13:13
  • I did not see it either in the documentation, but I used it to close the QuickAction. – Klecool Aug 11 '18 at 13:19
  • well, it seems that oncancel is an accepted/undocumented event on the form =P so should work =) – glls Aug 11 '18 at 16:11
  • yeah, it works. funny it’s not it the spec documentation. thanks for the suggestion! – textual Aug 12 '18 at 22:17
  • Lol. That is very funny. I spent half hour trying to figure this out. (((x – iloveseven Aug 15 '18 at 14:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.