[SalesForce] How to detect minimize action on a utility bar item

PROBLEM STATEMENT

I have a 'Compose Email' component which is embedded in the docked utility bar. Please see below image for clarity. I am using lightning:fileUpload to allow multiple email attachments, which get automatically attached to the specified parent record. If the user attaches stuff and ultimately sends out the email, then we are golden. But what if the user does NOT send out the email? In that case I need to delete all the 'temporary' attachments from the parent record that were intended to be sent but never were.

enter image description here

WHAT I HAVE TRIED SO FAR

onUtilityClick() in lightning:utilityBarAPI

From my component init, I call the below method which finds the first utility item and implements a handler for onUtilityClick. It fires fine when I click on the actual utility bar item, BUT it does NOT fire when I minimize the utility by clicking on its header or the minimize button. I went through the utilityBarAPI methods here but none seem to be relevant for my goal. 

handleUtilityBar : function(component, event, helper) {
        var utilityAPI = component.find("utilitybar");

        utilityAPI.getAllUtilityInfo().then(function(response) {
            var utilityId = response[0].id;
            var onComposeEmailMinimize = function(response){
                console.log('--------------------> WORKS ON UTILITY ITEM CLICK, BUT NEEDS TO FIRE ON UTILITY MINIMIZE AS WELL');
            };

            utilityAPI.onUtilityClick({
                utilityId: utilityId,
                eventHandler: onComposeEmailMinimize 
            }).then(function(result){
                console.log('--------------------> result = ' + result);
            }).catch(function(error){
                console.log('--------------------> error = ' + error);
            });

        })
        .catch(function(error) {
            console.log('-------> utilityAPI ERROR: ' + error);
        });

    },

unrender in RENDERER

I have also tried my luck handling unrender in RENDERER, but no dice. 

unrender: function () {
    this.superUnrender();
    console.log('--------------------> UNRENDER CALLED');
}

Handle component destroy

As a measure of last resort, I also tried (a long shot) to see if destroy event is called upon minimize, but nope. 

<aura:handler name="destroy" value="{!this}" action="{!c.handleDestroy}"/>

QUESTION

How can we delete the 'orphan' ContentDocuments when:

  1. User minimizes 'Compose Email' utility, or
  2. Ends up refreshing the page, or
  3. Navigates away from the page they are on?

Best Answer

Here's how I solved this issue.

  1. Create a div in your component like this. The following div covers the minimize button at the top right of the utility popup. It intercepts the minimize click so that the click can be handled.
    <div style="background:transparent; width:30px; height:30px; position:absolute; top:6px; right:9px; cursor:pointer;" onclick="{!c.handleMinimizeClick}"></div>
  1. Add a method to your controller.js to do your stuff like this:
handleMinimizeClick : function(component, event, helper) {
   // my logic goes here
   let utility = component.find('utilityBar');
   utility.minimizeUtility();
}
Related Topic