Wednesday, May 29, 2019

Create a record using LDS (force:recordData)

Here we taking a simple example to see how to use force:recordData to create the record.

Put the below component in account record detail page.

createcomp.cmp

 <aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global" >
    <aura:attribute name="newContactRecord" type="Object"/>
    <aura:attribute name="contactFieldsToQuery" type="Object"/>
    <aura:attribute name="recordError" type="String"/>
    <force:recordData aura:id="creatingContactRecordOnAccount"
                      
                      layoutType="FULL"
                      mode="EDIT"
                      targetRecord="{!v.newContactRecord}"
                      targetFields="{!v.contactFieldsToQuery}"
                      targetError="{!v.recordError}"
                      />
    
   
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
<!--We are using lightning card to display fields of account object-->

    <lightning:card iconName="action:new_contact" title="Create Contact">
        <div class="slds-p-horizontal--small">
            <lightning:input  label="First Name" value="{!v.contactFieldsToQuery.FirstName}"/>
            <lightning:input  label="Last Name" value="{!v.contactFieldsToQuery.LastName}"/>
  
            <br/>
            <lightning:button label="Create Contact" variant="brand" onclick="{!c.createContact}"/>
        </div>
    </lightning:card>
    <!-- Display errors if exists -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        
            {!v.recordError}
        
    </aura:if>

</aura:component>


createcompcontroller.js

({
    doInit: function(component, event, helper) {
        // getNewRecord loads a new record template that performs an insert when data is saved.
        component.find("creatingContactRecordOnAccount").getNewRecord(
            "Contact", // Specify Object (entityAPIName)
            null,      // recordTypeId
            false,     // skip cache?
            $A.getCallback(function() {
                var conRec = component.get("v.newContactRecord");
                var error = component.get("v.recordError");
                if(error || (conRec === null)) {
                    alert("Error in initializing template");
                }
                else {
                    alert("Template initialize succesfully");
                }
            })
        );
    },
 
 
 
    createContact: function(component, event, helper) {
        component.set("v.contactFieldsToQuery.AccountId", component.get("v.recordId"));
         component.find("creatingContactRecordOnAccount").saveRecord(function(saveResult) {
         
           // Handling state of response(SUCCESS,INCOMPLETE,ERROR)
         
             if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                alert("Changes saved successfully.");
            }
            else if (saveResult.state === "INCOMPLETE" ) {
                alert("Error in saving record");
            }
            else if (saveResult.state === "ERROR") {
               alert("Problem saving record, error:" +
                           JSON.stringify(saveResult.error));
            }
            else
            {
                 alert('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
            }
         
         });
         
         
         
     
    }

})

OUTPUT:


Create a record using LDS (force:recordData)

1 comment:

  1. Can you please provide the scrolling and copy paste option

    ReplyDelete