4

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");
            }
        });
    }
})
4
+50

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");
            }
        });
    }
})
8
  • It did fail even when I tried moving the call to button click. I'll try this out and get back to you on the results in my org. – Adrian Larson Jul 2 '19 at 15:03
  • Adding the setTimeout did not work for me. Did you get a value for utilityId? Also, it does not appear you passed this value into the onUtilityClick call. Did either work when you implement this utility? – Adrian Larson Jul 2 '19 at 18:00
  • Yes, it works consistently for me. utilityId is somehting like "281:0" and onUtilityClick is triggered as expected. Did you try with the exact code I provided? I realized that I used the lightning:utilityItem interface instead of flexipage:availableForAllPageTypes but I doubt that this could be an issue. – POZ Jul 2 '19 at 21:17
  • I suggest that you get rid of the init handler and just try it with the button click. – POZ Jul 2 '19 at 21:20
  • @AdrianLarson did you try with lightning:utilityItem and just the button click handler? – POZ Jul 4 '19 at 7:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.