{"id":2413,"date":"2017-03-28T10:47:25","date_gmt":"2017-03-28T10:47:25","guid":{"rendered":"http:\/\/www.greytrix.com\/blogs\/salesforce\/?p=2413"},"modified":"2025-06-12T09:14:30","modified_gmt":"2025-06-12T09:14:30","slug":"add-a-utility-bar-to-your-lightning-apps","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2017\/03\/28\/add-a-utility-bar-to-your-lightning-apps\/","title":{"rendered":"Add a Utility bar to your Lightning Apps"},"content":{"rendered":"<p style=\"text-align: justify;\">Salesforce Spring &#8217;17 has bought a bunch of handy features to the table, especially when it comes to Lightning. While the majority of these features are minor in detail and some might even go unnoticed, but they are all useful when it comes to providing the user a better experience. Once such small feature introduced by Salesforce in its Spring &#8217;17 release is giving the user to add a Utility bar to your Lightning App. This utility bar will consist of components that the user can access without leaving the current page.<\/p>\n<p style=\"text-align: justify;\">So, what is a Utility bar and what does this Utility bar do? A utility bar combines the features from Salesforce Classic&#8217;s home page components and the footer components from Salesforce Classic console apps. In this Utility bar, the user will have access to items that are available on the home page. The user instead of moving from one page to another can just click on the respective label or icon from the Utility bar and then a notification type box will open which will contain the details of the same.<\/p>\n<p style=\"text-align: justify;\">To add a Utility bar to your app is a very simple task. Here are detailed instructions on how to do so-<br \/>\n-&gt; From the \u201cSetup\u201d perform a quick search in the quick find box for \u201cApp Manager\u201d.<br \/>\n-&gt; Click on \u201cApp Manager\u201d option, the list of all your apps will be visible once you are redirected to the App Manager page.<br \/>\n-&gt; Select one of the Apps which has App type \u201cLightning\u201d.<br \/>\n-&gt; If all your apps have \u201cApp Type\u201d as \u201cClassic\u201d then you can convert\/upgrade an app to Lightning. Note- When an app is converted to Lightning no functionality of the previously available app is hindered.<br \/>\n-&gt; To convert an App into \u201cLightning\u201d, click on the dropdown that&#8217;s present at the very end of the app and click on \u201cUpgrade\u201d.<br \/>\n-&gt; Once you click on \u201cUpgrade\u201d option you&#8217;ll be asked to enter the \u201cApp Name\u201d and its Api\/Developer Name and click on \u201cUpgrade\u201d.<\/p>\n<div id=\"attachment_2414\" style=\"width: 605px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2017\/03\/1.-Upgrading-an-app-to-lightning.png\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" aria-describedby=\"caption-attachment-2414\" class=\"size-large wp-image-2414\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2017\/03\/1.-Upgrading-an-app-to-lightning-1024x419.png\" alt=\"Upgrading an app to lightning\" width=\"595\" height=\"243\" \/><\/a><p id=\"caption-attachment-2414\" class=\"wp-caption-text\">Upgrading an app to lightning<\/p><\/div>\n<div id=\"attachment_2415\" style=\"width: 874px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2017\/03\/2.-Upgrading-an-App.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" aria-describedby=\"caption-attachment-2415\" class=\"size-full wp-image-2415\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2017\/03\/2.-Upgrading-an-App.png\" alt=\"Upgrading an App\" width=\"864\" height=\"495\" \/><\/a><p id=\"caption-attachment-2415\" class=\"wp-caption-text\">Upgrading an App<\/p><\/div>\n<p style=\"text-align: justify;\">-&gt; Now that a new Lightning app is created again, click on the same drop down and click on \u201cEdit\u201d. The edit page for that App would open.<\/p>\n<div id=\"attachment_2416\" style=\"width: 605px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2017\/03\/3.-Editing-the-App.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" aria-describedby=\"caption-attachment-2416\" class=\"size-large wp-image-2416\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2017\/03\/3.-Editing-the-App-1024x577.png\" alt=\"Editing the App\" width=\"595\" height=\"335\" \/><\/a><p id=\"caption-attachment-2416\" class=\"wp-caption-text\">Editing the App<\/p><\/div>\n<p>-&gt; Click on \u201cUtility bar\u201d section.<br \/>\n-&gt; Under \u201cUtility Bar Items\u201d click on \u201cAdd\u201d for adding the items.<\/p>\n<div id=\"attachment_2417\" style=\"width: 844px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2017\/03\/4.-Available-Items-for-selection.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2417\" class=\"size-full wp-image-2417\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2017\/03\/4.-Available-Items-for-selection.png\" alt=\"Available Items for selection\" width=\"834\" height=\"656\" \/><\/a><p id=\"caption-attachment-2417\" class=\"wp-caption-text\">Available Items for selection<\/p><\/div>\n<p style=\"text-align: justify;\">-&gt; While adding the items you can add an icon mention the height and width. Once all the items are added save your changes and click on \u201cDone\u201d.<\/p>\n<div id=\"attachment_2418\" style=\"width: 817px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2017\/03\/5.-Adding-items-to-utility-bar.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2418\" class=\"size-full wp-image-2418\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2017\/03\/5.-Adding-items-to-utility-bar.png\" alt=\"Adding items to utility bar\" width=\"807\" height=\"557\" \/><\/a><p id=\"caption-attachment-2418\" class=\"wp-caption-text\">Adding items to utility bar<\/p><\/div>\n<p style=\"text-align: justify;\">-&gt; Now visit the app you&#8217;ll notice that the utility bar is present at the bottom of the page like a \u201cFooter\u201d.<\/p>\n<p style=\"text-align: justify;\">-&gt; Now if you click on one of the options from the utility bar a notification like window will pop displays the contents.<\/p>\n<div id=\"attachment_2419\" style=\"width: 916px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2017\/03\/6.-Utility-bar.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2419\" class=\"size-full wp-image-2419\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2017\/03\/6.-Utility-bar.png\" alt=\"Utility bar\" width=\"906\" height=\"627\" \/><\/a><p id=\"caption-attachment-2419\" class=\"wp-caption-text\">Utility bar<\/p><\/div>\n<p style=\"text-align: justify;\">The utility bar can be accessed from any page within that respective App. This helps to access objects and components that the user more often uses without leaving the current page which helps for multitasking. Checking chatter feeds, recent activities and other such activities can be done through the utility bar. For better visibility add only those components which are used by you more often.<\/p>\n<p><span style=\"font-size: Medium;\"><strong>About Us<\/strong><\/span><br \/>\n<a href=\"https:\/\/www.greytrix.com\/\">Greytrix<\/a>\u00a0as a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners across the globe. We offers Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that requires apex code incorporation into the Salesforce platform.<\/p>\n<p><a href=\"https:\/\/www.greytrix.com\/\">Greytrix<\/a>\u00a0has some unique solutions for Cloud CRM such as Salesforce integration with\u00a0<a href=\"https:\/\/www.greytrix.com\/product\/sage-x3\/gumu-x3-salesforce-integration\">Sage Enterprise Management (Sage X3<\/a>),\u00a0Sage Intacct, <a href=\"https:\/\/www.greytrix.com\/product\/sage-100-erp\/gumu-100-salesforce-integration\">Sage 100\u00a0<\/a>and\u00a0<a href=\"https:\/\/www.greytrix.com\/product\/sage-300-erp\/gumu-300-salesforce-integration\">Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM\u00a0<a href=\"https:\/\/www.greytrix.com\/product\/crm-development\/salesforce-com\">Salesforce customization and development services<\/a> along with services such as Salesforce <a href=\"https:\/\/www.greytrix.com\/product\/professional-services\/data-migration-services\">Data Migration<\/a>, <a href=\"https:\/\/www.greytrix.com\/product\/professional-services\/integrated-application-development\">Integrated App development<\/a>, <a href=\"https:\/\/www.greytrix.com\/product\/professional-services\/custom-development\">Custom App development<\/a> and <a href=\"https:\/\/www.greytrix.com\/product\/professional-services\/maintenance-support\">Technical Support<\/a> to business partners and end users.<\/p>\n<p>Greytrix GUMU&#x2122; integration for Sage ERP \u2013 Salesforce is a 5-star app listed on <a href=\"https:\/\/appexchange.salesforce.com\/listingDetail?listingId=a0N30000000psM5EAI\" target=\"_blank\" rel=\"noopener\">Salesforce AppExchange<\/a>.<\/p>\n<p>For more information, please contact us at\u00a0<a href=\"mailto:salesforce@greytrix.com\">salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n<p><span style=\"font-size: Medium;\"><strong>Related Posts<\/strong><\/span><\/p>\n<ul>\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2016\/12\/29\/addingcreating-fieldset-in-salesforce\/\" target=\"_blank\" rel=\"noopener\">Adding\/Creating Feildset in Salesforce.<\/a><\/li>\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2017\/03\/28\/translate-picklist-into-multiple-languages\/\" target=\"_blank\" rel=\"noopener\">Translate Picklist into Multiple Languages<\/a><\/li>\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2017\/03\/28\/access-frequently-used-salesforce-pages-reports-dashboards-and-others-by-using-shortcuts\/\" target=\"_blank\" rel=\"noopener\">Access frequently used Salesforce pages, Reports, Dashboards and others by using shortcuts<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Salesforce Spring &#8217;17 has bought a bunch of handy features to the table, especially when it comes to Lightning. While the majority of these features are minor in detail and some might even go unnoticed, but they are all useful when it comes to providing the user a better experience. Once such small feature introduced\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2017\/03\/28\/add-a-utility-bar-to-your-lightning-apps\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[206,207,367,392,448,513],"class_list":["post-2413","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-lightning","tag-lightning-basics","tag-salesforce","tag-salesforce-development","tag-sf-lightning","tag-utility-bar"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/2413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=2413"}],"version-history":[{"count":4,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/2413\/revisions"}],"predecessor-version":[{"id":10920,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/2413\/revisions\/10920"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=2413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=2413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=2413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}