function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Bryan Leaman 6Bryan Leaman 6 

Cannot use utilityAPI in a component's init event

I was trying out a simple example utility bar component. The sample just has a button that uses the Utility API to change the utility bar component's label.

What I wanted to do was to change the button label when the component is first initialized, eventually based on data I would read from a configuration. So I declared a handler for the "init" event and attempted to set the label to a fixed value there:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <lightning:utilityBarAPI aura:id="UtilityBarEx" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:button label="set Utility Label" onclick="{! c.setUtilityLabel }" />
</aura:component>

and my controller's doInit method 
({
    doInit : function(component, event, helper) {
        var utilityAPI = component.find("UtilityBarEx");
        utilityAPI.setUtilityLabel({label: 'Salesforce Utility Label'});
    },
    setUtilityLabel: function(component, event, helper) {
        var utilityAPI = component.find("UtilityBarEx");
        utilityAPI.setUtilityLabel({label: 'Salesforce Utility Label'});
    },
})

This results in the erorr:
aura_prod.js:890 null "Error: Invalid or missing utilityId `false`"
(anonymous) @ aura_prod.js:890
aura_prod.js:812 Uncaught (in promise) Error: Invalid or missing utilityId `false`

What's worse, just for having attempted to use the Utility API in the init method appears to disable it permanently in my utility bar component, as the button starts logging the same error on the Chrome console and no longer functions.

But if I comment out the line of code in the doInit method ("utilityAPI.setUtilityLabel({label: 'Salesforce Utility Label'});"  then the button will work just fine.


 
Best Answer chosen by Bryan Leaman 6
Raj VakatiRaj Vakati
TRy like this .. i tested and its working for me without any issue on init .. you can remove hasUtilityBar aura:attribute ​​​​​​​ and juts kept for testing
 
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <!-- attributes -->
    <lightning:utilityBarAPI aura:id="UtilityBarEx" />
    <aura:attribute name="hasUtilityBar" type="Boolean" default="false" />
    
    <!-- event handlers -->
    <aura:handler name="init" value="{! this }" action="{! c.doInit }" />
    <lightning:button label="set Utility Label" onclick="{! c.setUtilityLabel }" />
    
    <p>Is there a utility bar? {! v.hasUtilityBar ? 'Yes' : 'No' }</p>
</aura:component>
 
({
    doInit: function (component, event, helper) {
        var utilityAPI = component.find('UtilityBarEx');
        
        utilityAPI.getAllUtilityInfo().then(function (response) {
            if (typeof response !== 'undefined') {
                component.set('v.hasUtilityBar', true);
                utilityAPI.setUtilityLabel({label: 'Salesforce Utility Label on Init '});
                
            } else {
                component.set('v.hasUtilityBar', false);
            }
        });
    },
    
    
    setUtilityLabel: function(component, event, helper) {
        var utilityAPI = component.find("UtilityBarEx");
        utilityAPI.setUtilityLabel({label: 'Salesforce Utility Label on button'});
    },
});

 

All Answers

Raj VakatiRaj Vakati
TRy like this .. i tested and its working for me without any issue on init .. you can remove hasUtilityBar aura:attribute ​​​​​​​ and juts kept for testing
 
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <!-- attributes -->
    <lightning:utilityBarAPI aura:id="UtilityBarEx" />
    <aura:attribute name="hasUtilityBar" type="Boolean" default="false" />
    
    <!-- event handlers -->
    <aura:handler name="init" value="{! this }" action="{! c.doInit }" />
    <lightning:button label="set Utility Label" onclick="{! c.setUtilityLabel }" />
    
    <p>Is there a utility bar? {! v.hasUtilityBar ? 'Yes' : 'No' }</p>
</aura:component>
 
({
    doInit: function (component, event, helper) {
        var utilityAPI = component.find('UtilityBarEx');
        
        utilityAPI.getAllUtilityInfo().then(function (response) {
            if (typeof response !== 'undefined') {
                component.set('v.hasUtilityBar', true);
                utilityAPI.setUtilityLabel({label: 'Salesforce Utility Label on Init '});
                
            } else {
                component.set('v.hasUtilityBar', false);
            }
        });
    },
    
    
    setUtilityLabel: function(component, event, helper) {
        var utilityAPI = component.find("UtilityBarEx");
        utilityAPI.setUtilityLabel({label: 'Salesforce Utility Label on button'});
    },
});

 
This was selected as the best answer
Bryan Leaman 6Bryan Leaman 6
Sorry I didn't see this sooner, but it works perfectly. Thank you!