7

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}"/>

2 Answers 2

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.

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

I have noticed that the way recordId under the lightning:recordForm is referenced also effects the behavior of the cancel button. For example below approach wasn't working when I put the component on opportunity record page:

<aura:attribute name="oppRec" type="Object" description="A simplified view 

record object to be displayed"/>
    <lightning:recordForm
                    recordId="{!if(v.oppRec.OpportunityId,v.oppRec.OpportunityId,'')}"....

However the cancel button started working when I changed above line to:

<lightning:recordForm
            recordId="{!if(v.recordId,v.recordId,'')}"

Note: the if condition was added in recordId to handle another error that was sometimes showing while loading page.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .