Lightning Record Form Simplified

Lightning record form allows you to quickly create, update or view records.

It implements the Lightning Data Services and doesn’t require additional Apex Controllers to create and edit data. to It’s similar to the standard controller on the visual force page. It also takes care of field-level security and sharing for you, so users see only the data that they have access to.

Use the lightning:recordForm component to create a lightning record form.

The lightning:recordForm component provides these helpful features:

• Switches between view and edit modes automatically when the user begins editing a field in a view form
• Provides default Cancel and Save buttons in edit forms
• Uses the object’s default record layout with support for multiple columns
• Loads all fields in the object’s compact or full layout, or only the fields you specify

Let’s explore it using some examples:

Please create an aura component with the name MyLightningForms

Create A Record Using lightning:recordForm

Please save the following code into the MyLightningForms component:

<aura:component implements="force:hasRecordId, flexipage:availableForAllPageTypes">
<aura:attribute name="fields" type="String[]" default="['Name','AnnualRevenue','Industry']" />
<aura:attribute name="objectApiName" type="String" default="Account" />
<lightning:notificationsLibrary aura:id="notifLib"/>
      
<lightning:recordForm
    objectApiName="{!v.objectApiName}"
    fields="{!v.fields}"
    mode="edit"
    onsuccess="{!c.handleSuccess}"
    columns="1" />

</aura:component>	

Let’s discuss the attributes used in lightning:recordForm in the above component markup.

objectApiName: The API name of the object.

fields: List of fields to be displayed. The fields display in the order you list them.

mode: It will specify how the lightning:recorForm will behave. mode=edit will open the lightning record form in edit view. Lightning record form will create a new record if you have not specified the record Id using the recordId attribute.

onsuccess: The action triggered when the form is submitted.

columns: Specifies the number of columns for the form.

In the above example, we have used the fields attribute to specify the fields that will be rendered on the lightning:recordForm

You can also use layoutType=”Full” to load all fields in the full layout.

({
    handleSuccess : function(component, event, helper) {
       
        component.find('notifLib').showToast({
            "variant":"success",
            "title":"Record Created Successfully",
            "message":"Record Id: " + event.getParam("id")
        });
    }
})

Please create a lightning app page, add the MyLightningForms into it.

Below is the output of this component:

View A Record Using lightning:recordForm

You can view a record using lightning:recordForm in view mode or read-only mode.

view mode allows you to view a record and optionally edit field values.

read-only mode allows you to view a record but not edit its field values.

Viewing a Record with Option to Edit Fields:

Please save the following code into the MyLightningForms component:

<aura:component implements="force:hasRecordId, flexipage:availableForAllPageTypes">
<aura:attribute name="objectApiName" type="String" default="Account" />
<aura:attribute name="recordId" type="String" default="0012x00000OqGYjAAN" />
<lightning:notificationsLibrary aura:id="notifLib"/>
      
<lightning:recordForm
    objectApiName="{!v.objectApiName}"
    layoutType="Compact"
    mode="view"
    recordId="{!v.recordId}"

/>

</aura:component>	

Let’s discuss the attributes used in lightning:recordForm in the above component markup.

objectApiName: The API name of the object.

layoutType: The type of layout to use to display the form fields. Possible values: Compact, Full. When creating a new record, only the full layout is supported.

mode: mode=view displays field values with edit icons on updateable fields.

recordId: The ID of the record to be displayed.

Below is the output of this component:

Viewing a Record with Read-Only Fields:

Please save the following code into the MyLightningForms component:

<aura:component implements="force:hasRecordId, flexipage:availableForAllPageTypes">
<aura:attribute name="objectApiName" type="String" default="Account" />
<aura:attribute name="recordId" type="String" default="0012x00000OqGYjAAN" />
<lightning:notificationsLibrary aura:id="notifLib"/>
      
<lightning:recordForm
    objectApiName="{!v.objectApiName}"
    layoutType="Compact"
    mode="readonly"
    recordId="{!v.recordId}"

/>

</aura:component>	

Use mode=readonly to displays field values in read-only mode.

Below is the output of this component:

Edit A Record Using lightning:recordForm

To create a form that lets you edit a record, specify the mode=”edit” attribute.

Use recordId and objectApiName to pass the ID of the record and the corresponding object API name to be edited.

Specify the fields using the fields attribute, or layoutType attribute to load all the fields defined on the Full or Compact layout.

Please save the following code into the MyLightningForms component:

<aura:component implements="force:hasRecordId, flexipage:availableForAllPageTypes">
<aura:attribute name="objectApiName" type="String" default="Account" />
<aura:attribute name="fields" type="String[]" default="['Name','AnnualRevenue','Industry']" />
<aura:attribute name="recordId" type="String" default="0012x00000OqGYjAAN" />
<lightning:notificationsLibrary aura:id="notifLib"/>
      
<lightning:recordForm
    objectApiName="{!v.objectApiName}"
    fields="{!v.fields}"
    mode="edit"
    onsuccess="{!c.handleSuccess}"
    columns="1" 
    recordId="{!v.recordId}"
    />

</aura:component>	

({
    handleSuccess : function(component, event, helper) {
       
        component.find('notifLib').showToast({
            "variant":"success",
            "title":"Record Updated Successfully",
            "message":"Record Id: " + event.getParam("id")
        });
    }
})

Below is the output of this component:

So we covered how to use lightning:recordForm to create, view and edit records. We covered all the main attributes which is required to set up your lightning record form.

However, you can check all the attributes available for lightning:recordForm over here:
https://developer.salesforce.com/docs/component-library/bundle/lightning:recordForm/specification

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂