Utility Bar Component in Salesforce

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, 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.

  • Create a lightning component (Contacts.cmp) which basically creates a template for your contact data using lightning:card component and acts as a container for your contact information.

  • 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.

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

  • Create a helper method (contactListHelper.js) to the above controller to do the heavy lifting. This is a recommended pattern to promote code reuse.

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.


Leave a Reply


We're not around right now. But you can send us an email and we'll get back to you, asap.


About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2020 Forcetalks. All Right Reserved.

Log in with your credentials


Forgot your details?