Reading list Switch to dark mode

    force:recordData In Lightning

    Updated 6 September 2017

    In this blog we are going to learn about force:recordData tag in salesforce lightning. By using lightning data service, this tag is used to define the parameters for accessing, modifying, or creating a record.

    Methods

    Following methods are supported:

    1).  getNewRecord : Set the record to target record.

    2). reloadRecord : Perform the load function on init using current configuration value.

    3). saveRecord : To save the record.

    Searching for an experienced
    Salesforce Company ?
    Find out More

    4). deleteRecord:  To delete the record.

    EXAMPLE

     In this example we are going to create a lightning component which modify the name of the current  account without using server side controller (Apex Class), means all action perform on client side by using lightning data service.  Let’s see how it works.

    1). Create a new component with following code:

    <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId"> <!--inherit recordId attribute-->
    
         <!-- 
        /**
        * Webkul Software.
        *
        * @category  Webkul
        * @author    Webkul
        * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
        * @license   https://store.webkul.com/license.html
        */
        -->
        
    <aura:attribute name="record" type="Object" />
    <aura:attribute name="simpleRecord" type="Object" />
    <aura:attribute name="recordError" type="String" />
    
    <force:recordData aura:id="recordEditor"
        layoutType="COMPACT"
        recordId="{!v.recordId}"
        targetError="{!v.recordError}"
        targetRecord="{!v.record}"
        targetFields="{!v.simpleRecord}"
        mode="EDIT" />
    
        <!-- Display a header with details about the record -->
        <div class="slds-form--stacked">
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="recordName">Name: </label>
                <div class="slds-form-element__control">
                  <ui:outputText class="slds-input" aura:id="recordName"
                    value="{!v.simpleRecord.Name}" />
                </div>
            </div>
        </div>
    
        <!-- Display Lightning Data Service errors, if any -->
        <aura:if isTrue="{!not(empty(v.recordError))}">
            <div class="recordError">
                <ui:message title="Error" severity="error" closable="true">
                    {!v.recordError}
                </ui:message>
            </div>
        </aura:if>
    
        <!-- Display an editing form -->
        <lightning:input aura:id="recordName" name="recordName" label="Name"
                      value="{!v.simpleRecord.Name}" required="true"/>
    
         <lightning:button label="Save Record" onclick="{!c.handleSaveRecord}"
                   variant="brand" class="slds-m-top--medium"/>
    </aura:component>

    2). Now, create client side controller as follows:

    ({
         /**
        * Webkul Software.
        *
        * @category  Webkul
        * @author    Webkul
        * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
        * @license   https://store.webkul.com/license.html
        */
        
        handleSaveRecord: function(component, event, helper) {
            component.find("recordEditor").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));
                }
            }));}
    })

    OUTPUT

    #Before changing the name of the account 

    # After changing name :

    Support

    That’s all for force:recordData In Lightning Record Page , still if you have any further query  or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to add a ticket, we will be happy to help you https://support.uvdesk.com/en/customer/create-ticket/.

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content