Workspace API in LWC

Introduction to Salesforce Workspace API

Salesforce is a powerful platform offering tools for managing customer relationships and
business processes. One of these tools is the Workspace API, which allows developers to
create and manage workspaces programmatically. But what exactly is a workspace in
Salesforce, and why would you want to use the Workspace API? With the Winter '24 release
of Salesforce, the Workspace API is now available in Lightning Web Components (LWC).
Previously, it was only available in Aura Components and VisualForce. This means you can now
manage your workspace tabs and subtabs in a Lightning console app using LWC.

What is a Workspace in Salesforce?

A workspace in Salesforce is like a personalized dashboard where users can manage their
tasks, view data, and collaborate with others. It's a customized environment that brings together
all the necessary tools and information a user needs to perform their job efficiently.

Why Use the Workspace API?

The Workspace API is useful because it allows developers to create, update, and manage these
workspaces through code. This can automate tasks, integrate with other systems, and
customize the user experience.

Using the Workspace API in LWC

To use the Workspace API in LWC, you need to import the lightning/platformWorkspaceApi
module. This module provides methods, wire adapters, and event-based APIs via Lightning
Message Service to manage your workspace.

Here are some of the key methods available in the LWC Workspace API:

● closeTab(): Closes a workspace tab or subtab.

● disableTabClose(): Prevents a workspace tab or subtab from closing.
● focusTab(): Focuses on a workspace tab or subtab.
● getAllTabInfo(): Returns information about all open tabs.
● getFocusedTabInfo(): Returns information about the focused workspace tab or subtab.
● getTabInfo(): Returns information about a specific tab.
● openSubtab(): Opens a subtab within a workspace tab. If the subtab is already open, it
focuses on it.
● openTab(): Opens a new workspace tab. If the tab is already open, it focuses on it.
● refreshTab(): Refreshes a workspace tab or subtab specified by the tab ID.

Note: Lightning Web Security must be enabled in your Salesforce org because Lightning Locker
doesn't support the LWC Workspace API.

Piyush Aneja | Workspace API in LWC

1
Determine if a Component is in a Lightning Console App
In Salesforce, it's often necessary to determine whether a component is being used within a
Lightning console app. This can be useful for tailoring the behavior of your components based
on the environment they are in.

Why Check if a Component is in a Lightning Console App?

Knowing whether your component is running in a Lightning console app can help you:

● Customize user experiences specifically for console users.

● Enable or disable certain features based on the app environment.
● Improve performance by loading resources conditionally.

How to Check if a Component is in a Lightning Console App

With the Winter '24 release, you can easily check if your component is in a Lightning console
app using the Workspace API in Lightning Web Components (LWC). Here’s a step-by-step
guide:

1. Import the Required Modules

2. Use the isConsoleNavigation

Example Code
Below is an example of how you can determine if a component is in a Lightning console app:

import { LightningElement, wire } from 'lwc';

import { IsConsoleNavigation } from 'lightning/platformWorkspaceApi';

export default class CheckConsoleApp extends LightningElement {

// Wire service to fetch if the component is inside a Console App
@wire(IsConsoleNavigation)
isConsoleNavigation;
}

<template>
<!-- Lightning card to display the result -->
<lightning-card title="Is console app?">
<div class="slds-p-around_medium">
<!-- Display whether the component is inside a Console App or
not -->
<p>I am inside a Console App - {isConsoleNavigation}</p>
</div>
</lightning-card>

Piyush Aneja | Workspace API in LWC

2
 </template>

Result -

Conclusion
By using the Workspace API in LWC, you can easily determine if your component is within a
Lightning console app. This allows you to tailor your component's behavior and user experience
based on the environment. This small but powerful check can make your components smarter
and more adaptable to different user contexts.

Piyush Aneja | Workspace API in LWC

3
Opening a New Workspace Tab in a Lightning Console App
In Salesforce Lightning, opening new tabs within a Lightning console app is a common
requirement. Whether it's for accessing different records or enhancing productivity, the
Workspace API in Lightning Web Components (LWC) makes this task simple and efficient.

Why Open New Workspace Tabs?

● Enhanced Navigation: Quickly switch between different records or views.
● Improved Productivity: Keep multiple records or tasks open simultaneously.
● Custom Workflows: Build tailored user experiences within the console app.

How to Use the Workspace API to Open a New Tab

With the Workspace API, you can easily open a new workspace tab in a Lightning console app.
Here’s a step-by-step guide:

1. Import the Required Modules

2. Use the openTab Method

Example Code
Below is an example of how you can open a subtab in a Lightning console app using LWC:
import { LightningElement, wire } from 'lwc';
import { IsConsoleNavigation, openTab } from
'lightning/platformWorkspaceApi';

export default class OpenNewTab extends LightningElement {

// Wire adapter to check if the component is in a Lightning console app
@wire(IsConsoleNavigation)
isConsoleNavigation;

// Method to open a new tab with a specific recordId

openTabRecordId() {
// Check if the component is in a Lightning console app
if (this.isConsoleNavigation) {
// Open a new tab with a specific recordId
openTab({
recordId: '0015j00000VKFIXAA5', // Replace with actual
recordId
label: 'Piyush Aneja',
focus: true
}).catch(error => {
// Handle error if opening tab fails
console.error("Error in opening tab", error);
});

Piyush Aneja | Workspace API in LWC

4
 }
}

// Method to open a new tab with a specific URL

openTabUrl() {
// Check if the component is in a Lightning console app
if (this.isConsoleNavigation) {
// Open a new tab with a specific URL
openTab({
url: '/lightning/r/Account/0015j00000VKFIXAA5/view', //
Replace with actual URL
label: 'Piyush Aneja URL',
focus: true
}).catch(error => {
// Handle error if opening tab fails
console.error("Error in opening tab", error);
});
}
}

// Method to open a new tab with a specific pageReference

openTabPageRef() {
// Check if the component is in a Lightning console app
if (this.isConsoleNavigation) {
// Open a new tab with a specific pageReference
openTab({
pageReference: {
type: 'standard__objectPage',
attributes: {
objectApiName: 'Account',
actionName: 'list'
}
},
label: 'Accounts list',
focus: true
}).catch(error => {
// Handle error if opening tab fails
console.error("Error in opening tab", error);
});
}
}
}

Piyush Aneja | Workspace API in LWC

5
 <template>
<lightning-card title="Open New Tab">
<div class="slds-p-around_medium">
<!-- Button to open tab using recordId -->
<lightning-button
label="Open Tab using recordId"
onclick={openTabRecordId}>
</lightning-button>

<!-- Button to open tab using URL -->

<lightning-button
label="Open Tab using URL"
onclick={openTabUrl}>
</lightning-button>

<!-- Button to open tab using Page Reference -->

<lightning-button
label="Open Tab using Page Reference"
onclick={openTabPageRef}>
</lightning-button>
</div>
</lightning-card>
</template>

Result -

Piyush Aneja | Workspace API in LWC

6
Piyush Aneja | Workspace API in LWC
7
Conclusion
By Implementing the Workspace API in Lightning Web Components, you can effortlessly open
new workspace tabs within a Lightning console app. Whether it's for navigating to different
records or optimizing workflows, this functionality enhances the user experience and
productivity within the Salesforce environment. With just a few lines of code, you can empower
users to seamlessly navigate and manage their tasks within the console app.

Opening a Subtab in a Lightning Console App

In Salesforce Lightning, opening sub tabs within a Lightning console app is a common
requirement for navigating related records or views. The Workspace API in Lightning Web
Components (LWC) provides a straightforward method to accomplish this task efficiently.

Why Open Subtabs?

● Streamlined Navigation: Access related records or views within the same workspace.
● Contextual Workflows: Maintain focus on a primary record while referencing related
information.
● Enhanced User Experience: Provide a seamless and intuitive interface for users.

How to Use the Workspace API to Open a Subtab

With the Workspace API, you can easily open a subtab within a Lightning console app. Here’s
how to do it:

1. Import the Required Modules

2. Use the openSubtab Method

Example Code
Below is an example of how you can open a subtab in a Lightning console app using LWC:

import { LightningElement, wire } from 'lwc';

import { IsConsoleNavigation, openSubtab, EnclosingTabId } from
'lightning/platformWorkspaceApi';

export default class OpenSubTab extends LightningElement {

// Wire service to check if the component is inside a Console App
@wire(IsConsoleNavigation)
isConsoleNavigation;

// Wire service to get the ID of the enclosing tab

@wire(EnclosingTabId)
parentTabId;

// Method to open a subtab with a specific record ID

Piyush Aneja | Workspace API in LWC

8
 openTabRecordId() {
if (this.isConsoleNavigation) {
openSubtab(this.parentTabId, {
recordId: '0015j00000VKFIXAA5', // Record ID to open in the
subtab
label: 'Piyush', // Label for the subtab
focus: true // Whether to focus on the newly opened subtab
}).catch(error => {
console.error("Error in opening tab", error); // Log any
errors if opening subtab fails
});
}
}

// Method to open a subtab with a specific URL

openTabUrl() {
if (this.isConsoleNavigation) {
openSubtab(this.parentTabId, {
url: '/lightning/r/Account/0015j00000VKFIXAA5/view', // URL
to open in the subtab
label: 'Piyush Aneja', // Label for the subtab
focus: true // Whether to focus on the newly opened subtab
}).catch(error => {
console.error("Error in opening tab", error); // Log any
errors if opening subtab fails
});
}
}

// Method to open a subtab with a specific page reference

openTabPageRef() {
if (this.isConsoleNavigation) {
openSubtab(this.parentTabId, {
pageReference: {
type: 'standard__objectPage', // Type of the page
reference
attributes: {
objectApiName: 'Account', // API name of the object
for the page reference
actionName: 'list' // Action to perform on the
object (list, view, edit, etc.)
}
},

Piyush Aneja | Workspace API in LWC

9
 label: 'Accounts list', // Label for the subtab
focus: true // Whether to focus on the newly opened subtab
}).catch(error => {
console.error("Error in opening tab", error); // Log any
errors if opening subtab fails
});
}
}
}

<template>
<!-- Lightning card to contain the buttons for opening new subtabs -->
<lightning-card title="Open New SubTab">
<!-- Padding around the content -->
<div class="slds-p-around_medium">
<!-- Button to open a subtab using recordId -->
<lightning-button
label="Open SubTab using recordId"
onclick={openTabRecordId}>
</lightning-button>

<!-- Button to open a subtab using URL -->

<lightning-button
label="Open SubTab using url"
onclick={openTabUrl}>
</lightning-button>

<!-- Button to open a subtab using Page Reference -->

<lightning-button
label="Open SubTab using Page Reference"
onclick={openTabPageRef}>
</lightning-button>
</div>
</lightning-card>
</template>

Result-

Piyush Aneja | Workspace API in LWC

10
Conclusion
By utilizing the Workspace API in Lightning Web Components, you can seamlessly open sub
tabs within a Lightning console app. Whether it's for navigating related records or enhancing
contextual workflows, this functionality provides users with an intuitive and efficient interface for
managing their tasks and data. With just a few lines of code, you can empower users to
navigate through complex data structures and maintain focus on their primary objectives within
the console app.

Closing a Tab in a Lightning Console App

In Salesforce Lightning, closing tabs within a Lightning console app is a common requirement
for managing workspace clutter and focusing on relevant information. The Workspace API in
Lightning Web Components (LWC) provides a convenient method to accomplish this task
seamlessly.

Piyush Aneja | Workspace API in LWC

11
Why Close Tabs?
● Workspace Organization: Keep the workspace tidy by closing unnecessary tabs.
● Focused Workflows: Maintain focus on relevant tasks and records.
● Improved Performance: Reduce resource consumption by closing unused tabs.

How to Use the Workspace API to Close a Tab

With the Workspace API, you can easily close tabs within a Lightning console app. Here’s how
to do it:

1. Import the Required Modules

2. Use the closeTab Method

Example Code
Below is an example of how you can close a tab in a Lightning console app using LWC:

import { LightningElement, wire } from 'lwc';

import { IsConsoleNavigation, closeTab, getFocusedTabInfo } from
'lightning/platformWorkspaceApi';

export default class CloseTab extends LightningElement {

// Wire service to check if the component is inside a Console App
@wire(IsConsoleNavigation)
isConsoleNavigation;

// Method to close the currently focused tab

closeHandler() {
if (this.isConsoleNavigation) {
// Get information about the currently focused tab
getFocusedTabInfo().then(tabInfo => {
console.log("tabInfo", tabInfo); // Log tab information to
the console
// Close the tab using its ID
closeTab(tabInfo.tabId);
}).catch(error => {
console.error(error); // Log any errors if retrieving tab
information fails
});
}
}

// Asynchronous method to close the currently focused tab

async closeAsyncHandler() {
if (this.isConsoleNavigation) {

Piyush Aneja | Workspace API in LWC

12
 try {
// Get information about the currently focused tab
const { tabId } = await getFocusedTabInfo();
// Close the tab using its ID
await closeTab(tabId);
} catch (error) {
console.error(error); // Log any errors if closing the tab
fails
}
}
}
}

<template>
<!-- Lightning card to contain the buttons for closing tabs -->
<lightning-card title="Close Tab">
<!-- Padding around the content -->
<div class="slds-p-around_medium">
<!-- Button to close tab -->
<lightning-button
label="Close Tab"
onclick={closeHandler}>
</lightning-button>

<!-- Button to close tab with async -->

<lightning-button
label="Close Tab with async"
onclick={closeAsyncHandler}>
</lightning-button>
</div>
</lightning-card>
</template>

Result-

Piyush Aneja | Workspace API in LWC

13
Conclusion
By Implementing the Workspace API in Lightning Web Components, you can effortlessly close
tabs within a Lightning console app. Whether it's for managing workspace clutter, focusing on
relevant tasks, or optimizing performance, this functionality provides users with a streamlined
and efficient interface for workspace management. With just a few lines of code, you can
empower users to customize their workspace and tailor their experience to suit their specific
needs within the console app.

Closing a Subtab in a Lightning Console App

In Salesforce Lightning, closing sub tabs within a Lightning console app is crucial for managing
workspace organization and focusing on pertinent information. The Workspace API in Lightning
Web Components (LWC) equips developers with the capability to seamlessly close subtabs,
enhancing user experience and productivity.

Why Close Subtabs?

● Workspace Management: Maintain a clutter-free workspace by closing unnecessary
subtabs.
● Task Focus: Streamline workflows by closing subtabs related to completed or irrelevant
tasks.
● Resource Optimization: Improve performance by closing unused subtabs, conserving
system resources.

How to Use the Workspace API to Close a Subtab

With the Workspace API, closing a subtab within a Lightning console app is straightforward.
Here's how you can do it:

1. Import the Required Modules

2. Use the closeTab Method

Piyush Aneja | Workspace API in LWC

14
Example Code
Below is an example demonstrating how to close a subtab in a Lightning console app using
LWC:

import { LightningElement, wire } from 'lwc';

import { IsConsoleNavigation, getFocusedTabInfo, closeTab } from
'lightning/platformWorkspaceApi';

export default class CloseSubtabs extends LightningElement {

// Wire service to check if the component is inside a Console App
@wire(IsConsoleNavigation)
isConsoleNavigation;

// Method to close all subtabs

async closeAllSubtabsHandler() {
if (this.isConsoleNavigation) {
// Get information about the currently focused tab
const tabInfo = await getFocusedTabInfo();
if (tabInfo.subtabs) {
// Loop through each subtab and close it
tabInfo.subtabs.forEach(async tab => {
await closeTab(tab.tabId);
});
}
}
}

// Method to close all sub tabs with Opportunity icon

async closeAllOppSubtabs() {
if (this.isConsoleNavigation) {
// Get information about the currently focused tab
const tabInfo = await getFocusedTabInfo();
if (tabInfo.subtabs) {
// Loop through each subtab
tabInfo.subtabs.forEach(async tab => {
// Check if the subtab has Opportunity icon
if (tab.iconAlt === "Opportunity") {
// Close the subtab
await closeTab(tab.tabId);
}
});
}
}

Piyush Aneja | Workspace API in LWC

15
 }
}

<template>
<!-- Lightning card to contain the buttons for closing subtabs -->
<lightning-card title="Close Subtabs">
<!-- Padding around the content -->
<div class="slds-p-around_medium">
<!-- Button to close all subtabs -->
<lightning-button
label="Close All Subtabs"
onclick={closeAllSubtabsHandler}>
</lightning-button>

<!-- Button to close all sub tabs with Opportunity -->

<lightning-button
label="Close All Opportunity"
onclick={closeAllOppSubtabs}>
</lightning-button>
</div>
</lightning-card>
</template>

Result -

Conclusion
By Implementing the Workspace API in Lightning Web Components, developers can seamlessly
close sub tabs within a Lightning console app. Whether it's for maintaining workspace
organization, focusing on relevant tasks, or optimizing performance, this functionality empowers
Piyush Aneja | Workspace API in LWC
16
users to tailor their workspace and enhance productivity. With just a few lines of code, you can
provide users with a streamlined and efficient interface for managing their tasks and data within
the console app.

Refreshing Tabs in a Lightning Console App

In Salesforce Lightning, refreshing tabs within a Lightning console app can be essential for
ensuring that users have access to the most up-to-date information. The Workspace API in
Lightning Web Components (LWC) provides developers with the capability to refresh tabs
effortlessly, enhancing user experience and data accuracy.

Why Refresh Tabs?

● Data Accuracy: Ensure that users have access to the latest information by refreshing
tabs.
● Improved User Experience: Enhance user satisfaction by providing real-time updates
without requiring manual intervention.
● Efficient Workflows: Streamline processes by automatically updating information within
tabs.

How to Use the Workspace API to Refresh Tabs

With the Workspace API, refreshing tabs within a Lightning console app is straightforward.
Here's how you can do it:

1. Import the Required Modules

2. Use the refreshTab Method

Example Code
Below is an example demonstrating how to refresh a tab in a Lightning console app using LWC:

import { LightningElement, wire } from 'lwc';

import { IsConsoleNavigation, refreshTab, getFocusedTabInfo } from
'lightning/platformWorkspaceApi';

export default class RefreshFocusedTab extends LightningElement {

// Wire service to check if the component is inside a Console App
@wire(IsConsoleNavigation)
isConsoleApp;

// Method to refresh the currently focused tab

async refreshTabHandler() {
if (this.isConsoleApp) {
// Get information about the currently focused tab

Piyush Aneja | Workspace API in LWC

17
 const { tabId } = await getFocusedTabInfo();
// Refresh the focused tab and include all its subtabs
await refreshTab(tabId, {
includeAllSubtabs: true
});
}
}
}

<template>
<!-- Lightning card to contain the button for refreshing the focused
tab -->
<lightning-card title="Refresh Focused Tab">
<!-- Padding around the content -->
<div class="slds-p-around_medium">
<!-- Button to refresh the currently focused tab -->
<lightning-button
label="Refresh tab"
onclick={refreshTabHandler}>
</lightning-button>
</div>
</lightning-card>
</template>

Result:

Conclusion

Piyush Aneja | Workspace API in LWC

18
By Implementing the Workspace API in Lightning Web Components, developers can seamlessly
refresh tabs within a Lightning console app. Whether it's for ensuring data accuracy, enhancing
user experience, or optimizing workflows, this functionality empowers users to access real-time
updates effortlessly. With just a few lines of code, you can provide users with a streamlined and
efficient interface for managing their tasks and data within the console app.

Setting a Tab Label in a Lightning Console App

In Salesforce Lightning, setting custom tab labels within a Lightning console app can
significantly improve user experience by providing clear and contextual information. The
Workspace API in Lightning Web Components (LWC) allows developers to set tab labels
dynamically, enhancing the usability and clarity of the interface.

Why Set Tab Labels?

● Improved Usability: Clearly labeled tabs help users navigate and identify content more
easily.
● Contextual Information: Custom tab labels can provide immediate context about the tab’s
content.
● Enhanced User Experience: Personalized labels can make the interface more intuitive
and user-friendly.

How to Use the Workspace API to Set Tab Labels

With the Workspace API, setting tab labels within a Lightning console app is straightforward.
Here's how you can do it:

1. Import the Required Modules

2. Use the setTabLabel Method

Example Code
Below is an example demonstrating how to set a tab label in a Lightning console app using
LWC:

import { LightningElement, wire } from 'lwc';

import { IsConsoleNavigation, getFocusedTabInfo, setTabLabel } from
'lightning/platformWorkspaceApi';

export default class SetLabelOfTab extends LightningElement {

// Wire service to check if the component is inside a Console App
@wire(IsConsoleNavigation)
isConsoleApp;

Piyush Aneja | Workspace API in LWC

19
 // Method to set the label of the currently focused tab
async setLabelHandler() {
if (this.isConsoleApp) {
// Get information about the currently focused tab
const { tabId } = await getFocusedTabInfo();
// Set the label of the focused tab
setTabLabel(tabId, 'Label Set Done. Yeah!!');
}
}
}

<template>
<!-- Lightning card to contain the button for setting the label of the
focused tab -->
<lightning-card title="Set Label">
<!-- Padding around the content -->
<div class="slds-p-around_medium">
<!-- Button to set the label of the currently focused tab -->
<lightning-button
label="Click to set Label"
onclick={setLabelHandler}>
</lightning-button>
</div>
</lightning-card>
</template>

Result:

Piyush Aneja | Workspace API in LWC

20
Conclusion
By Implementing the Workspace API in Lightning Web Components, developers can
dynamically set tab labels within a Lightning console app. Whether it's for improving usability,
providing contextual information, or enhancing the overall user experience, this functionality
allows for a more intuitive and efficient interface. With just a few lines of code, you can
customize tab labels to better meet the needs of your users and enhance their interaction with
the console app.

Focusing a Tab in a Lightning Console App

In Salesforce Lightning, focusing a specific tab within a Lightning console app can help users
quickly switch their attention to important information. The Workspace API in Lightning Web
Components (LWC) provides the functionality to focus a tab programmatically, enhancing the
user experience by enabling smooth navigation.

Why Focus Tabs?

● Quick Navigation: Instantly bring a specific tab into focus, helping users switch tasks
efficiently.
● Improved User Experience: Reduce the time users spend searching for the right tab.
● Streamlined Workflows: Ensure users can promptly access the most relevant information
or tasks.

How to Use the Workspace API to Focus Tabs

With the Workspace API, focusing a tab within a Lightning console app is straightforward.
Here's how you can do it:

1. Import the Required Modules

2. Use the focusTab Method

Example Code

Piyush Aneja | Workspace API in LWC

21
Below is an example demonstrating how to focus a tab in a Lightning console app using LWC:
import { LightningElement, wire } from 'lwc';
import { IsConsoleNavigation, getAllTabInfo, focusTab, getFocusedTabInfo }
from 'lightning/platformWorkspaceApi';

export default class FocusTab extends LightningElement {

// Wire service to check if the component is inside a Console App
@wire(IsConsoleNavigation)
isConsoleApp;

// Method to set focus to the next tab

async setFocusHandler() {
if (this.isConsoleApp) {
// Get information about all the tabs
const allTabs = await getAllTabInfo();
// Get information about the currently focused tab
const { tabId } = await getFocusedTabInfo();
// Find the index of the currently focused tab
const selectedTabIndex = allTabs.findIndex(nextTab => {
return nextTab.tabId === tabId;
});
// Get the ID of the next tab to focus on
const nextTabId = allTabs[selectedTabIndex + 1].tabId;
// Set focus to the next tab
await focusTab(nextTabId);
}
}
}

<template>
<!-- Lightning card to contain the button for setting focus to the next
tab -->
<lightning-card title="Focus Tab">
<!-- Padding around the content -->
<div class="slds-p-around_medium">
<!-- Button to set focus to the next tab -->
<lightning-button
label="Set Focus"
onclick={setFocusHandler}>
</lightning-button>
</div>
</lightning-card>

Piyush Aneja | Workspace API in LWC

22
 </template>
Result:

Conclusion
By Implementing the Workspace API in Lightning Web Components, developers can seamlessly
focus tabs within a Lightning console app. Whether it's for quick navigation, enhancing user
experience, or streamlining workflows, this functionality empowers users to efficiently manage
their tasks and data. With just a few lines of code, you can provide users with a more intuitive
and productive interface for navigating their workspace in the console app.

Setting a Tab Icon in a Lightning Console App

In Salesforce Lightning, setting custom icons for tabs within a Lightning console app can
improve user experience by providing visual cues and enhancing navigation. The Workspace
API in Lightning Web Components (LWC) allows developers to set tab icons dynamically,
making the interface more intuitive and visually appealing.

Why Set Tab Icons?

● Enhanced Visual Cues: Icons help users quickly identify the purpose of each tab.
● Improved Navigation: Visual differentiation makes it easier to switch between tabs.
● Customized Experience: Tailor the look and feel of the console app to match your
organization’s branding or specific use cases.

How to Use the Workspace API to Set Tab Icons

With the Workspace API, setting tab icons within a Lightning console app is straightforward.
Here's how you can do it:

1. Import the Required Modules

2. Use the setTabIcon Method

Example Code
Piyush Aneja | Workspace API in LWC
23
Below is an example demonstrating how to set a tab icon in a Lightning console app using LWC:
import { LightningElement, wire } from 'lwc';
import { IsConsoleNavigation, getFocusedTabInfo, setTabIcon } from
'lightning/platformWorkspaceApi';

// Constants for the icon name and alt text

const ICON_NAME = 'utility:alert';
const ICON_ALT_TEXT = 'Alert';

export default class SetTabIconDemo extends LightningElement {

// Wire service to check if the component is inside a Console App
@wire(IsConsoleNavigation)
isConsoleApp;

// Method to set the icon of the currently focused tab

async setIconHandler() {
if (this.isConsoleApp) {
// Get information about the currently focused tab
const { tabId } = await getFocusedTabInfo();
// Set the icon of the focused tab
setTabIcon(tabId, ICON_NAME, {
iconAlt: ICON_ALT_TEXT
});
}
}
}

<template>
<!-- Lightning card to contain the button for setting the icon of the
focused tab -->
<lightning-card title="Set Icon">
<!-- Padding around the content -->
<div class="slds-p-around_medium">
<!-- Button to set the icon of the currently focused tab -->
<lightning-button
label="Set Icon"
onclick={setIconHandler}>
</lightning-button>
</div>
</lightning-card>
</template>

Piyush Aneja | Workspace API in LWC

24
Result-

Conclusion

By Implementing the Workspace API in Lightning Web Components, developers can

dynamically set tab icons within a Lightning console app. Whether it's for enhancing visual cues,
improving navigation, or customizing the user experience, this functionality allows for a more
intuitive and visually appealing interface. With just a few lines of code, you can customize tab
icons to better meet the needs of your users and enhance their interaction with the console app.

Highlighting a Tab with a Different Background Color in a

Lightning Console App
In Salesforce Lightning, highlighting a tab with a different background color within a Lightning
console app can draw attention to important information or actions. The Workspace API in
Lightning Web Components (LWC) enables developers to dynamically change the background
color of tabs, enhancing the user experience and providing visual cues.
Piyush Aneja | Workspace API in LWC
25
Why Highlight Tabs with Different Background Colors?
● Visual Emphasis: Highlighted tabs stand out, helping users quickly identify key
information or actions.
● Increased Visibility: Different background colors make it easier to distinguish between
tabs, even at a glance.
● Enhanced User Guidance: Color-coded tabs provide intuitive visual cues, guiding users
through workflows or processes.

How to Use the Workspace API to Highlight Tabs

With the Workspace API, highlighting tabs with different background colors within a Lightning
console app is simple. Here's how you can do it:

1. Import the Required Modules

2. Use the setTabStyle Method

Example Code
Below is an example demonstrating how to highlight a tab with a different background color in a
Lightning console app using LWC:

import { LightningElement, wire } from 'lwc';

import { IsConsoleNavigation, getFocusedTabInfo, setTabHighlighted } from
'lightning/platformWorkspaceApi';

export default class HighlightTab extends LightningElement {

// Wire service to check if the component is inside a Console App
@wire(IsConsoleNavigation)
isConsoleApp;

// Method to highlight the tab with success state

async successHandler() {
if (this.isConsoleApp) {
// Get information about the currently focused tab
const { tabId } = await getFocusedTabInfo();
// Highlight the tab with success state
setTabHighlighted(tabId, true, {
state: 'success',
pulse: true
});
}
}

Piyush Aneja | Workspace API in LWC

26
 // Method to highlight the tab with warning state
async warningHandler() {
if (this.isConsoleApp) {
// Get information about the currently focused tab
const { tabId } = await getFocusedTabInfo();
// Highlight the tab with warning state
setTabHighlighted(tabId, true, {
state: 'warning',
pulse: true
});
}
}

// Method to highlight the tab with error state

async errorHandler() {
if (this.isConsoleApp) {
// Get information about the currently focused tab
const { tabId } = await getFocusedTabInfo();
// Highlight the tab with error state
setTabHighlighted(tabId, true, {
state: 'error',
pulse: true
});
}
}
}

<template>
<!-- Lightning card to contain the buttons for tab highlighting -->
<lightning-card title="Tab Highlight Demo">
<!-- Padding around the content -->
<div class="slds-p-around_medium">
<!-- Button to highlight the tab with success state -->
<lightning-button
label="Highlight with Success"
onclick={successHandler}>
</lightning-button>

<!-- Button to highlight the tab with warning state -->

<lightning-button
label="Highlight with Warning"
onclick={warningHandler}>

Piyush Aneja | Workspace API in LWC

27
 </lightning-button>

<!-- Button to highlight the tab with error state -->

<lightning-button
label="Highlight with Error"
onclick={errorHandler}>
</lightning-button>
</div>
</lightning-card>
</template>

Result:

Piyush Aneja | Workspace API in LWC

28
Conclusion
By Implementing the Workspace API in Lightning Web Components, developers can
dynamically highlight tabs with different background colors within a Lightning console app.
Whether it's for emphasizing important information, increasing visibility, or guiding users through
workflows, this functionality enhances the user experience by providing intuitive visual cues.
With just a few lines of code, you can customize tab backgrounds to better meet the needs of
your users and enhance their interaction with the console app.

Disabling a Workspace Tab in a Lightning Console App

In Salesforce Lightning, disabling a workspace tab within a Lightning console app can prevent
users from interacting with specific tabs when needed. The Workspace API in Lightning Web
Components (LWC) provides developers with the capability to disable tabs dynamically,
controlling user access and enhancing application functionality.

Why Disable Workspace Tabs?

● Controlled Access: Disable tabs to restrict user interaction with certain content or
features.
● Prevent Errors: Disable tabs temporarily to prevent unintended actions or errors.
● Enhanced User Guidance: Provide clear indications when certain tabs are temporarily
unavailable or inactive.

How to Use the Workspace API to Disable Tabs

With the Workspace API, disabling tabs within a Lightning console app is straightforward. Here's
how you can do it:

1. Import the Required Modules

2. Use the disableTabClose Method

Example Code

Piyush Aneja | Workspace API in LWC

29
Below is an example demonstrating how to disable a workspace tab in a Lightning console app
using LWC:

import { LightningElement, wire } from 'lwc';

import { IsConsoleNavigation, getFocusedTabInfo, disableTabClose } from
'lightning/platformWorkspaceApi';

export default class DisableTab extends LightningElement {

// Wire service to check if the component is inside a Console App
@wire(IsConsoleNavigation)
isConsoleApp;

// Method to handle tab close disablement

async disableHandler(event) {
if (this.isConsoleApp) {
// Get information about the currently focused tab
const { tabId } = await getFocusedTabInfo();
// Disable or enable tab close based on the checkbox value
await disableTabClose(tabId, event.detail.checked);
}
}
}

<template>
<!-- Lightning card to contain the toggle input for tab disablement -->
<lightning-card title="Disable Tab Demo">
<!-- Padding around the content -->
<div class="slds-p-around_medium">
<!-- Toggle input for enabling or disabling tab close -->
<lightning-input
type="toggle"
label="Toggle Disable"
onchange={disableHandler}>
</lightning-input>
</div>
</lightning-card>
</template>

Result:

Piyush Aneja | Workspace API in LWC

30
Conclusion
By Implementing the Workspace API in Lightning Web Components, developers can
dynamically disable workspace tabs within a Lightning console app. Whether it's for controlling
user access, preventing errors, or providing clear user guidance, this functionality enhances the
application's usability and functionality. With just a few lines of code, you can effectively manage
user interaction with tabs and tailor the user experience to meet specific requirements within the
console app.

By implementing the Workspace API in Lightning Web Components, developers can create
highly interactive, efficient, and user-friendly Lightning console apps that meet the unique needs
of their users and organizations. With its ease of use and powerful capabilities, the Workspace
API is a game-changer for Salesforce developers looking to take their console apps to the next
level.

Piyush Aneja | Workspace API in LWC

31