focusTab() for Lightning Experience

Focuses a workspace tab or subtab. This method works only in Lightning console apps.

Arguments

The method provides the same argument for both Aura Components and Lightning Web Components (LWC).

Name	Type	Description
`tabId`	string	ID of the workspace tab or subtab on which to focus.

LWC Sample Code

This component has a function that retrieves information of all tabs using getAllTabInfo(), which returns an array of tabInfo objects. Then, it uses focusTab(allTabs[0].tabId) to focus on the first tab in the array.

1import { LightningElement } from 'lwc';
2import { IsConsoleNavigation, getAllTabInfo, focusTab } from 'lightning/platformWorkspaceApi';
3
4export default class FocusTabExample extends LightningElement {
5
6    async handleOpen() {
7        if (!this.isConsoleNavigation) {
8            return;
9        }
10        try {
11            const tabInfo = await getAllTabInfo();
12            await focusTab(tabInfo[0].tabId);
13        } catch (error) {
14            console.log(error);
15        }
16    }
17}

For another example that uses focusTab(), see the workspaceAPIFocusTab 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, opens a new tab and focuses it.

Component code:

1<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
2    <lightning:workspaceAPI aura:id="workspace" />
3    <lightning:button label="Focus New Tab" onclick="{! c.focusNewTab }" />
4</aura:component>

Controller code:

1({
2    focusNewTab : function(component, event, helper) {
3        var workspaceAPI = component.find("workspace");
4        workspaceAPI.openTab({
5            url: '/lightning/r/Account/001xx000003DI05AAG/view',
6        }).then(function(response) {
7            workspaceAPI.focusTab({tabId : response});
8       })
9        .catch(function(error) {
10            console.log(error);
11        });
12    }
13})

The relative URL used in this example is a placeholder. To try this example yourself, use a relative URL with a record ID from your org.

Note

Response

This method returns a promise that, upon success, resolves to true.