How to add Utility bar in a Salesforce lightning application

By | May 29, 2021

In this blog, we are going to learn about how to add utility bar in a lightning app. The component helps user, save navigation time, that they might have consumed while performing certain tasks. Firstly, it helps us to achieve it by just a few click without having to navigate to a different page. Secondly, utility bar can be fixed at the footer of a standard or console lightning app, which can be used by the user at their convenience to open additional utilities. Finally, additional utilities can be configured in any Salesforce App using the App Manager and can help save a lot of navigation times.

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.

Steps to Implement the Utility bar:

Step: 1 – Create a New Lightning App Using App Manager in the Lightning Experience. Go to Setup >>App Manager >>New Lightning App

New Lightning App
New Lightning App

Step: 2 – We must create the App Details and Branding for the app. Here, we must enter the app name and description and we are now also able to set the Image and select the Highlight color for the Navigation Bar.

App Details and Binding
App Details and Binding

Step: 3 – After that, we must set the App Options that consists of two Styles.

  • Standard Navigation: It shows Items in a navigation bar at the top of the page.
  • Console Navigation: It is used to open each record in a row workspace tab.

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

App Options
App Options

Step: 4 – After following the details mentioned in Step 3, we should be able to navigate to the Utility Bar Step. Above all, it can be used for quickly accessing the items that are available in the Docked Panel. In conclusion, in the Utility bar, we must set the Utility Item properties, like setting the Label Name, Icon, Height and Width of the Panel. Utility Bar loads in the Background, along with the app, if it was enabled in the setting. Utility bar also uses Component Properties, used for selecting the options based on the utility Item added to the bar.

  • Firstly, if you want change icon cancel feedback icon and click on the choose icon
  • In addition, we can add button and you will get new icon as shown in the below image.
  • Furthermore, we can change the existing icon with the new icon by selecting any one of the image/icons.
Additional Properties
Additional Properties

Step: 5 – 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.

Navigation Items
Navigation Items

Step: 6 – Finally, after completing the step 5, we must assign the App to User Profiles like System Administrator or other users. We should also be able to select the user profiles based on our requirement.

Assigning User Profiles
Assigning User Profiles

Output

Once we have finished the above steps, we can access the App in the Lightning Experience. This way we can see utility window in lightning app.

Final Output
Final Output

We hope you may find this blog resourceful and helpful. If you still have concerns and need more help, please contact us at salesforce@greytrix.com

About Us
Greytrix – a globally recognized and one of the oldest Sage Development Partner, as a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.

Greytrix has some unique solutions for Cloud CRM such as Salesforce Sage integration for Sage X3Sage 100 and Sage 300. We also offer best-in-class Cloud CRM Salesforce customization and development services along with services such as Salesforce Data MigrationIntegrated App developmentCustom App development and Technical Support to business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow.

Greytrix GUMU™ integration for Sage ERP – Salesforce is a 5-star rated app listed on Salesforce AppExchange.

For more information, please contact us at  salesforce@greytrix.com. We will be glad to assist you.

Related Posts