Detect lightning:recordForm change in mode attribute

I’m trying to disable some surrounding components based on the mode attribute within lightning:recordForm (i.e. anytime I’m in edit mode, I’d like to disable a lightning:buttonMenu that sits just outside the lightning:recordForm).

I’m using an aura attribute v.formMode to store the default mode “view”, but it doesn’t seem to update itself when I double click in the UI to make inline edits.

I looked through both lightning:recordForm and lightning:recordEditForm documentation, but there’s no special event to catch when the mode is changing, and it doesn’t seem to auto-update the binded aura variable.

<lightning:recordForm 
    aura:id="recordForm"
    recordId="{!v.recordId}"
    objectApiName="Case"
    fields="{!v.fields}"
    columns="2"
    mode="{! v.formMode }" />

Any ideas?

Answer

Mode initialization works only once. After you manually change mode in lightning:recordForm, it doesn’t fire neither component, nor application change event(tested in Salesforce Lightning Inspector).

You can handle changes of mode via onload handler.
But keep in mind, when component is rendering, it fires onload twice. That’s why you need to skip first time onload.

Also, when you’ve successfully saved changes, it is additionally fires onload. So, onsuccess should set formMode to ‘view’.

Component

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
    <aura:attribute name="skipFirstLoad" type="Boolean" default="true"/>
    <aura:attribute name="formMode" type="String" default="view" access="private"/>

    <lightning:recordForm
            aura:id="recordForm"
            recordId="{!v.recordId}"
            objectApiName="Case"
            fields="{!v.fields}"
            columns="2"
            mode="{#v.formMode}"
            onload="{!c.loadHandler}"
            onsuccess="{!c.successHandler}"
    />
</aura:component>

JS Controller

({
    loadHandler : function(component, event, helper) {
        if(component.get('v.skipFirstLoad')) {
            component.set('v.skipFirstLoad', false);
            return;
        }
        component.set('v.formMode', component.get('v.formMode') === 'view' ? 'edit' : 'view');
    },

    successHandler : function(component, event, helper) {
        component.set('v.formMode', 'view');
    }
});

Attribution
Source : Link , Question Author : Brian Miller , Answer Author : BlackCat

Leave a Comment