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 iconundefined
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?
Best Answer
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.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.