Capture record update via LEX user interface inside custom Aura Component

Question

I have a custom component used within the Utility Bar reflecting the context record field values (See below):

<aura:component
    description="EC_RelatedTo"
    implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome"
    access="global"
    controller="EC_RelatedToCtrl"
>
    <aura:attribute name="selectedRelatedToRecord" type="SObject"/>
    <aura:attribute name="selectedRelatedToSobjectApiName" type="String"/>
    <aura:attribute name="selectedRelatedToSobjectName" type="String"/>
    <aura:attribute name="selectedRelatedToIcon" type="String"/>

    <lightning:recordViewForm
        aura:id="ec-generic-record-view"
        recordId="{!v.selectedRelatedToRecord.Id}"
        objectApiName="{!v.selectedRelatedToSobjectApiName}"
    >
        <div class="slds-box" aura:id="ec-related-to-collapsible">
            <span class="slds-icon_container record-view-icon">
                <lightning:icon
                    iconName="{!v.selectedRelatedToIcon}"
                    size="small"
                    class="{!
                        v.selectedRelatedToSobjectApiName == 'Contact_Brand_Details__c' ?
                        'cbdIcon' :
                        ''
                    }"
                />
            </span>
                <span class="record-view-obj-name">
                <b>{!v.selectedRelatedToSobjectName}</b>
            </span>
            <span
                class="slds-icon_container"
                onclick="{!c.changeRelatedTo}"
                id="ec-change-related-to"
            >
                <lightning:icon
                    iconName="utility:change_record_type"
                    alternativeText="Click here to change relate to"
                    size="small"
                />
            </span>
            <aura:if isTrue="{!v.isNewCaseScenario}">
                <div onclick="{!c.handleDeleteNewCase}" class="ec-delete-new-case">
                    <lightning:icon
                        iconName="action:delete"
                        alternativeText="Click here to delete the record"
                        size="xx-small"
                    />
                </div>
            </aura:if>
            <hr class="ec-hr"/>
            <aura:if isTrue="{!v.selectedRelatedToSobjectApiName == 'Case'}">
                <lightning:outputField fieldName="CaseNumber"/>
                <lightning:outputField fieldName="Origin"/>
                <lightning:outputField fieldName="Legal_Entity_Display_Name__c"/>
                <aura:set attribute="else">
                    <lightning:outputField fieldName="Name"/>
                    <lightning:outputField fieldName="Legal_Entity__c"/>
                </aura:set>
            </aura:if>
            <aura:if isTrue="{!or(
                v.selectedRelatedToSobjectApiName == 'Case',
                v.selectedRelatedToSobjectApiName == 'Opportunity'
            )}">
                <lightning:outputField fieldName="cLanguage__c"/>
                <lightning:outputField fieldName="Account_Brand__c"/>
                <!--CBD - different field names-->
                <aura:set attribute="else">
                    <lightning:outputField fieldName="Language__c"/>
                    <lightning:outputField fieldName="Brand__c"/>
                </aura:set>
            </aura:if>
        </div>
    </lightning:recordViewForm>
</aura:component>

lightning:recordViewForm component is very useful, because whenever a user updates the record from within the LEX user interface (when the utility item is hidden), updated field values are immediately shown within the custom component when the utility item gets maximized back. However, I would like to be able to apply further processing using javascript whenever a field value is changed. Is there a way to capture such an event?

Thanks, Mateusz

Answer 1

In the LWC version, you can listen to the load event. The load event is fired when the form gets new data from Lightning Data Service. Are you able to use the LWC version of the component instead of the Aura one? You can always wrap the LWC component in an Aura component, if it's needed.

There is an idea that you can vote too.

Answer 2

Thank you very much for your idea. I think I should be able to use LWC version, however, the component code I pasted here is embed within a cascade of other Aura parent components. I need to prepare a proof of concept, but it sounds really good.

Many thanks, Mateusz :)