This component allows you to access methods for programmatically controlling a utility within the utility bar of a Lightning app. The utility bar is a footer that gives users quick access to frequently used tools and components. Each utility is a single-column Lightning page that includes a standard or custom Lightning component.
To access the methods, create an instance of the lightning:utilityBarAPI component inside of your utility and assign an aura:id attribute to it.
<lightning:utilityBarAPI aura:id="utilitybar"/>
Here is the lightning component
<aura:component implements="flexipage:availableForAllPageTypes" access="global" > <lightning:utilityBarAPI aura:id="UtilityBarEx" /> <lightning:button label="set Utility Label" onclick="{! c.setUtilityLabel }" /> <lightning:button label="Set Utility Icon" onclick="{! c.setUtilityIcon }" /> <lightning:button label="set Utility Highlighted" onclick="{! c.setUtilityHighlighted }" /> <lightning:button label="set Panel Height" onclick="{! c.setPanelHeight }" /> <lightning:button label="set Panel Width" onclick="{! c.setPanelWidth}" /> <lightning:button label="set PanelHeader Label" onclick="{! c.setPanelHeaderLabel }" /> <lightning:button label="set PanelHeader Icon" onclick="{! c.setPanelHeaderIcon }" /> </aura:component>
({ setUtilityIcon : function(component, event, helper) { var utilityAPI = component.find("UtilityBarEx"); utilityAPI.setUtilityIcon({icon: 'insert_tag_field'}); }, setUtilityLabel: function(component, event, helper) { var utilityAPI = component.find("UtilityBarEx"); utilityAPI.setUtilityLabel({label: 'Salesforce Utility '}); }, setUtilityHighlighted : function(component, event, helper) { var utilityAPI = component.find("UtilityBarEx"); utilityAPI.setUtilityHighlighted({highlighted:true}); }, setPanelWidth:function(component, event, helper) { var utilityAPI = component.find("UtilityBarEx"); utilityAPI.setPanelWidth({widthPX:120}); }, setPanelHeight:function(component, event, helper) { var utilityAPI = component.find("UtilityBarEx"); utilityAPI.setPanelHeight({heightPX :120}); }, setPanelHeaderLabel :function(component, event, helper) { var utilityAPI = component.find("UtilityBarEx"); utilityAPI.setPanelHeaderLabel({label :'Panel Header'}); }, setPanelHeaderIcon : function(component, event, helper) { var utilityAPI = component.find("UtilityBarEx"); utilityAPI.setPanelHeaderIcon({icon: 'insert_tag_field'}); }, })
Add Component to lightning App Utility Bar items
You can see Utility bar as shown below
On click on Set Utility highlighted which Makes a utility more prominent by giving it a different background color as shown below