Use the lightning:recordForm component 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
However, 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.
Lightining : recordForm
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="fields"
type="String[]"
default="['Name', 'Industry','Discount__c']"/>
<aura:attribute name="accid" type="String" />
<lightning:notificationsLibrary aura:id="notifLib" />
<lightning:recordForm
aura:id="RecordForm"
objectApiName="Account"
fields="{!v.fields}"
onsuccess="{!c.handleSuccess}" />
</aura:component> );
({
handleSuccess : function(cmp, event, helper) {
event.preventDefault();
const fields = event.getParam('fields');
fields.LastName = 'My Last Name';
cmp.find('RecordForm').submit(fields);
}
})
Output
Lightling :RecordEdit Form
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<lightning:recordEditForm aura:id="recordEditForm"
objectApiName="Contact"
onload="{!c.handleCreateLoad}">
<lightning:messages />
<lightning:inputField fieldName="Name" />
<lightning:inputField fieldName="Phone" />
<lightning:button class="slds-m-top_small" type="submit" label="Create new" />
</lightning:recordEditForm>
</aura:component>
({
handleCreateLoad : function(component, event, helper) {
var nameFieldValue = component.find("nameField").set("v.value", "My New Contact");
cmp.find('recordEditForm').submit(fields);
}
})
Output
Lightining : RecordView Form
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Account">
<lightning:outputField fieldName="Name"/>
<lightning:outputField fieldName="Phone"/>
<lightning:outputField fieldName="Rating"/>
<lightning:button
class="slds-m-top_small"
variant="brand"
type="submit"
label="Update" />
</lightning:recordViewForm>
</aura:component>
Output
