Sunday, 20 August 2017

Lightning Data Service - Salesforce Lightning Remote Objects

Lightning Data Service is in Beta, we can use lightning data service to create, upload, delete and edit salesforce object, without using apex controller, that is it is kind of Remote object that we have for salesforce visualforce page.

As it is beta, so many upgrades will be coming in future, Data access with Lightning Data Service is simpler than the equivalent using a server-side Apex controller. Read-only access can be entirely declarative in your component’s markup. It’s built on highly efficient local storage that’s shared across all components that use it. Records loaded in Lightning Data Service are cached and shared across components. Components accessing the same record see significant performance improvements, because a record is loaded only once, no matter how many components are using it.

here is a small and simple exam of lighting data component for creation of Contact record.





Here is the component code
 <aura:component implements="flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader,force:hasRecordId">  
   <aura:attribute name="account" type="Object"/>  
   <aura:attribute name="simpleAccount" type="Object"/>  
   <aura:attribute name="accountError" type="String"/>  
   <force:recordData aura:id="accountRecordLoader"  
     recordId="{!v.recordId}" fields="Name,BillingCity,BillingState" targetRecord="{!v.account}"  
     targetFields="{!v.simpleAccount}" targetError="{!v.accountError}"/>  
   <aura:attribute name="newContact" type="Object" access="private"/>  
   <aura:attribute name="simpleNewContact" type="Object" access="private"/>  
   <aura:attribute name="newContactError" type="String" access="private"/>  
   <force:recordData aura:id="contactRecordCreator"  
     layoutType="FULL" targetRecord="{!v.newContact}"  
     targetFields="{!v.simpleNewContact}" targetError="{!v.newContactError}" />  
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
   <!-- Display a header with details about the account -->  
   <div class="slds-page-header" role="banner">  
     <p class="slds-text-heading--label">{!v.simpleAccount.Name}</p>  
     <h1 class="slds-page-header__title slds-m-right--small slds-truncate slds-align-left">Create New Contact</h1>  
   </div>  
   <!-- Display Lightning Data Service errors, if any -->  
   <aura:if isTrue="{!not(empty(v.accountError))}">  
     <div class="recordError">  
       <ui:message title="Error" severity="error" closable="true">  
         {!v.accountError}  
       </ui:message>  
     </div>  
   </aura:if>  
   <aura:if isTrue="{!not(empty(v.newContactError))}">  
     <div class="recordError">  
       <ui:message title="Error" severity="error" closable="true">  
         {!v.newContactError}  
       </ui:message>  
     </div>  
   </aura:if>  
   <!-- Display the new contact form -->  
   <lightning:input aura:id="contactField" name="firstName" label="First Name" value="{!v.simpleNewContact.FirstName}" required="true"/>  
   <lightning:input aura:id="contactField" name="lastname" label="Last Name" value="{!v.simpleNewContact.LastName}" required="true"/>  
   <lightning:input aura:id="contactField" name="title" label="Title" value="{!v.simpleNewContact.Title}" />  
   <lightning:input aura:id="contactField" type="phone" name="phone" label="Phone Number"   
            pattern="^(1?(-?\d{3})-?)?(\d{3})(-?\d{4})$"  
            messageWhenPatternMismatch="The phone number must contain 7, 10, or 11 digits. Hyphens are optional."  
           value="{!v.simpleNewContact.Phone}" required="true"/>  
   <lightning:input aura:id="contactField" type="email" name="email" label="Email" value="{!v.simpleNewContact.Email}" />  
   <lightning:button label="Cancel" onclick="{!c.handleCancel}" class="slds-m-top--medium" />  
   <lightning:button label="Save Contact" onclick="{!c.handleSaveContact}" variant="brand" class="slds-m-top--medium"/>  
 </aura:component>  

Controller code

 ({  
   doInit: function(component, event, helper) {  
     component.find("contactRecordCreator").getNewRecord(  
       "Contact", null, false,   
       $A.getCallback(function() {  
         var rec = component.get("v.newContact");  
         var error = component.get("v.newContactError");  
       })  
     );  
   },  
   handleSaveContact: function(component, event, helper) {  
     if(helper.validateContactForm(component)) {  
       component.set("v.simpleNewContact.AccountId", component.get("v.recordId"));  
       component.find("contactRecordCreator").saveRecord(function(saveResult) {  
         if (saveResult.state === "SUCCESS") {  
           var resultsToast = $A.get("e.force:showToast");  
           resultsToast.setParams({  
             "title": "Contact Saved",  
             "message": "The new contact was created."  
           });  
           $A.get("e.force:closeQuickAction").fire();  
           resultsToast.fire();  
           $A.get("e.force:refreshView").fire();  
         }  
       });  
     }  
   },  
   handleCancel: function(component, event, helper) {  
     $A.get("e.force:closeQuickAction").fire();  
   },  
 })  

Helper code

 ({  
   validateContactForm: function(component) {  
     var validContact = true;  
           var allValid = component.find('contactField').reduce(function (validFields, inputCmp) {  
       inputCmp.showHelpMessageIfInvalid();  
       return validFields && inputCmp.get('v.validity').valid;  
     }, true);  
     if (allValid) {  
       var account = component.get("v.account");  
          return(validContact);   
     }   
      }  
 })  

This component you can use in Account Object detail page layout, and then try creating a contact record.
There are few things to keep in mind before thinking to use to Data service,


  • Can't be use for multiple records or mass DML's
  • Only available in Lightning & Salesforce1
  • Not all objects are supported by Lightning Data Service, listed in the link
Thanks


2 comments:

  1. Lightning Data Service is generally available in Winter ’18!

    https://releasenotes.docs.salesforce.com/en-us/winter18/release-notes/rn_lc_data_service.htm

    ReplyDelete