onUtilityClick() refresh component

Question

I am trying to build a utility bar item that is refreshed when the user closes and reopens it. I tried implementing the onUtilityClick() function in my init method but I'm getting the error 'Error: Invalid or missing ultiityId 'false''. The documentation has the user click a button to activate the event handler which doesn't fit my use case. I also checked out Bob Buzzards post and I don't understand where in the JS he is creating that event handler http://bobbuzzard.blogspot.com/2018/05/lightning-utility-bar-click-handling-in.html

AURA

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
<lightning:utilityBarAPI aura:id="utilitybar"/>

JS

 doInit: function (cmp, event, helper) {
    helper.registerUtilityClickHandler(cmp, event, helper);
}

JS HELPER

registerUtilityClickHandler: function(cmp, event, helper){
  var utilityBarAPI = cmp.find("utilitybar");
  var eventHandler = function(response){
        console.log('initHandler');
    };

    utilityBarAPI.onUtilityClick({ 
           eventHandler: eventHandler 
    }).then(function(result){
        debugger;
        //refresh logic will go here
        console.log('refresh');
        console.log(cmp.get('v.recordId'));
    }).catch(function(error){
        console.log(error);
    });
}

Answer 1

onUtilityClick takes another parameter utilityId which is only optional if you are in the context of a utility bar, (your component is added to a utility bar). Otherwise it doesn't know which utility bar you want to add the click handler to.

See here.

This article explains how you can add your component to a utility bar.

Answer 2

Hopefully you figured out this problem Calvin, I've been trying to work it out myself and found this, which helped solve it for me...

https://developer.salesforce.com/forums/?id=9062I000000g555QAA

Start with this promise, then call getEnclosingUtilityId, and inside that promise register the onUtilityClick event handler...

doInit : function(component){

    var eventHandler = function(response){
        console.log('Utility Clicked! eventHandler response: ' + response);
    };

    var utilityAPI = component.find("utilitybar");
    utilityAPI.getAllUtilityInfo().then(function(response){
        if(typeof response !=='undefined'){

            utilityAPI.getEnclosingUtilityId().then(function(utilityId){

                utilityAPI.onUtilityClick({ 
                    eventHandler: eventHandler 
                }).then(function(result){
                    console.log('onUtilityClick: eventHandler result: ' + result);
                }).catch(function(error){
                    console.log('onUtilityClick: eventHandler error: ' + error);
                });                    
            })
            .catch(function(error){
                console.log('do init: utilId error: ' + error);
            });
        }else{
            console.log('getAll Utility Info is undefined');
        }
    });
},