In salesforce lightning, sometimes we need to create, edit and save the records in the component. This is the time 3 types of components come into mind that arṣe recordEditform, RecordViewfrom, and recordData. We always get confused about which one to use.
The functionality of these components is basically the same to create a layout form to create or update a record. In addition, which component to use in a particular situation depends upon the scenario and the preference of the developer. But, there is always some amount of confusion while selecting the component. To avoid this confusion we should know the differences in these types of forms.
force:recordData
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
- It is used to create, edit and update a record without writing apex code.
- To save and delete the record, we need to define methods in the component’s controller and call “saveRecord” and “deleteRecord” functions on the component. These are the standard methods bound to the component.
- It uses an attribute object in which it sets the record which is loaded and being saved.
- We need to specify the save button explicitly and perform the save function by the standard saveRecord method of the component.
- We need to explicitly use lightning:input to display the data corresponding to fields specified in the component and binding it to an attribute that stores the record.
- We use this component when we need to access the record for edit, delete and update with a simple layout.
- 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).
- This component doesn’t support all Salesforce standard objects. For example, the Event and Task objects are not supported.
Example:To update a record using recordForm
<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>
lightning:recordEditform
Use the lightning:recordEditForm component to create a form that’s used to add a Salesforce record or update fields in an existing record. The component displays fields with their labels and the current values and enables you to edit their values.
lightning:recordEditForm supports the following features.
- Editing a record’s specified fields, given the record ID.
- Creating a record using specified fields.
- Customizing the form layout.
- Custom rendering of record data.
- It is used to create, edit and update a record without writing apex code.
- To perform a save operation, we need to define a submit button in the component and submit the fields of the component.
- It doesn’t need any attribute to load and save the record.
- This component uses a lightning input field to display the fields.
- We use this component when we need to display a proper user interface similar to a standard user interface.
Example: To update an existing record using recordEditform. To create a new record we don’t need to use the recordId attribute in the component.
<aura:component>
<lightning:recordEditForm recordId="003XXXXXXXXXXXXXXX" objectApiName="Contact">
<lightning:messages />
<lightning:outputField fieldName="AccountId" />
<lightning:inputField fieldName="FirstName" />
<lightning:inputField fieldName="LastName" />
<lightning:inputField fieldName="Email" />
<lightning:button class="slds-m-top_small" variant="brand" type="submit" name="update" label="update" />
</lightning:recordEditForm>
</aura:component>
lightning:recordViewform
Use the lightning:recordViewForm component to create a form that displays Salesforce record data for specified fields associated with that record. The fields are rendered with their labels and current values as read-only. You can customize the form layout or provide a custom rendering of record data.
- It is used to create, edit and update a record.
- To perform save, delete and update, we don’t need to write any method in the controller. The form will automatically submit by clicking the save button.
- It does not need any attribute to store the record being saved or loaded.
- This component does not require any explicit component to display the field in editable mode. It automatically generates the input fields if the mode is edited.
- This component does not require any button as it automatically generates the button to save the record.
- The user interface in this component depends on the layout you use.
- This component also takes care of field-level security and sharing for you, so users see only the data they have access to.
- This component doesn’t support all Salesforce standard objects. For example, the Event and Task objects are not supported.
Example:
<lightning:recordViewForm recordId="003R00000000000000" objectApiName="Contact">
<div class="slds-box">
<lightning:outputField fieldName="Name" />
<lightning:outputField fieldName="Birthdate" />
<lightning:outputField fieldName="Phone" />
<lightning:outputField fieldName="LeadSource" />
</div>
</lightning:recordViewForm>