Lightning Data Service Basics: Manipulate Records with force:recordData
Manipulation of records with forcerecordData featsure. You can do insert update and delete using this.
accDisplay Component Code
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="record" type="Object"
description="The record object to be displayed"/>
<aura:attribute name="simpleRecord" type="Object"
description="A simplified view record object to be displayed"/>
<aura:attribute name="recordError" type="String"
description="An error message bound to force:recordData"/>
<force:recordData aura:id="accountRecord"
layoutType="FULL"
recordId="{!v.recordId}"
targetError="{!v.recordError}"
targetRecord="{!v.record}"
targetFields ="{!v.simpleRecord}"
mode="VIEW"/>
<!-- Display a lightning card with details about the record -->
<div class="Record Details">
<lightning:card iconName="standard:account" title="{!v.accountRecord.Name}" >
<div class="slds-p-horizontal--small">
<p class="slds-text-heading--small">
<lightning:formattedText title="Name" value="{!v.accountRecord.Name}" /></p>
<p class="slds-text-heading--small">
<lightning:formattedText title="Industry" value="{!v.accountRecord.Industry}" /></p>
<p class="slds-text-heading--small">
<lightning:formattedText title="Description" value="{!v.accountRecord.Description}" /></p>
<p class="slds-text-heading--small">
<lightning:formattedPhone title="Phone" value="{!v.accountRecord.Phone}" /></p>
</div>
</lightning:card>
</div>
<!-- Display Lightning Data Service errors, if any -->
<aura:if isTrue="{!not(empty(v.recordError))}">
<div class="recordError">
{!v.recordError}</div>
</aura:if>
</aura:component>
accEdit Component Code
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="record" type="Object"
description="The record object to be displayed"/>
<aura:attribute name="simpleRecord" type="Object"
description="A simplified view record object to be displayed"/>
<aura:attribute name="recordError" type="String"
description="An error message bound to force:recordData"/>
<force:recordData aura:id="accountRecord"
layoutType="FULL"
recordId="{!v.recordId}"
targetError="{!v.recordError}"
targetRecord="{!v.record}"
targetFields ="{!v.simpleRecord}"
fields="Name"
mode="EDIT"/>
<!-- Display an editing form -->
<div class="Record Details">
<lightning:card iconName="action:edit" title="Edit Account">
<div class="slds-p-horizontal--small">
<lightning:input label="Account Name" value="{!v.accountRecord.Name}"/>
<br/>
<lightning:button label="Save Account" variant="brand" onclick="{!c.handleSaveRecord}" />
</div>
</lightning:card>
</div>
</aura:component>
accEdit Controlller Js Code
({
handleSaveRecord: function(component, event, helper) {
component.find("accountRecord").saveRecord($A.getCallback(function(saveResult) {
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
console.log("Save completed successfully.");
} else if (saveResult.state === "INCOMPLETE") {
console.log("User is offline, device doesn't support drafts.");
} else if (saveResult.state === "ERROR") {
console.log('Problem saving record, error: ' +
JSON.stringify(saveResult.error));
} else {
console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
}
}));}
})
