Salesforce Lightning Console JavaScript API

The Lightning Console JavaScript API and the Salesforce Console Integration Toolkit both interact with Salesforce console apps. We will use these API’s to check status of Omni-Channel Utility bar item.

Example Lightning Component is used to check Omni-Channel Utility once agent has accepted the work.

  • lightning:utilityBarAPI: The public API for the Utility Bar.
  • lightning:omniToolkitAPI: This component provides access to the API for the Omni-channel toolkit.
  • lightning:backgroundUtilityItem: This interface is used to indicate that the component is available to be instantiated at the app level without rendering any UI.
<!-- 
    /**
     * @name       : cmpMinimizeUtilityBarItem
     * @category   : Lightning Component
     * @description: Lightning Component is used to minimize Omni-Channel Utility once agent has accepted the work.
     * @author     : Accletron Consulting   
     * @copyright  : Copyright © 2019 Accletron Consulting; All Rights Reserved
     */
 -->
<aura:component implements="flexipage:availableForAllPageTypes,lightning:backgroundUtilityItem" access="global" >
    <lightning:utilityBarAPI aura:id="utilitybar" />
    <lightning:omniToolkitAPI aura:id="omniToolkit" /> 
    <aura:handler event="lightning:omniChannelWorkAccepted" action="{! c.onWorkAccepted }"/>
</aura:component>
/**
 * @name       : cmpFilteredRelatedListDTController.js
 * @category   : Lightning Component Controller
 * @description: Client side controller for displaying a filtered related list using lightning:datatable
 * @author     : Accletron Consulting 
 * @copyright  : Copyright © 2019 Accletron Consulting; All Rights Reserved
 */
({
    onWorkAccepted : function(component, event, helper) {
        let workItemId = event.getParam('workItemId');
        let workId = event.getParam('workId');
        console.log(workItemId);
        console.log(workId);

        let utilityBarAPI = component.find("utilitybar");
        utilityBarAPI.getAllUtilityInfo().then(function(response) {
            let utilityInfo = response[0];
            console.log(utilityInfo.id);
            console.log(utilityInfo.utilityLabel);
            console.log(utilityInfo.utilityVisible);
            console.log(JSON.stringify(utilityInfo));


      }).catch(function(error) {
        console.log(error);
      });        

    }
})

Response object that is returned by utilityBarAPI.getAllUtilityInfo(). We can use and modify various attributes of utility bar item using this approach

[
  {
    "id": "264:0",
    "isLoaded": true,
    "utilityLabel": "History",
    "utilityIcon": "clock",
    "utilityHighlighted": false,
    "utilityVisible": false,
    "utilityPoppedOut": false,
    "panelHeaderLabel": "History",
    "panelHeaderIcon": "clock",
    "panelHeight": 480,
    "panelWidth": 340
  },
  {
    "id": "273:0",
    "isLoaded": true,
    "utilityLabel": "Omni-Channel",
    "utilityIcon": "routing_offline",
    "utilityIconVariant": "error",
    "utilityHighlighted": false,
    "utilityVisible": true,
    "utilityPoppedOut": false,
    "panelHeaderLabel": "Omni-Channel",
    "panelHeaderIcon": "omni_channel",
    "panelHeight": 480,
    "panelWidth": 340
  }
]

1 Comment »