Utility Bar Component in Salesforce Lightning

In this blog, I will be discussing the utility bar component that can be used to save a lot of time to perform certain tasks or utilities with just a click without having to navigate to a different page to do so. The utility bar is fixed at the footer of a standard or console lightning app, which users can access to open utilities as per their convenience. Utilities save a  lot of time and can be configured in any Salesforce App using the App Manager.

Since the utility bar is static at the footer of the app, the components in the utility bar are just a click away, which allows users to perform common tasks without having to navigate away from the page! In this blog, the Utility bar is simply used to get the contacts of a user but you can create whatever utility you want on your app which will be one click away. This feature will be implemented using Base Lightning Components, client-side Javascript controller, and a server-side Apex Controller.

Create an Apex controller (ContactController.apxc) and load your contacts.

This controller basically connects your lightning components with your Salesforce Data.

public with sharing class ContactController {
    @AuraEnabled
    public static List<Contact> getContacts() {
        List<Contact> contacts = 
        [SELECT Id, Name, MailingStreet, Phone, Email, LeadSource FROM Contact]; 
        return contacts;
    }
}

Create a Lightning Component (Contacts.cmp).

This basically creates a template for your contact data using lightning:card component and acts as a container for your contact information.

<aura:component>
    <aura:attribute name="contact" type="Contact" />    
        <lightning:card variant="Narrow" title="{!v.contact.Name}" 
                        iconName="standard:contact">
            <aura:set attribute="footer">
                <lightning:badge label="{!v.contact.Email}"/>
            </aura:set>
            <p class="slds-p-horizontal_small">
                {!v.contact.Phone}
            </p>
            <p class="slds-p-horizontal_small">
                {!v.contact.MailingStreet}
            </p>
        </lightning:card> 
</aura:component>

Create a Lightning Component (the contactList.cmp)  to store the list of contacts when you click the 'Click to Get Contacts' button.

The lightning:layout component is used to create grids to align your content in the view. To access the methods of the utility bar, add the lightning:utilityBarAPI component to your code.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="ContactController">    
    <!-- Dynamically load the list of contacts -->
    <aura:attribute name="contacts" type="Contact[]"/>
    <aura:attribute name="contactList" type="Contact[]"/>        
    <lightning:utilityBarAPI aura:id="UtilityBarEx" />    
    <br />    
    <lightning:layout>
        <lightning:layoutItem padding="horizontal-medium" >
            <lightning:button variant="brand" label="Click to get contacts" title="Brand action" onclick="{!c.handleClick }" />            
        </lightning:layoutItem>
    </lightning:layout>    
    <br />   
    <lightning:layout>
        <lightning:layoutItem padding="horizontal-medium" >           
            <!-- Iterate over the list of contacts and display them -->
            <aura:iteration var="contact" items="{!v.contacts}">
                <c:contacts contact="{!contact}"/>
            </aura:iteration>            
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

Create the javascript controller for this component ( contactListController.js) to make the above component dynamic.

({
    handleClick : function(component, event, helper) { 
        //highlight the component with a red dot when you load contacts
        var utilityAPI = component.find("UtilityBarEx");
        utilityAPI.setUtilityHighlighted({highlighted:true});        
        // Retrieve contacts during component initialization
        helper.loadContacts(component);        
    },    
})

Create a helper method (contactListHelper.js) to the above controller to do the heavy lifting.

This is a recommended pattern to promote code reuse.

({
    loadContacts : function(cmp) { 
        // Load all contact data        
        var action = cmp.get("c.getContacts");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set("v.contacts", response.getReturnValue());
                cmp.set("v.contactList", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
})

Now, that you have all the components and controller for the component, you need to add this utility component to your preferred Salesforce Lightning App. Go to Setup > Apps > App Manager > Select the lightning app you want to add this component to > Edit > Select Utility Items on the panel on your left > Click Add Utility Item > Select your Utility Item which in this case is contactList > Save. Now you have a Utility bar component at the footer of your screen for your particular app. In this blog, I used a simple example to get your contacts but this can be used to get whatever you need from Salesforce.