Friday, 2 August 2024

LWC Workspace API methods

 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;

            });

        }

    }


No comments:

Post a Comment