The Lightning Data Service components that we explored in the previous section can be combined with custom components to achieve various functionalities without writing excessive code. In the next section, we will cover some base components. With Lightning Data Service and base components, we can rapidly build components, to achieve various functionalities.

In this section, we will build a path component that changes based on the Lead status. Note that this component may be available out of the box in Salesforce, but our aim is to demonstrate how to leverage Lightning Data Service in custom components:

Let's use the data service force:recordData on the lead layout, in order to build this. The Lightning base components library provides a component to make this easier; the code snippet for it is as follows:

<aura:component>
    <Lightning:progressIndicator currentStep="3" type="path" variant="base">
        <Lightning:progressStep label="Contacted" value="1"/>
        <Lightning:progressStep label="Open" value="2"/>
        <Lightning:progressStep label="Unqualified" value="3"/>
        <Lightning:progressStep label="Nurturing" value="4"/>
        <Lightning:progressStep label="Closed" value="5"/>
    </Lightning:progressIndicator>
</aura:component>

Before you proceed, make sure that you have the same values in the Lead Status field, using the Salesforce standard interface. Navigate to Object Manager | Fields and Relationships |  Lead  | Status, and add and remove Picklist. The following screenshot shows the Status field Picklist values:

Our goal is to create a functional component that automatically moves to the next stage when the Lead status is changed in the Salesforce Detail View. We will use Lightning Data Service to detect when the user changes the status in the Lead, and will then update the attribute currentStep.

The component code for the LeadPath is as follows:

<aura:component implements="force:hasRecordId,flexipage:availableForRecordHome">

    <aura:attribute name="currentStep" type="String" />
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="recordError" type="String"/>

    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>

    <!--Add Lighnting Data Service Here-->

    <force:recordData aura:id="recordComponent"
      recordId="{!v.recordId}"
      layoutType="FULL"
      targetFields="{!v.record}"
      targetError="{!v.recordError}"
      recordUpdated="{!c.handleRecordUpdated}"
      mode = "VIEW"
      />

       <!-- 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>

    <div class="slds-p-around_x-small">
        <Lightning:progressIndicator currentStep="{!v.currentStep}" type="path" variant="base">
            <Lightning:progressStep label="Contacted" value="1"/>
            <Lightning:progressStep label="Open" value="2"/>
            <Lightning:progressStep label="Unqualified" value="3"/>
            <Lightning:progressStep label="Nurturing" value="4"/>
            <Lightning:progressStep label="Closed" value="5"/>
        </Lightning:progressIndicator> 
    </div>
   
</aura:component> 

Notice that we have the force:RecordData component, which gets the context data, including the status field. Also, we created an attribute named currentStep, for the current step.

Also, notice that we have a handler that invokes the controller function; the controller code invokes the helper to set the path on the custom Lightning component. We used the Lightning helper to keep the logic reusable. 

The LeadPathController.js code is as follows:

({
    onInit:function(component, event, helper) {
       
    },
    
    handleRecordUpdated : function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "LOADED") {
           // record is loaded (render other component which needs record data value)
            console.log("Record is loaded successfully.");
            helper.setPathValue(component, event);
        } else if(eventParams.changeType === "CHANGED") {
            // record is changed
            helper.setPathValue(component, event);
        } else if(eventParams.changeType === "REMOVED") {
            // record is deleted
        } else if(eventParams.changeType === "ERROR") {
            // there's an error while loading, saving, or deleting the record
        }
    }
})

The helper JavaScript code is as follows:

({
    setPathValue : function(component,event) {
        var mapStatus = {"Contacted" : "1" , "Open" : "2" , "Unqualified" : "3" ,"Nurturing" : "4", "Closed" : "5" };
        var status = component.get("v.record").Status;
        component.set("v.currentStep",mapStatus[status]);
    }
})

Notice that we used the JavaScript object to keep the mappings for the status on Lead and the value that the out-of-the-box path component uses.

Once we have these, we can drag and drop our custom component and change the path values that are automatically reflected in the lead status. The following screenshot shows the results:

Now that we have explored Lightning Data Service, we will move on to the Lightning base components. Base components provide pre-built components, making it a breeze to prototype business requirements. They provide various pre-built components, without having to build a lot of code from scratch.