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.

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 contact us, we will be happy to help you https://wedgecommerce.com/contact-us/.

Leave A Reply

Please verify that you are not a robot.

Tell us about Your Company

How can we help you with your business?




    Message Sent!

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

    Back to Home