Receiving error when using UtilityBarAPI in Winter '18

Question

I'm trying to set a custom icon in a Utility Bar component using the new Utility Bar Component in Lightning.

TestComponent.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <force:utilityBarAPI aura:id="utilitybar" />
    <lightning:button label="Set Panel Header Icon" onclick="{! c.customizeUtilityPanel }" />
</aura:component>

TestComponentController.js

({
    customizeUtilityPanel : function(component, event, helper) {
        var utilityAPI = component.find("utilitybar");
        utilityAPI.getAllUtilityInfo().then(function(response) {
            var myUtilityInfo = response[0];

            utilityAPI.setPanelHeaderIcon({utilityId: myUtilityInfo.id, sldsKey: "clock"});
            utilityAPI.setUtilityIcon({utilityId: myUtilityInfo.id, sldsKey: "frozen"});

            utilityAPI.openUtility({utilityId: myUtilityInfo.id});
        });
    }
})

But I'm receiving following error in browser console:

aura_prod.js:922 null "Error: Invalid or missing icon undefined" (anonymous) @ aura_prod.js:922 aura_prod.js:849 Uncaught (in promise) Error: Invalid or missing icon undefined b @ aura_prod.js:849 Async Call d @ internal.js:1 b @ aura_prod.js:849 d.then @ internal.js:1

I'm using following Console Developer Guide and the new force:utilityBarAPI component introduced in Winter '18.

Does anyone have any idea why I'm unable to use the method to set an Icon in Utility bar component?

Answer 1

I got it to work, but honestly it was more of a trial and error method. I suspect we are running into a documentation bug of some kind. The documentation states setUtilityIcon({sldsKey, utilityId}) , but the error seems to indicate a key "icon" was missing. So i modified the code as follows and UtilityApi started to work as expected. Check the before and after images for the working scenario.

Controller:

    var utilityAPI = component.find("utilitybar");
    utilityAPI.getEnclosingUtilityId().then(function(response) {
        utilityAPI.setUtilityLabel({label : "Hello World", utilityId : response});
        utilityAPI.setUtilityIcon({icon : "insert_tag_field", utilityId : response });
    });

Before SetUtilityIcon()

After SetUtilityIcon()

We will be able to notice that the icon and label changed to "insert tag field" & "Hello World" respectively . And i guess callback is optional.