Detecting utility bar in Lightning Component

Question

Is there a way I can detect from my lightning component whether the user is utilizing a utility bar or not?
It covers the bottom part of my application and I need to be able to resize the application so that the bottom edge of the application is still usable.

Answer 1

With the Lightning Console API available in Winter ’18, one can access information about the utility bar. Try the following:

Component markup

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <!-- attributes -->
    <lightning:utilityBarAPI aura:id="utilitybar" />
    <aura:attribute name="hasUtilityBar" type="Boolean" default="false" />

    <!-- event handlers -->
    <aura:handler name="init" value="{! this }" action="{! c.init }" />

    <p>Is there a utility bar? {! v.hasUtilityBar ? 'Yes' : 'No' }</p>
</aura:component>

Controller:

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

        utilityAPI.getAllUtilityInfo().then(function (response) {
            if (typeof response !== 'undefined') {
                component.set('v.hasUtilityBar', true);
            } else {
                component.set('v.hasUtilityBar', false);
            }
        });
    }
});

Reference the Lightning Console API documentation.

Answer 2

In response to the above answer, typeof response !== 'undefined' comes back as as an empty array even if the utility bar is not present, so I needed to use:

if (response && response.length > 0) {
    component.set('v.hasUtilityBar', true);
}

(I don't have enough reputation to comment on an answer.)