Specify edit fields from Flow to Lightning Component

I recently published a post on how to create a flow interface using lightning components. Part of that process included using the force:recordEdit base component to provide an edit interface. That component, however, loads all available fields for the object which could be a bit cumbersome if you have a large number of fields. To improve upon that I decided to see if there was a to provide a concise edit form. Summer ‘18 release introduced the lightning:recordForm component that allows specifying a list of fields to display. The component did not seem to support flows as no fields loaded whether or not I specified fields (if anyone had the same experience, please leave a comment below). There is a known issue that occurs when previewing a lightning app from the developer console, but I am not sure if it is related.

Without finding a resolution for that issue I moved onto the lightning:recordEditForm component instead. It requires a bit more markup and code, however, I was able to modify the existing FlowRecordEditCmp I developed to allow fields to be specified explicitly.

Modifications to Component Markup

New Attributes

To accommodate capturing new parameters to work with the lightning:recordEditForm base component, the following new attributes were added.

<aura:component implements=”lightning:availableForFlowScreens” access=”global”> <aura:attribute name=”recId” type=”String” /> <aura:attribute name=”showMsg” type=”Boolean” default=”false”/> <aura:attribute name=”editFormType” type=”String” default=”recordEdit” description=”recordEdit or recordForm”/> <aura:attribute name=”fieldList” type=”String” /> <aura:attribute name=”fieldListArr” type=”String[]” /> <aura:attribute name=”objApiName” type=”String” /> <aura:attribute name=”numOfCols” type=”Integer” default=”2″ /> ………………………………………………………………………………………

• editFormType : A string value that can either be recordEdit or recordForm. Selecting the former will render the original force:recordEdit component and the latter will render the lightning:recordEditForm component.
• fieldList: A string value that accepts a comma separated list of field api names.
• fieldListArr: A string array that will be built using the fieldList csv string and will be used to dispay fields for the component.
• objApiName: The api name of the sObject.

Additional handler

A new handler was added that will handle component initialization. This will responsible for preparing the list of specified api field names to be used with the lightning:recordEditForm component.

<aura:handler name=”onSaveSuccess” event=”force:recordSaveSuccess” action=”{!c.saveSuccessful}”/> <aura:handler name=”init” value=”{!this}” action=”{!c.doInit}” />

Changes to force:recordEdit

The original force:recordEdit base component can be used if you don’t mind all available fields to be displayed. It will only render if the editFormType attribute is set to “recordEdit”.

<aura:if isTrue=”{!v.showMsg == TRUE}”> <ui:message title=”Success!” severity=”confirm” closable=”false”>Record Save Successful!</ui:message> </aura:if> <aura:if isTrue=”{!and(v.showMsg == FALSE, v.editFormType == ‘recordEdit’)}”> <force:recordEdit aura:id=”recEdit” recordId=”{!v.recId}”/> <lightning:button label=”Save” onclick=”{!c.saveRecord}”/> </aura:if>

Adding lightning:recordEditForm

To achieve the goal of allowing explicit set of fields to be displayed for edit, I have added the lightning:recordEditForm base component to be rendered if the edtFormType attribute is set to “recordForm”. The recordId and objectApiName attributes of the form component will be set to the recId and objApiName attributes of the FlowRecordEditCmp component respectively.

<aura:if isTrue=”{!and(v.editFormType == ‘recordForm’)}” > <lightning:recordEditForm recordId=”{!v.recId}” objectApiName=”{!v.objApiName}” onsuccess=”{!c.saveSuccessful}”><lightning:messages /><aura:iteration items=”{!v.fieldListArr}” var=”fld”> <lightning:inputField fieldName=”{!fld}” /> </aura:iteration> <div class=”slds-m-top_medium”> <lightning:button variant=”brand” type=”submit” name=”save” label=”Save” /> </div> </lightning:recordEditForm> </aura:if>

Based on the comma-separated values provided as parameter specified from the flow, a string array will be built and used in an aura:iteration to display lightning:inputField components. A lightning:button where type is set to submit will be added to the component. Since we are not specifying the onsave attribute, the component will use the built-in save action when the Save button is clicked. The onsuccess attribute, however, has been set and will override the default action with the existing saveSuccessful javascript controller function.

Update to Design File

The additional attributes will be added to the design component so that they can be accessible via the flow.

<design:component > <design:attribute name=”recId” label=”Record Id” required=”true”/> <design:attribute name=”editFormType” label=”Edit Form Type” description=”(recordEdit or recordForm)” required=”true”/> <design:attribute name=”fieldList” label=”Edit Field List” description=”List of comma-separated field api names” /> <design:attribute name=”objApiName” label=”Object API Name” description=”The api name of the object record to be edited” /> </design:component>

Updates to Javascript Controller

A list of comma-separated field API names will be provided to the fieldList component attribute via flow. The doInit function will determine if the recordEditForm components is selected for use. If so, the string value will be converted into a string array that contains a list of field names and will be stored in the fieldListArr component attribute.

doInit: function(component, event, helper){

    let formType = component.get('v.editFormType');
    let obj = component.get('v.objApiName');

    console.log(obj);

    if(formType === 'recordForm'){
        let fields = component.get('v.fieldList');
        console.log('field list: ' + fields);

        if(fields){
            let fieldsArr = fields.split(',');
            console.log(fieldsArr);
            component.set('v.fieldListArr', fieldsArr);
        }
    }
},

The aura:iteration component can then use the array to load the specified list of fields.

Using the component in a Flow

To leverage the new edit form, we will have to provide additional input parameters. As per the example of the previous post I will provide the record Id, the form type value, the sObject API name, and a list of fields to display.

Below is an example of the component during a flow run.

Hope you enjoyed reading about my update on the FlowRecordEditCmp. Check out the complete code from the Github repo. Stay tuned for more posts by clicking on the follow button at the bottom or follow me on twitter.

Until next time!