Utility Bar API Unable To Obtain Eclosing Utility Id

Question

I am working on an aura component for a utility bar, and specifically trying to add a handler via the onUtilityClick method of the <lightning:utilityBarAPI> component. My understanding based on the documentation is that I need to find the utilityId of the utility onto which I would like to add this handler. To do so, I tried calling the getEnclosingUtilityId() method, but it keeps returning false even though I am calling it from within a utility.

Returns the ID of the enclosing utility, or false if not within a utility.

When I open the below utility in the utility bar, I see a log like below:

utilityId false

I initially tried calling onUtilityClick within the promise callback, but since I am getting a false value anyway, I tried moving it out and not even specifying a utilityId value. That resulted in an error:

Uncaught (in promise) Error: Invalid or missing utilityId `false`

Why is my component, when calling this API from a utility, retreving a utilityId which indicates I am not within a utility?

---

Below is the basic structure of my code.

Component

<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:handler name="init" value="{!this}" action="{!c.demo}" />
    <lightning:utilityBarAPI aura:id="utilityBarAPI" />
    <lightning:button label="Demo" onclick="{!c.demo}" />
</aura:component>

Controller

({
    demo: function (component, event, helper) {
        const utilityBarAPI = component.find("utilityBarAPI");
        utilityBarAPI.getEnclosingUtilityId().then(function (utilityId) {
            console.log("utilityId", utilityId);
        });
        utilityBarAPI.onUtilityClick({
            eventHandler: function () {
                console.log("onUtilityClick");
            }
        });
    }
})

Answer 1

There is a know bug that makes all calls to lightning:utilityBarAPI fail when first performed in the context of the init handler.

There are two solutions to fix that:

1. obviously, don't use lightning:utilityBarAPI in the init handler :)
2. delay the call to lightning:utilityBarAPI methods with a setTimeout (works but risky because duration is unpredictable)

Updated code:

Component

<aura:component access="global" implements="lightning:utilityItem">
    <aura:handler name="init" value="{!this}" action="{!c.handleInit}" />

    <lightning:utilityBarAPI aura:id="utilityBarAPI" />
    <lightning:button label="Demo" onclick="{!c.handleDemoClick}" />
</aura:component>

Controller

({
    handleInit: function (component, event, helper) {
        setTimeout(function() {
            helper.callUtilityBarApi(component);
        }, 500);
    },

    handleDemoClick: function (component, event, helper) {
        helper.callUtilityBarApi(component);
    }
})

Helper

({
    callUtilityBarApi : function(component) {
        const utilityBarAPI = component.find("utilityBarAPI");
        utilityBarAPI.getEnclosingUtilityId().then(function (utilityId) {
            console.log("utilityId", utilityId);
        });

        utilityBarAPI.onUtilityClick({
            eventHandler: function () {
                console.log("onUtilityClick");
            }
        });
    }
})

Answer 2

Another solution is to call the method when component renders using handler on render event. This event is also fired when component re-renders so you will need to have a flag and wrap your code to execute it only one time.

Component

<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:handler name="render" value="{!this}" action="{!c.onRender}" />
    <lightning:utilityBarAPI aura:id="utilityBarAPI" />
</aura:component>

Controller

({
    onRender: function(component, event, helper) {
        const utilityBarAPI = component.find('utilityBarAPI');
        utilityBarAPI.getEnclosingUtilityId().then((utilityId) => {
            console.log(`utilityId: ${utilityId}`);
        });
        utilityBarAPI.onUtilityClick({
            eventHandler: () => {
                console.log('onUtilityClick');
            }
        });
    }
})