APEX Less Lightning Component
Display Record Data:
Yes, now we can create a lightning component to view the data of a record without writing a single line of a controller (Apex And JS Both).
Lightning Provide us a Component name lightning:recordViewForm. This component requires API Version 41.0 and later.
This component takes recordId and done rest of things internally. It also takes care of Field-Level-Security and Sharing for you. So user see data only they have access.
Here is the code snippet
<aura:component implements="force:hasRecordId,lightning:actionOverride"> <lightning:card variant="brand" title="Contact" iconName="standard:contact"> <p class="slds-p-horizontal_small"> <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Contact"> <div class="slds-grid"> <div class="slds-col slds-size_1-of-2"> <lightning:outputField fieldName="Name"></lightning:outputField> </div> <div class="slds-col slds-size_1-of-2"> <lightning:outputField fieldName="Email"></lightning:outputField> </div> </div> <div class="slds-grid"> <div class="slds-col slds-size_1-of-2"> Account <lightning:outputField fieldName="AccountId" variant="label-hidden"></lightning:outputField> </div> <div class="slds-col slds-size_1-of-2"> <lightning:outputField fieldName="Phone" ></lightning:outputField> </div> </div> <div class="slds-grid"> <div class="slds-col slds-size_1-of-2"> <lightning:outputField fieldName="Birthdate"></lightning:outputField> </div> <div class="slds-col slds-size_1-of-2"> <lightning:outputField fieldName="MailingAddress"></lightning:outputField> </div> </div> </lightning:recordViewForm> </p> </lightning:card> </aura:component>
Let’s Have a look at the code we have written.
force:hasRecordId: This interface helps us to read the id from the browser’s URL. Internally it adds an aura:attribute into over component which name is recordId.
lightning:actionOverride: It makes our component visible into override window.
lightning: recordViewForm: This is wrapper component that accepts recordId and objectApiName and displays one or more field value with the help of lightning:outputField. recordId and objectApiName are required.
lightning:outputField: It accepts the fieldName and display the field value in the correct format according to data type. We need to wrap this inside the lightning:recordViewForm tag. User’s locale setting helps to display format for number, date etc.
Consideration before using lightning:outputField: Lookup values are rendered as text. Linking and hover overlays on the field value are not supported till now.
Edit a record or Create new Record: Yes we can edit and create a record without writing a single line of the apex. We can use lightning:recordEditForm tag.
This tag is very much similar to lightning:recordViewForm tag. As it accepts recordId and objectApiName to work. And also manage Field-Level-Security and sharing.
It has some cool feature regarding save a record or update its value. If a lightning:button component with type=”submit” is used inside the lightning:recordEditForm then it automatically saves the changes to salesforce.
If we provide value for recordId then this component works for edit that record(Override component on the edit button of Object). But if recordId is not available then it acts for creating a new record(override component for the new button of the object). It automatically handle the errors in saving record, we must include lightning:message component inside the lightning:recordEditForm.
It also accepts recordTypeId, So if we have multiple recordTypes and do not have a default one, we can pass record Type Id for the form.
Some other attribute for lightning:recordEditForm.
onerror: The action triggered when there is an error on form submission.
onload: The action triggered when the form data is loaded.
onsubmit: The action triggered when the form is submitted.
onsuccess: The action triggered when the form is saved.
onerror action returns the ‘error’ parameter. It contains the following properties.
errorCode
message
onsuccess action returns the ‘response’ parameter. It contains the following properties.
apiName: API name of the object. Such as Contact, Account.
childRelationships: The child relationship data for this record.
fields: The field data for this record, matching the requested layout.
id: The ID of this record.
recordTypeInfo: The record type info for this record, if any.
Code Snippets:
Lightning Component:
<aura:component implements="force:hasRecordId,lightning:actionOverride"> <lightning:card title="Contact" iconName="standard:contact" class="slds-p-around_medium"> <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="Contact" onsuccess="{!c.recordSaved}"> <lightning:messages /> <div class="slds-grid"> <div class="slds-col slds-size_1-of-2 slds-p-around_medium"> <lightning:inputField fieldName="FirstName"></lightning:inputField> </div> <div class="slds-col slds-size_1-of-2 slds-p-around_medium"> <lightning:inputField fieldName="LastName"></lightning:inputField> </div> </div> <div class="slds-grid"> <div class="slds-col slds-size_1-of-2 slds-p-around_medium"> <lightning:inputField fieldName="Email"></lightning:inputField> </div> <div class="slds-col slds-size_1-of-2 slds-p-around_medium"> <lightning:inputField fieldName="Phone"></lightning:inputField> </div> </div> <div class="slds-grid"> <div class="slds-col slds-size_1-of-2 slds-p-around_medium"> <lightning:inputField fieldName="AccountId"></lightning:inputField> </div> </div> <lightning:button type="submit" label="Save" variant="brand"></lightning:button> </lightning:recordEditForm> </lightning:card> </aura:component>
Controller(JS):
({ recordSaved : function(component, event, helper) { var params = event.getParams(); //alert('record Is Saved with id '+params.response.id); console.log(params.response.childRelationships); console.log(params.response.fields); console.log(params.response.recordTypeInfo); console.log(params.response.id); } })
