Highlighting tab in service console using Aura
WorkspaceAPI
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.
Developers can dynamically open, close, and navigate between multiple tabs within the Salesforce workspace, allowing for custom navigation experiences and improved workflows.
The Workspace API provides control over tab behavior, such as programmatically opening records in subtabs or closing tabs, providing flexibility in managing user workflows.
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
});
}
}
Subscribe to my newsletter
Read articles from Akmal Ziyad directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by