Sometimes we can have a requirement to add or modify field values in onsubmit
event of lightning:recordeditform
. In below example, I’m creating “Lead” object record using lightning:recordeditform
and in onsubmit event, I’m adding “Description” field value of “Lead” object.
Lightning Component:
<!--Sample.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
<!--Component-->
<div class="slds-m-around--xx-large">
<lightning:card title="Lead" iconName="standard:lead" class="slds-p-around_medium">
<lightning:recordEditForm aura:id="leadCreateForm" objectApiName="Lead" onsubmit="{!c.handleOnSubmit}">
<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="Company"></lightning:inputField>
</div>
</div>
<lightning:button type="submit" label="Save" variant="brand"/>
</lightning:recordEditForm>
</lightning:card>
</div>
</aura:component>
Lightning JS Controller:
({
handleOnSubmit : function(component, event, helper) {
event.preventDefault(); //Prevent default submit
var eventFields = event.getParam("fields"); //get the fields
eventFields["Description"] = 'Lead was created from Lightning RecordEditForm'; //Add Description field Value
component.find('leadCreateForm').submit(eventFields); //Submit Form
}
})
Loading...
Sometimes we can have a requirement to get field values, record Id, record type Id, child relationships information in onsuccess
event of lightning:recordeditform
. In below example, I’m creating “Lead” object record using lightning:recordeditform
and after successfully saving the record, getting the field values in onsuccess
event.
Lightning Component:
<!--Sample.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
<!--Component-->
<div class="slds-m-around--xx-large">
<lightning:card title="Lead" iconName="standard:lead" class="slds-p-around_medium">
<lightning:recordEditForm aura:id="leadCreateForm" objectApiName="Lead" onsuccess="{!c.handleOnSuccess}">
<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="Company"></lightning:inputField>
</div>
</div>
<lightning:button type="submit" label="Save" variant="brand"/>
</lightning:recordEditForm>
</lightning:card>
</div>
</aura:component>
Lightning JS Controller:
({
handleOnSuccess : function(component, event, helper) {
var param = event.getParams(); //get event params
var fields = param.response.fields; //get all field info
var childRelationships = param.response.childRelationships; //get child relationship info
var recordTypeInfo = param.response.recordTypeInfo; //get record type info
var recordId = param.response.id; //get record id
console.log('Param - ' + JSON.stringify(param));
console.log('Fields - ' + JSON.stringify(fields));
console.log('Child Relationship - ' + JSON.stringify(childRelationships));
console.log('Record Type Info - ' + JSON.stringify(recordTypeInfo));
console.log('Record Id - ' + JSON.stringify(recordId));
//get Record Edit Form Field Values
console.log('FirstName - ' + fields.FirstName.value);
console.log('LastName - ' + fields.LastName.value);
console.log('Email - ' + fields.Email.value);
console.log('Phone - ' + fields.Phone.value);
console.log('Company - ' + fields.Company.value);
}
})
Loading...
Sometimes we can have a requirement to get record Id in onsuccess
event of lightning:recordeditform
. In below example, I’m creating “Lead” object record using lightning:recordeditform
and after successfully saving the record, getting the record Id in onsuccess
event.
Lightning Component:
<!--Sample.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
<!--Component-->
<div class="slds-m-around--xx-large">
<lightning:card title="Lead" iconName="standard:lead" class="slds-p-around_medium">
<lightning:recordEditForm aura:id="leadCreateForm" objectApiName="Lead" onsuccess="{!c.handleOnSuccess}">
<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="Company"></lightning:inputField>
</div>
</div>
<lightning:button type="submit" label="Save" variant="brand"/>
</lightning:recordEditForm>
</lightning:card>
</div>
</aura:component>
Lightning JS Controller:
({
handleOnSuccess : function(component, event, helper) {
var params = event.getParams(); //get event params
var recordId = params.response.id; //get record id
console.log('Record Id - ' + recordId);
}
})
Loading...
Lightning Data Service (LDS) is to serve as the data layer for Lightning. It is similar like Standard Controllers in Visualforce Page.
Advantages of Lightning Data Service:
Lightning Data Service allows to load, create, edit, or delete a record without requiring Apex code and SOQL query.
Lightning Data Service handles sharing rules and field-level security.
Records loaded in Lightning Data Service are cashed and shared across all components.
When one component updates a record, the other component using it are notified.
Lightning Data Service supports offline in Salesforce1.
In below example I’m creating Lead object record using Lightning Data Service. By using the new base lightning component lightning:recordEditForm
, we can create and edit records, without custom Javascript and Apex code.
Lightning Component:
<!--Sample.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
<!--Component-->
<div class="slds-m-around--xx-large">
<lightning:card title="Lead" iconName="standard:lead" class="slds-p-around_medium">
<lightning:recordEditForm aura:id="leadCreateForm" objectApiName="Lead" onsuccess="{!c.handleOnSuccess}">
<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="Company"></lightning:inputField>
</div>
</div>
<lightning:button type="submit" label="Save" variant="brand"/>
</lightning:recordEditForm>
</lightning:card>
</div>
</aura:component>
Lightning JS Controller:
({
handleOnSuccess : function(component, event, helper) {
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
"title": "Success!",
"message": "The record has been created successfully.",
"type": "success",
"mode": "pester"
});
toastEvent.fire();
$A.get("e.force:refreshView").fire();
}
})
Loading...
Lightning Component:
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">
<!--Attributes-->
<aura:attribute name="accFields" type="Account"/>
<!--Component Start-->
<!--Lightning Force Data to get Account record-->
<force:recordData aura:id="accRecordData"
layoutType="FULL"
recordId="{!v.recordId}"
targetFields="{!v.accFields}"
recordUpdated="{!c.handleRecordUpdate}"/>
<!--Component End-->
</aura:component>
Lightning JS Controller:
({
handleRecordUpdate: function(component, event, helper) {
var accountFields = component.get("v.accFields");
console.log('Account Name : '+ accountFields.Name);
}
})
Loading...