You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Utility Bar

By: Venkata


Salesforce Launched a new feature called Utility Bar available during the Creation of the Lightning App in Lightning Experience. In Spring’17 release, The Utility Bar can be easily accessed from the areas such as Recent Items and Reports, Lightning Voices & Notes etc. We can find the utility bar under the related list page. We can add the Utility Bar to the Standard and Console Apps. Before this feature was introduced, we could add or customize this feature only using API.

Steps to Implement the Utility bar: 


Create a New Lightning App Using App Manager in the Lightning Experience.

Go to Setup—>App Manager—–>New Lightning App

utility bar


We must Create the App Details and Branding for the app. Here, we must enter the app name and description and we can able to set the Image and select the Highlight color for the Navigation Bar.

utility bar


After that, we must set the App Options that consists of two Styles.

1.Standard Navigation—It shows Items in a navigation bar at the top of the page.

2.Console Navigation (Beta Version)—It’s used to Open each record in a row workspace tab.

Note: Here, we saw Utility Bar in the Standard Navigation.

utility bar


After Finishing the Step3, we will navigate to Utility Bar Step, it’s used for quick access to the items like filter list, recent items, reports, etc. in the Docked Panel. In the Utility bar, we have to set the Utility Item properties, like setting the Label Name, Icon, Height and Width of the Panel. When the app is loaded, at the same time Utility Bar is also loaded in the Background if you enabled the Checkbox. Component Properties are also used in the utility bar. It’s used to select the options based on the added utility Item.

utility bar

Note: In Spring’17 release, if you want to set the Icon for Utility, click the link (Lightning Design System Utility Item). It will be redirected to new browser tab.

Update: In Summar’17 release, you can choose Icons for your Utilities directly. By default, we can use the fallback icon, but we can’t change the icon for some Utilities like Notes and History.

Steps to Implement the Utility Icon: 

  • Setting the default Icon for the Utility.

utility bar

  • Click the Choose Icon button for Utility Item.

utility bar

  • Here, we can change the existing icon with the new icon by selecting any one.

utility bar

For Example: If you want to set the Icon for Filter List

utility bar




After finishing the step 4, we should select all the objects we need to show in the navigation bar for this app. Choose the appropriate objects from the Available items and move it to the Selected Items.

utility bar


After completing the step 5, we must assign the App to User Profiles like System Administrator or other users. We should select the user profiles based on our requirement.