Salesforce Console Developer Guide
jNote: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
setTabIcon() for Lightning Experience
Arguments
| Name | Type | Description |
|---|---|---|
| tabId | string | The ID of the tab for which to set the icon. |
| icon | string | An SLDS icon key in the format utility:iconName where utility is the icon category. See a full list of utility icons on the SLDS reference site. |
| iconAlt | string | Optional. Alternative text for the icon. |
LWC Sample Code
This component has a function that sets an icon on a specified tab. It uses the tabId property from getFocusedTabInfo().
1import { LightningElement, wire } from 'lwc';
2import {
3 IsConsoleNavigation,
4 getFocusedTabInfo,
5 setTabIcon
6} from 'lightning/platformWorkspaceApi';
7
8export default class SetTabIconExample extends LightningElement {
9 @wire(IsConsoleNavigation) isConsoleNavigation;
10
11 async setTabIcon() {
12 if (!this.isConsoleNavigation) {
13 return;
14 }
15
16 const { tabId } = await getFocusedTabInfo();
17 setTabIcon(tabId, 'utility:einstein', {
18 iconAlt: 'Account Insights'
19 });
20 }
21}For another example that uses setTabIcon(), see the workspaceAPISetTabIcon component in 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 icon of the focused tab to the SLDS “Approval” action icon.
Component code:
1<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
2 <lightning:workspaceAPI aura:id="workspace" />
3 <lightning:button label="Set Focused Tab Icon" onclick="{! c.setFocusedTabIcon }" />
4 </aura:component>Controller code:
1({
2 setFocusedTabIcon : function(component, event, helper) {
3 var workspaceAPI = component.find("workspace");
4 workspaceAPI.getFocusedTabInfo().then(function(response) {
5 var focusedTabId = response.tabId;
6 workspaceAPI.setTabIcon({
7 tabId: focusedTabId,
8 icon: "action:approval",
9 iconAlt: "Approval"
10 });
11 })
12 .catch(function(error) {
13 console.log(error);
14 });
15 }
16})Response
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}