3

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);
    });
}
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.

  • I appreciate the answer but its already on the utility bar – Calvin OKeefe Feb 4 at 15:47
  • Maybe as a workaround you can try getEnclosingUtilityId to see what the value is and then passing it in as utilityId – shmuels Feb 4 at 16:07
3

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');
        }
    });
},
  • much appreciated, shmuels answer sent me along the right path which is similar to what you've built out here – Calvin OKeefe Oct 22 at 18:25

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.