Control Workspace Tabs & Subtabs using Platform Workspace API | Lightning Web Components #salesforce

Kapil May 18, 2024

 Hi there, if you are looking for an example of Workspace APIs and planning to play around it than this blog post is for you.

In this blog post I have created a lightning web component where we will be learning below features using Workspace APIs

  • Open a new tab
  • Open a subtab
  • Change label of tab
  • Set icon of tab
  • Highlight a tab
  • Navigate to next tab
  • Navigate to previous tab
  • Disable tab close
  • Enable tab close

A Lightning console app displays Salesforce pages as workspace tabs or subtabs. A workspace tab displays the main work item or record, such as an account. A subtab displays related records, such as an account’s contacts or opportunities.
These methods work with workspace tabs and subtabs in Lightning console apps. Both Lightning Web Components (LWC) and Aura Components are supported unless otherwise specified.

Checkout complete code of using workspace apis 

WorkspaceAPIs.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<template>
    <lightning-card title="Workspace APIs" icon-name="standard:scheduling_workspace">
        <div class="slds-var-m-around_medium">
            <lightning-button label="Open Tab" onclick={openTab}>
            </lightning-button>
        </div>
        <div class="slds-var-m-around_medium">
            <lightning-button
                label="Open Subtab on Enclosing Tab"
                onclick={findEnclosingTabAndOpenSubtab}
            >
            </lightning-button>
        </div>
        <div class="slds-var-m-around_medium">
            <lightning-button
                label="Change Label"
                onclick={changeLabel}
            >
            </lightning-button>
        </div>
        <div class="slds-var-m-around_medium">
            <lightning-button
                label="Set Tab Icon"
                onclick={setTabIcon}
            >
            </lightning-button>
        </div>
        <div class="slds-var-m-around_medium">
            <lightning-button
                label="Highlight Tab"
                onclick={highlightTab}
            >
            </lightning-button>
        </div>
        <div class="slds-var-m-around_medium">
            <lightning-button
                label="Next Tab"
                onclick={nextTab}
            >
            </lightning-button>
        </div>
        <div class="slds-var-m-around_medium">
            <lightning-button
                label="Previous Tab"
                onclick={previousTab}
            >
            </lightning-button>
        </div>
        <div class="slds-var-m-around_medium">
            <lightning-button
                label="Disable Tab Close"
                onclick={disableTabClose}
            >
            </lightning-button>
        </div>
        <div class="slds-var-m-around_medium">
            <lightning-button
                label="Enable Tab Close"
                onclick={enableTabClose}
            >
            </lightning-button>
        </div>
    </lightning-card>
</template>

WorkspaceAPIs.js

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
import { LightningElement,wire } from 'lwc';
import {openTab,
    EnclosingTabId,
    openSubtab,
    getFocusedTabInfo,
    setTabLabel,
    setTabIcon,
    setTabHighlighted,
    getAllTabInfo,
    focusTab,
    disableTabClose} from 'lightning/platformWorkspaceApi';

export default class WorkSpaceAPIs extends LightningElement {
    @wire(EnclosingTabId) enclosingTabId;

    //Open a new tab
    async openTab() {
        await openTab({
            pageReference: {
                type: 'standard__objectPage',
                attributes: {
                    objectApiName: 'Contact',
                    actionName: 'list'
                }
            },
            focus: true,
            label: 'Contacts List'
        });
    }

    //Open the subtab
    findEnclosingTabAndOpenSubtab() {
        openSubtab(this.enclosingTabId, {
            pageReference: {
                type: 'standard__objectPage',
                attributes: {
                    objectApiName: 'Contact',
                    actionName: 'list'
                }
            }
        });
    }

    //Change Label of focused tab
    async changeLabel() {
        const { tabId } = await getFocusedTabInfo();
        setTabLabel(tabId, 'Salesforce Bolt');
    }

    //Set icon on focused tab
    async setTabIcon() {
        const { tabId } = await getFocusedTabInfo();
        setTabIcon(tabId, 'utility:animal_and_nature', {
            iconAlt: 'Animal and Nature'
        });
    }

    //Highlight focused tab
    async highlightTab(event) {
        const { tabId } = await getFocusedTabInfo();
        setTabHighlighted(tabId, true, {
            pulse: true,
            state: 'warning'
        });
    }

    //Navigate to next tab
    async nextTab() {
        const { tabId } = await getFocusedTabInfo();
        const allTabs = await getAllTabInfo();
        const selectedTabIndex = allTabs.findIndex(
            (possibleNextTab) => possibleNextTab.tabId === tabId
        );
        const nextTabId = allTabs[selectedTabIndex + 1].tabId;

        await focusTab(nextTabId);
    }

    //Navigate to previous tab
    async previousTab() {
        const { tabId } = await getFocusedTabInfo();
        const allTabs = await getAllTabInfo();
        const selectedTabIndex = allTabs.findIndex(
            (possibleNextTab) => possibleNextTab.tabId === tabId
        );
        const nextTabId = allTabs[selectedTabIndex - 1].tabId;

        await focusTab(nextTabId);
    }

    //Disable tab close button
    async disableTabClose(event) {
        const { tabId } = await getFocusedTabInfo();
        await disableTabClose(tabId, true);
    }

    //Enable tab close button
    async enableTabClose(event) {
        const { tabId } = await getFocusedTabInfo();
        await disableTabClose(tabId, false);
    }
}


WorkspaceAPIs.js-meta.xml

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>60.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>


Output


Checkout Complete Video Below




 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments