I'm building a Lightning component page using multiple Field Sets which using lightning:recordForm tag so that every section has its own Save and Cancel button.

I want to make it simple and comfortable for the users so there will be just two general Save and Cancel buttons on the bottom of the page which covers all the Field Sets. Does someone have any idea how to do it?



UPDATE: Just realized that the question is about <lightning:recordForm> but the answer below uses <lightning:recordEditForm>, but believe that the idea is the same.

ORIGINAL ANSWER: Whenever something needs to be communicated/done across multiple components, the first thing that should come to our mind is events.

Here I am assuming that you are going to have the save button in a separate component because you intend to click one button to save multiple fieldset components.

The trick lies in <lightning:recordEditForm aura:id="RecordDetailByFieldSet" ... and then saving all such aura:ids via the submit() from Controller (or helper) JS.


<aura:event type="COMPONENT" description="Event to save multiple fieldsets in one shot">
    <aura:attribute name="message" type="String" description="Useless, can ignore"/>

Perhaps a page header component that houses that single Save button, like so:


<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:registerEvent name="RecordDetailSaveEvent" type="c:RecordDetailSaveEvent" />
    <lightning:button variant="brand" class="slds-button slds-button_success slds-text-color_inverse" label="Save" onclick="{!c.fireRecordDetailSaveEvent}"/>

RecordHeader.cmp Controller JS

fireRecordDetailSaveEvent : function(component, event, helper) {
            var recordDetailSaveEvent = $A.get("e.c:RecordDetailSaveEvent");
                "message" : "RecordDetailSaveEvent fired."
        } catch(err) {
            console.log('-------> fireRecordDetailSaveEvent ERROR: ' + err + ' ** MESSAGE: ' + err.message + ' ** STACK: ' + err.stack);

And, your fieldset component, like so:


<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:handler name="RecordDetailSaveEvent" event="c:RecordDetailSaveEvent" action="{!c.saveAllFieldsets}"/>
    <lightning:recordEditForm aura:id="RecordDetailByFieldSet" recordId="{!v.recordId}" objectApiName="My_Object__c">
        <!-- one or more lightning:inputField here --> 
    <!-- Amongst other things -->

RecordDetailByFieldSet.cmp Controller JS

saveAllFieldsets : function(component, event, helper) {
            var fieldSets = component.find("RecordDetailByFieldSet");
                fieldSets.submit(); //<---- This is the key aspect
        } catch(err) {
            console.log('-------> saveRecord ERROR: ' + err + ' ** MESSAGE: ' + err.message + ' ** STACK: ' + err.stack);

I doubt if the page will refresh automatically after submit(), so you may have to refresh it manually for testing. But it would be a good idea to implement an event (in similar lines) that refreshes each of your fieldset component upon submit().

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.