Craete Record Using Lightning Data Service

Biswajeet   March 24, 2018   4 Comments on Craete Record Using Lightning Data Service

Lightning Data Service (LDS) is to serve as the data layer for Lightning. It is similar like Standard Controllers in Visualforce Page.

Advantages of Lightning Data Service:

  • Lightning Data Service allows to load, create, edit, or delete a record without requiring Apex code and SOQL query.
  • Lightning Data Service handles sharing rules and field-level security.
  • Records loaded in Lightning Data Service are cashed and shared across all components.
  • When one component updates a record, the other component using it are notified.
  • Lightning Data Service supports offline in Salesforce1.

In below example I’m creating Lead object record using Lightning Data Service. By using the new base lightning component lightning:recordEditForm, we can create and edit records, without custom Javascript and Apex code.

Lightning Component:

<!--Sample.cmp--> 
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    
    <!--Component--> 
    
<div class="slds-m-around--xx-large">
        <lightning:card title="Lead" iconName="standard:lead" class="slds-p-around_medium">
            <lightning:recordEditForm aura:id="leadCreateForm" objectApiName="Lead" onsuccess="{!c.handleOnSuccess}">
                <lightning:messages />
                
                
<div class="slds-grid">
                    
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
                        <lightning:inputField fieldName="FirstName"></lightning:inputField>
                    </div>

                    
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
                        <lightning:inputField fieldName="LastName"></lightning:inputField>
                    </div>

                </div>

                
                
<div class="slds-grid">
                    
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
                        <lightning:inputField fieldName="Email"></lightning:inputField>
                    </div>

                    
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
                        <lightning:inputField fieldName="Phone"></lightning:inputField>
                    </div>

                </div>

                
                
<div class="slds-grid">
                    
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
                        <lightning:inputField fieldName="Company"></lightning:inputField>
                    </div>

                </div>

                
                <lightning:button type="submit" label="Save" variant="brand"/>
            </lightning:recordEditForm>
        </lightning:card>
    </div>

</aura:component>

Lightning JS Controller:

({
    handleOnSuccess : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "The record has been created successfully.",
            "type": "success",
            "mode": "pester"
        });
        toastEvent.fire();
        $A.get("e.force:refreshView").fire();
    }
})

  • Dhana

    I am following the similar approach the Lightning component that uses the Lightning Data Services to update the fields on the Case record, it works fine if the component is updating fields like status or origin like that. But when I try to update the record type/owner the page is not refreshed after the update happens.

    Below is the component where I am updating the record type and Owner basically it is like transfering the case from one Dept to another


    Controller

    ({
    handleSubmit: function(component, event, helper) {
    component.set('v.loaded',true);
    event.preventDefault();
    var fields = event.getParam('fields');

    fields.OwnerId = 'xxxxxxxxxx'; // Owner is SF Support
    fields.RecordTypeId = 'YYYYYYYYYYYYY';
    fields.Status = 'New';
    console.log(JSON.stringify(fields));
    component.find('form').submit(fields);

    },

    handleError: function(component, event, helper) {
    component.set('v.loaded',false);
    const fieldErrors = event.getParam('output').fieldErrors;
    const separator = ' ';

    let errMessage = Object.values(fieldErrors).map(field => {
    return field.map(error => error.message).join(separator);
    }).join(separator);

    $A.get("e.force:showToast")
    .setParams({
    type: 'error',
    mode: 'pester',
    message: errMessage }).fire();
    },

    handleSuccess: function(component, event, helper) {
    component.set('v.loaded',false);
    $A.get("e.force:showToast")
    .setParams({
    type: 'success',
    message: 'Case passed to Salesforce Support!',
    mode: 'pester'
    })
    .fire();
    }
    })

    Though the Owner/RecordType is updated the page is not refreshed. I should be seeing the Owner as SF Support but it still shows the old owner Services but Toast is fired saying the case is passed.
    https://uploads.disquscdn.com/images/5ae676a8e80084238eea5f193fc132f7911d056a11f110343dd1b56ee55741bd.jpg
    But when do the full page refresh it shows up SF Support. Can you please help me what I am missing here

  • vinod

    Hey Hi Biswajeet i am getting Error in setParams.Could you once check it.

    • Add your component in any record page or in quick action and test.

      • vinod

        Thanks Bro It’s Working..