focusTab() for Lightning Experience
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})Response
This method returns a promise that, upon success, resolves to true.