Newer Version Available
setTabLabel() for Lightning Experience
Sets the label of the specified tab. This method works only in
Lightning console apps.
Arguments
| Name | Type | Description |
|---|---|---|
| tabId | string | The ID of the tab for which to set the label. |
| label | string | The label of the workspace tab or subtab. |
LWC Sample Code
This component has a function that sets a label on a specified tab. It uses the tabId property from getFocusedTabInfo().
1import { LightningElement, wire } from 'lwc';
2import {
3 IsConsoleNavigation,
4 getFocusedTabInfo,
5 setTabLabel
6} from 'lightning/platformWorkspaceApi';
7
8const TAB_LABEL = 'Awesome Label';
9
10export default class WorkspaceAPISetTabLabel extends LightningElement {
11 @wire(IsConsoleNavigation) isConsoleNavigation;
12
13 async setTabLabel() {
14 if (!this.isConsoleNavigation) {
15 return;
16 }
17 const { tabId } = await getFocusedTabInfo();
18 setTabLabel(tabId, TAB_LABEL);
19 }
20}This example is the workspaceAPISetTabLabel component from the lwc-recipes repo.
To make your component available for use in a Lightning console app, specify the lightning__AppPage target in the component’s configuration file.
Aura Components Sample Code
This component has a button that, when pressed, sets the label of the focused tab to “Focused Tab”.
Component code:
1<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
2 <lightning:workspaceAPI aura:id="workspace" />
3 <lightning:button label="Set Focused Tab with Label" onclick="{! c.setFocusedTabLabel }" />
4 </aura:component>Controller code:
1({
2 setFocusedTabLabel : function(component, event, helper) {
3 var workspaceAPI = component.find("workspace");
4 workspaceAPI.getFocusedTabInfo().then(function(response) {
5 var focusedTabId = response.tabId;
6 workspaceAPI.setTabLabel({
7 tabId: focusedTabId,
8 label: "Focused Tab"
9 });
10 })
11 .catch(function(error) {
12 console.log(error);
13 });
14 }
15})Response
This method returns a promise that, upon success, resolves
to a tabInfo object representing the modified tab.
A
tabInfo object is a JSON array of
information about a workspace tab, with nested arrays of information on each subtab.
This is the structure of a tabInfo
object.
1{
2 tabId: string,
3 url: string (URL),
4 pinned: boolean,
5 closeable: boolean,
6 title: string,
7 icon: string (SLDS iconKey),
8 iconAlt: string,
9 customTitle: string (optional),
10 customIcon: string (optional),
11 customIconAlt: string (optional),
12 highlighted: boolean,
13 pageReference: object,
14 isSubtab: boolean,
15 parentTabId: string,
16 subtabs: [
17 {
18 tabId: string,
19 url: string (URL),
20 pinned: boolean,
21 closeable: boolean,
22 title: string,
23 icon: string (SLDS iconKey),
24 iconAlt: string,
25 customTitle: string (optional),
26 customIcon: string (optional),
27 customIconAlt: string (optional),
28 highlighted: boolean,
29 pageReference: object,
30 isSubtab: boolean,
31 parentTabId: string,
32 focused: boolean,
33 recordId: string,
34 },
35 ...
36 ],
37 focused: boolean,
38 recordId: string
39}