Using Page Context in the Utility Bar API

In this blog, I am going to show how to use the utility bar API in page context which means we will be communicating the page records id to utility bar.In both Lightning console apps and standard navigation apps, utilities can respond to the context of the current page. Set implements=”force:hasRecordId” on a Lightning component used in the utility bar to access the recordId of the record a user is viewing.This simple component implements force:hasRecordId and listens for changes to the record being viewed. The following example we will be showing the key field on the case from the utility bay when the user opens the case from the console.

<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes"
                access="global">
    
    <aura:attribute name="cases" type="Case"/>
    <aura:attribute name="caseFields" type="String[]" default="Comments,Status,Subject,Priority,"/>
    <force:recordData aura:id="cases"
                      recordId="{!v.recordId}"
                      targetFields="{!v.caseFields}"
                      layoutType="FULL"/>
    <div class="slds-clearfix">
        <lightning:card iconName="standard:Case" title="{! 'Case Details for ' + v.recordId}">
            
            <lightning:recordForm aura:id="caseForm"
                                  recordId="{!v.recordId}"
                                  objectApiName="Case"
                                  fields="{!v.caseFields}"
                                  columns="1"
                                  mode="View"/>
            
        </lightning:card>
        
    </div>
</aura:component>

Now go to the App manager and all this utility bar to the console

  • From Setup, enter App in the Quick Find box, then select App Manager.
  • To edit the existing app, click Edit in the drop-down menu next to your Lightning App.
  • Click the Utility Items tab and add the above  created component to utility bar

After adding the utility bar to console you can see the utility bar will open case details when the user is open the case as shown below