lightning:utilityBarAPI Example

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