Lightning:recordForm

A lightning:recordForm component lets you to 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 and lightning:recordViewForm.

Additionally, this component takes care of FLS(field-level security) and sharing internally

The component accepts a mode value that determines the user interaction allowed for the form.

edit – Creates an editable form to add a record or update an existing one. When updating an existing record, specify the recordId.
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, and as such, can be omitted.
readonly – Creates a form to display a record without enabling edits. The form doesn’t display any buttons.

Creating a Record

Use mode=”edit” and pass in the object API name for the record to be created. Specify the fields using the fields attribute, or layoutType attribute to load all the fields defined on the given layout.Because no recordId is passed, edit mode loads the form with input fields that aren’t populated with field data. The form displays Submit and Cancel buttons

Editing a Record

Use mode=”edit” and 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 given layout.When a recordId is passed, edit mode loads the form with input fields displaying the specified record’s field values. The form also displays Submit and Cancel buttons.

Viewing a Record Read-Only

Use mode=”readonly” and pass the ID of the record and the corresponding object API name to be displayed. Specify the fields using the fields attribute, or layoutType attribute to display all the fields defined on the given layout.The readonly mode loads the form with output fields only, and without Submit or Cancel buttons

Lightning Component Code

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName" access="global" >
    <aura:attribute name="sObjectName" type="String" default="Contact" />
    <aura:attribute name="recordId" type="String" default="00336000004H6YMAA0" />    
    
    <lightning:card iconName="standard:contact" title="Create Mode : lightning:recordForm">
        
        <div class="slds-p-left_large slds-p-right_medium">	
            <lightning:recordForm aura:id="recordViewForm" 
                                  objectApiName="{!v.sObjectName}"
                                  fields="Name,Email,Phone"
                                  columns="2"
                                  layoutType ="Full"
                                  mode="edit"
                                  onsuccess="{!c.onSuccess}"
                                  onsubmit="{!c.onSubmit}"
                                  onload="{!c.onLoad}"
                                  onerror="{!c.onError}"
                                  />   
            
        </div>
    </lightning:card>
    <lightning:card iconName="standard:contact" title="Edit Mode : lightning:recordForm">
        <div class="slds-p-left_large slds-p-right_medium">	
            <lightning:recordForm aura:id="recordViewForm" 
                                  objectApiName="{!v.sObjectName}"
                                  columns="2"
                                  fields="Name,Email,Phone"
                                  recordId="{!v.recordId}"
                                  layoutType ="Full"
                                  mode="View"
                                  onsuccess="{!c.onSuccess}"
                                  onsubmit="{!c.onSubmit}"
                                  onload="{!c.onLoad}"
                                  onerror="{!c.onError}"
                                  />   
            
        </div>
    </lightning:card>
    
    <lightning:card iconName="standard:contact" title="Read Only Mode : lightning:recordForm">
        <div class="slds-p-left_large slds-p-right_medium">	
            <lightning:recordForm aura:id="recordViewForm" 
                                  objectApiName="{!v.sObjectName}"
                                  columns="2"
                                  fields="Name,Email,Phone"
                                  recordId="{!v.recordId}"
                                  layoutType ="Compact"
                                  mode="readonly"
                                  onsuccess="{!c.onSuccess}"
                                  onsubmit="{!c.onSubmit}"
                                  onload="{!c.onLoad}"
                                  onerror="{!c.onError}"
                                  />   
            
        </div>
    </lightning:card>
    
</aura:component>

Js Code

({
    onSuccess : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "The record has been Saved successfully."
        });
        toastEvent.fire();
    },
    onSubmit : function(component, event, helper) {
    },
    onLoad : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Loaded!",
            "message": "The record has been Loaded successfully ."
        });
        toastEvent.fire();
    },
    onError : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Error!",
            "message": "Error."
        });
        toastEvent.fire();
    }
    
    
})