The lightning/platformWorkspaceApi module provides LWC Workspace API methods to control workspace tabs and subtabs in a Lightning console app.
Below wire adapters are available for Lightning console apps.
EnclosingTabId() — Returns the ID of the enclosing tab.
IsConsoleNavigation() — Determines whether the app it’s used within uses console navigation.
ex :
import { LightningElement, wire } from 'lwc';
import { IsConsoleNavigation,EnclosingTabId } from 'lightning/platformWorkspaceApi';
// wire service to fetch if the component is inside a console app
@wire(IsConsoleNavigation)
isConsoleNavigation; //Returns true if console navigation is present, false otherwise.
@wire(EnclosingTabId)
enclosingTabId; //Returns the enclosing tab ID if the caller component is within a tab, or null otherwise.
openTab()—Opens a new workspace tab. If the tab is already open, the tab is focused.
import { LightningElement, wire } from 'lwc';
import { IsConsoleNavigation, openTab } from 'lightning/platformWorkspaceApi';
@wire(IsConsoleNavigation) isConsoleNavigation;
async openTab() {
// Ensure that we're in a console app
if (!this.isConsoleNavigation) {
return;
}
// Open contact list a new tab
await openTab({
pageReference: {
type: 'standard__objectPage',
attributes: {
objectApiName: 'Contact',
actionName: 'list'
}
},
focus: true,
label: 'Contacts List'
});
}
refreshTab()—Refreshes a workspace tab or a subtab specified by the tab ID.
import { LightningElement, wire } from 'lwc';
import {IsConsoleNavigation,getFocusedTabInfo,refreshTab } from 'lightning/platformWorkspaceApi';
@wire(IsConsoleNavigation) isConsoleNavigation;
async refreshTab() {
// Ensure that we're in a console app
if (!this.isConsoleNavigation) {
return;
}
// Refresh current tab
const { tabId } = await getFocusedTabInfo();
await refreshTab(tabId, {
includeAllSubtabs: true
});
}
focusTab()—Focuses a workspace tab or subtab.
getAllTabInfo()—Returns information about all open tabs.
import { LightningElement, wire } from 'lwc';
import {focusTab,IsConsoleNavigation,getFocusedTabInfo,getAllTabInfo } from 'lightning/platformWorkspaceApi';
@wire(IsConsoleNavigation) isConsoleNavigation;
async focusNextTab() {
// Ensure that we're in a console app
if (!this.isConsoleNavigation) {
return;
}
// Get current tab and figure out which tab is next
const { tabId } = await getFocusedTabInfo();
const allTabs = await getAllTabInfo();
const selectedTabIndex = allTabs.findIndex(
(possibleNextTab) => possibleNextTab.tabId === tabId
);
const nextTabId = allTabs[selectedTabIndex + 1].tabId;
// Focus on next tab
await focusTab(nextTabId);
}
closeTab()—Closes a workspace tab or subtab.
import { LightningElement, wire } from 'lwc';
import {closeTab,IsConsoleNavigation,getFocusedTabInfo } from 'lightning/platformWorkspaceApi';
@wire(IsConsoleNavigation) isConsoleNavigation;
async closeTab() {
// Ensure that we're in a console app
if (!this.isConsoleNavigation) {
return;
}
// Close current tab
const { tabId } = await getFocusedTabInfo();
await closeTab(tabId);
}
disableTabClose()—Prevents a workspace tab or subtab from closing.
getFocusedTabInfo()—Returns information about the focused workspace tab or subtab.
import { LightningElement, wire } from 'lwc';
import {disableTabClose,IsConsoleNavigation,getFocusedTabInfo } from 'lightning/platformWorkspaceApi';
@wire(IsConsoleNavigation) isConsoleNavigation;
async disableTabClose(event) {
// Ensure that we're in a console app
if (!this.isConsoleNavigation) {
return;
}
// Toggle the ability to close the tab
const close = event.detail.checked;
const { tabId } = await getFocusedTabInfo();
await disableTabClose(tabId, close);
}
openSubtab()—Opens a subtab within a workspace tab. If the subtab is already open, the subtab is focused.
import { LightningElement, wire } from 'lwc';
import {IsConsoleNavigation,EnclosingTabId,openSubtab } from 'lightning/platformWorkspaceApi';
@wire(IsConsoleNavigation) isConsoleNavigation;
@wire(EnclosingTabId) enclosingTabId;
findEnclosingTabAndOpenSubtab() {
// Ensure that we're in a console app and that we have a tab open
if (!this.isConsoleNavigation || !this.enclosingTabId) {
return;
}
// Open sub tab
openSubtab(this.enclosingTabId, {
pageReference: {
type: 'standard__objectPage',
attributes: {
objectApiName: 'Account',
actionName: 'list'
}
}
});
}
setTabHighlighted()—Highlights the specified tab with a different background color and a badge.
Tab highlights don’t persist after reloading a Lightning console app.
import { LightningElement, wire } from 'lwc';
import { IsConsoleNavigation,getFocusedTabInfo,setTabHighlighted } from 'lightning/platformWorkspaceApi';
@wire(IsConsoleNavigation) isConsoleNavigation;
async highlightTab(event) {
// Ensure that we're in a console app
if (!this.isConsoleNavigation) {
return;
}
// Toggle highlight for current tab
const highlighted = event.detail.checked;
const { tabId } = await getFocusedTabInfo();
setTabHighlighted(tabId, highlighted, {
pulse: true,
state: 'success'
});
}
setTabIcon()—Sets the icon and alternative text of the specified tab.
import { LightningElement, wire } from 'lwc';
import { IsConsoleNavigation,getFocusedTabInfo,setTabIcon } from 'lightning/platformWorkspaceApi';
const TAB_ICON = 'utility:animal_and_nature';
const TAB_ICON_ALT_TEXT = 'Animal and Nature';
@wire(IsConsoleNavigation) isConsoleNavigation;
async setTabIcon() {
// Ensure that we're in a console app
if (!this.isConsoleNavigation) {
return;
}
// Change current tab icon
const { tabId } = await getFocusedTabInfo();
setTabIcon(tabId, TAB_ICON, {
iconAlt: TAB_ICON_ALT_TEXT
});
}
setTabLabel()—Sets the label of the specified tab.
import { LightningElement, wire } from 'lwc';
import {IsConsoleNavigation,getFocusedTabInfo,setTabLabel} from 'lightning/platformWorkspaceApi';
const TAB_LABEL = 'Awesome Label';
@wire(IsConsoleNavigation) isConsoleNavigation;
async setTabLabel() {
// Ensure that we're in a console app
if (!this.isConsoleNavigation) {
return;
}
// Change current tab label
const { tabId } = await getFocusedTabInfo();
setTabLabel(tabId, TAB_LABEL);
}
getTabInfo()—Returns information about the specified tab.
import { LightningElement, wire } from 'lwc';
import { EnclosingTabId, getTabInfo } from 'lightning/platformWorkspaceApi';
@wire(EnclosingTabId) tabId;
isSubTab;
connectedCallback(event) {
if (this.tabId) {
getTabInfo(this.tabId).then((tabInfo) => {
this.isSubtab = tabInfo.isSubTab;
});
}
}
