Lightning Data Service Basics: Manipulate Records with force:recordData

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));

            }

        }));}

})