lightning:recordForm Example

lightning:recordForm Example

lightning:recordForm Example lightning aura component

lightning:recordForm component allows you to quickly create forms to add, view, or update a record. Using this component to create record forms is easier than building forms manually with lightning:recordEditForm or lightning:recordViewForm. 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

 

lightning:recordForm is less customizable. To customize the form layout or provide custom rendering of record data, use lightning:recordEditForm (add or update a record) and lightning:recordViewForm (view a record).

The objectApiName attribute is always required, and the recordId is required only when you’re editing or viewing a record.

lightning:recordForm implements Lightning Data Service and doesn’t require additional Apex controllers to create or edit record data. It also takes care of field-level security and sharing for you, so users see only the data that they have access to.

Modes

The component accepts a mode value that determines the user interaction allowed for the form. The value for mode can be one of the following:

  • edit – Creates an editable form to add a record or update an existing one. When updating an existing record, specify the record-id. Edit mode is the default when record-id is not provided, and displays a form to create new records.
  • view – Creates a form to display a record that the user can also edit. The record fields each have an edit button. View mode is the default when recordId is provided.
  • readonly – Creates a form to display a record without enabling edits. The form doesn’t display any buttons.

 

Specifying Record Fields

For all modes, the component expects the fields attribute or the layoutType attribute.

Use the fields attribute to pass record fields as an array of strings. The fields display in the order you list them.

Use the layoutType attribute to specify a Full or Compact layout. Layouts are typically defined (created and modified) by administrators. Specifying record data using layout-type loads the fields in the layout definition. All fields that have been assigned to the layout are loaded into the form.

To see the fields in the layout types in your org:

  • Full – The full layout corresponds to the fields on the record detail page. From the management settings for the object that you want to edit, go to Page Layouts.
  • Compact – The compact layout corresponds to the fields on the highlights panel at the top of the record. From the management settings for the object that you want to edit, go to Compact Layouts.

 

Editing a Record using lightning:recordForm

lightningRecordFormEditExampleAura.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
    <aura:attribute name="fields" type="String[]" default="['Name','AnnualRevenue','Industry']" />
    <lightning:recordForm aura:id="myRecordForm" recordId="{!v.recordId}" objectApiName="Account" fields="{!v.fields}" columns="2" mode="edit" onsubmit="{!c.handleSubmit}" />
</aura:component>

lightningRecordFormEditExampleAuraController.js

({
    handleSubmit : function(cmp, event, helper) {
        
        //you can change values from here
        /*const fields = event.getParam('fields');
        fields.Name = 'My Custom Name'; // modify a field
        cmp.find('myRecordForm').submit(fields);*/
    }

Now we can add this lightning aura component on the Account Record page.

  • Go to Account record
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your lightningRecordFormEditExampleAura component and drag it on Accont page.
  • Click Save and activate.

 

We will get the following output

lightningrecordForm Example Edit Record

 

Creating a Record using lightning:recordForm

lightningRecordFormEditExampleAura.cmp

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

lightningRecordFormCreateExampleAuraController.js

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

Now we can add this lightning aura component on the Account Record page.

  • Go to Account record
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your lightningRecordFormCreateExampleAura component and drag it on Accont page.
  • Click Save and activate.

 

We will get the following output

lightningrecordForm Example Create Record

 

For more details please refer to official link

Permanent link to this article: https://www.sfdcpoint.com/salesforce/lightningrecordform-example/

3 comments

    • Bharat Vyas on October 5, 2021 at 5:03 pm
    • Reply

    You are doing great job .Keep it up.

    • raju on November 10, 2022 at 5:40 pm
    • Reply

    how to give fields required….?

    • ram on November 26, 2022 at 1:03 am
    • Reply

    how to give fields required….?

Leave a Reply

Your email address will not be published.