Highlighting tab in service console using Aura

Akmal ZiyadAkmal Ziyad
2 min read

WorkspaceAPI

  1. Salesforce's Workspace API offers methods and events to interact with and manage the workspace and user interface in Lightning Experience, enhancing the user experience and productivity.

  2. Developers can dynamically open, close, and navigate between multiple tabs within the Salesforce workspace, allowing for custom navigation experiences and improved workflows.

  3. The Workspace API provides control over tab behavior, such as programmatically opening records in subtabs or closing tabs, providing flexibility in managing user workflows.

  4. Developers can retrieve information about the current workspace, including active tabs, focused tabs, and open tabs, enabling the building of intelligent applications that respond to user context. The API also supports events for real-time updates and interactions within the Salesforce environment.

for more methods refer: https://developer.salesforce.com/docs/component-library/bundle/lightning:workspaceAPI/documentation

Highlight a tab using AURA

You can use this to highlight a tab based on any event it can be click or update from any event or LMS to check Lightning Message Channel example checkout -> https://akmalziyad.hashnode.dev/using-lms-the-fastest-way

Now let's dive into simple code

Component

<lightning:workspaceAPI aura:id="workspaceApi" />

Controller

let workspaceAPI = component.find("workspaceApi");

if (workspaceAPI) {
    workspaceAPI.getFocusedTabInfo()
    .then(function (res) {
      let focusedTabId = res.tabId;
      // this will highlight the current focused tab
      // if you want to highlight some other tab use getAllTabInfo method
      // and using the method you can get all tabs and subtabs
      workspaceAPI.setTabHighlighted({
          tabId: focusedTabId,
          highlighted: true,
          options: {
            pulse: true,
            state: "warning"
          }
      });     
    })
    .catch(function (error) {
        console.log("Error occured while getting the focused tab info", error);
    });
}

In case you want to stop highlighting a tab

Component

<lightning:workspaceAPI aura:id="workspaceApi" />
<aura:handler event="lightning:tabFocused" action="{! c.hanldeTabFocused }" />

Controller

hanldeTabFocused: function (cmp, event) {
    var currentTabId = event.getParam("currentTabId");
    var workspaceAPI = cmp.find("workspaceApi");

    if (workspaceAPI) {
      workspaceAPI.setTabHighlighted({
        tabId: currentTabId,
        highlighted: false
      });
    }
}
0
Subscribe to my newsletter

Read articles from Akmal Ziyad directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Akmal Ziyad
Akmal Ziyad