Use Lightning Data Service to Handle Record-Level Changes

The ZBS Lightning pages are looking pretty awesome with the addition of our IndicatorBadges component, but we still need to step up its performance to match. Let's add Lightning Data Service into our IndicatorBadges component, and see how it can respond quickly to changes that affect record-level data.

Add Lightning Data Service

  1. In the Developer Console, add the following code to the IndicatorBadges component markup, on a new line just below the aura:handler:
    <force:recordData recordId="{!v.recordId}" layoutType="FULL" recordUpdated="{!c.doInit}"/>
  2. Your completed component should now look like this:
    <aura:component implements="force:hasRecordId,force:hasSObjectName,flexipage:availableForRecordHome" controller="INDICATOR_Controller" access="public">
      <aura:attribute name="badgeList" type="object[]"/>
      <aura:attribute name="objLabel" type="String" />
      <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
      <force:recordData recordId="{!v.recordId}" layoutType="FULL" recordUpdated="{!c.doInit}"/>
      <lightning:card iconName="standard:coaching" title="{! v.objLabel +' Indicators'}" class="slds-text-title_caps">
        <div class="slds-p-left_medium slds-p-right_medium">
          <lightning:layout verticalAlign="stretch" horizontalAlign="start" multipleRows="true" pullToBoundary="small">
            <aura:iteration items="{!v.badgeList}" var="thisBadge" aura:id="theList">
              <lightning:layoutItem size="2" padding="horizontal-small">
                <c:IndicatorBadge badge="{!thisBadge}"/>
              </lightning:layoutItem>
            </aura:iteration>
          </lightning:layout>
        </div>
      </lightning:card>
    </aura:component>
  3. Click File > Save
  4. In Salesforce, click on the Shows tab and select Console Dot Log Countdown from the list. Make note of the badges that display in the Show Indicators component.
  5. Edit the Active Syndications field to have a value of 3.
  6. Click Save and then refresh your browser.

Notice any changes on our record? Our component picked up the change in total active syndications, and displayed a notice that Console Dot Log Countdown is an audience favorite. (And it's about time, too!)

Code Highlights:

  • We use Lightning Data Service (with force:recordData) to make our component aware of changes to a record. We leverage the layoutType="FULL" attribute to be sure we're listening to all the fields a user can interact with and firing our doInit function if any changes occur.
  • Because we optimized our controller and helper to execute calls to the server only for values that haven't been set, when we fire doInit() based on record-level changes, we don't query again for the sObject label. We're just executing the logic to refresh our badges.

Whew! Give yourself a mental high five. By building with Custom Metadata, Apex, and Lightning components, you've empowered ZBS to make their Salesforce org more effective, more adaptable, and a whole lot more fun. And who doesn't like a bit of fun added to their day? Now go forth and Badge. All. The. Things!

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • 1 in 4 land a new job
  • 50% receive a promotion or raise
  • 80% learn new technologies that boost their resume
  • 66% say it increases productivity
Source: Trailblazer Community Impact Survey 2019