Create record using Lightning Data Service in Lightning Component
CreateContactQuicklyApp.app
<aura:application extends="force:slds">
<c:CreateContactQuickly />
</aura:application>
CreateContactQuickly.cmp
<aura:component implements="force:appHostable, flexipage:availableForAllPageTypes,
force:hasRecordId" access="global" >
<!--flexipage:availableForRecordHome-->
<aura:attribute name="newContact" type="Object"/>
<aura:attribute name="simpleNewContact" type="Object"/>
<aura:attribute name="newContactError" type="String"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<force:recordData aura:id="contactRecordCreator"
layoutType="FULL"
targetRecord="{!v.newContact}"
targetFields="{!v.simpleNewContact}"
targetError="{!v.newContactError}" />
<!-- Display the new contact form -->
<div class="Create Contact">
<lightning:card iconName="action:new_contact" title="Create Contact">
<div class="slds-p-horizontal--small">
<br/>
<br/>
<lightning:input aura:id="inputFirstName" type="text" label="First Name" value="{!v.simpleNewContact.FirstName}" />
<br/>
<lightning:input aura:id="inputLastName" type="text" label="Last Name" value = "{!v.simpleNewContact.LastName}" />
<br/>
<lightning:input aura:id="inputDeptName" type="text" label="Department" value="{!v.simpleNewContact.Department}" />
<br/>
<lightning:button aura:id="buttonApply" label="Create Contact" variant="brand" onclick="{!c.handleSaveContact}"/>
<br/>
</div>
</lightning:card>
</div>
<!-- Display Lightning Data Service errors -->
<aura:if isTrue="{!not(empty(v.newContactError))}">
<div class="recordError">
{!v.newContactError}</div>
</aura:if>
</aura:component>
CreateContactQuicklyController.js
({
doInit: function(component, event, helper) {
// Prepare a new record from template
component.find("contactRecordCreator").getNewRecord(
"Contact", // sObject type (objectApiName)
null, // recordTypeId
false, // skip cache?
$A.getCallback(function() {
var rec = component.get("v.newContact");
var error = component.get("v.newContactError");
if(error || (rec === null)) {
console.log("Error initializing record template: " + error);
return;
}
console.log("Record template initialized: " + rec + " " + rec.sobjectType);
})
);
},
handleSaveContact : function(component, event, helper) {
var inputFieldFirstName = component.find("inputFirstName");
if(inputFieldFirstName != null) {
var fname = inputFieldFirstName.get("v.value");
console.log('Value of First Name is ' + fname);
} else {
console.log('inputField for first name is null');
}
var inputFieldDeptName = component.find("inputDeptName");
if(inputFieldDeptName != null) {
var dept = inputFieldDeptName.get("v.value");
console.log('Value of Department is ' + dept);
} else {
console.log('inputField for Department is null');
}
var inputFieldLastName = component.find("inputLastName");
if(inputFieldLastName != null) {
var lname = inputFieldLastName.get("v.value");
console.log('Value of Last Name is ' + lname);
} else {
console.log('inputField for last name is null');
}
console.log(inputFieldFirstName.get('v.validity').valid);
if($A.util.isEmpty(fname)) {
inputFieldFirstName.setCustomValidity("You must enter a value for First Name.");
inputFieldFirstName.reportValidity();
} else {
inputFieldFirstName.setCustomValidity("");
inputFieldFirstName.reportValidity();
console.log(inputFieldFirstName.get('v.validity').valid);
}
console.log(inputFieldLastName.get('v.validity').valid);
if ($A.util.isEmpty(lname)) {
inputFieldLastName.setCustomValidity("You must enter a value for Last Name.");
inputFieldLastName.reportValidity();
} else {
inputFieldLastName.setCustomValidity("");
inputFieldLastName.reportValidity();
console.log(inputFieldLastName.get('v.validity').valid);
}
//component.set("v.simpleNewContact.AccountId", component.get("v.recordId"));
component.find("contactRecordCreator").saveRecord(function(saveResult) {
console.log('saveResult out of saveRecord ' + saveResult);
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
// record is saved successfully
console.log('saveResult state ' + saveResult.state);
component.find("contactRecordCreator").getNewRecord(
"Contact", // sObject type (objectApiName)
null, // recordTypeId
false, // skip cache?
$A.getCallback(function() {
var rec = component.get("v.newContact");
var error = component.get("v.newContactError");
if(error || (rec === null)) {
console.log("Error initializing record template: " + error);
return;
}
console.log("Record template initialized: " + rec + " " + rec.sobjectType);
})
);
var resultsToast = $A.get("e.force:showToast");
resultsToast.setParams({
"title": "Saved",
"message": "The record was saved."
});
resultsToast.fire();
} else if (saveResult.state === "INCOMPLETE") {
// handle the incomplete state
console.log("User is offline, device doesn't support drafts.");
} else if (saveResult.state === "ERROR") {
// handle the error state
console.log('Problem saving contact, error: ' + JSON.stringify(saveResult.error));
} else {
console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
}
});
}
})
Tabs > Lightning Component based tab > Create new tab > Quick_Create_Contact
Add tab to Sales app.
