openTab() for Lightning Experience

Opens a new workspace tab. If the tab is already open, the tab is focused.

Arguments

The method provides the same argument for both Aura Components and Lightning Web Components (LWC). However, icon, iconAlt, and label are supported only for LWC.

Name	Type	Description
pageReference	object	Optional. Generates a unique URL to open. A page reference contains attributes that apply to all pages of that type. See the Aura pageReference types and LWC pageReference types.
recordId	ID	Optional. Specifies the record to open.
url	URL	Optional. The URL representing the content of the new workspace tab. The URL can be either relative or absolute. To use a third-party domain, add the site as a CSP Trusted Site.
focus	boolean	Optional. Specifies whether the new tab has focus. To display the tab immediately, set focus to `true`. To open the tab in the background, set focus to `false`.
overrideNavRules	boolean	Optional. Specifies whether the open tab respects existing navigation rules. This argument has no effect on records that have no navigation rules configured and URLs that do not point to a record.
icon	string	Optional. An SLDS icon key in the format `action:canvas` where `action` is the SLDS icon category. See a full list of icon categories and keys on the SLDS reference site. Available for LWC only.
iconAlt	string	Optional. Alternative text for the icon. Available for LWC only.
label	string	Optional. The text label for the icon. Available for LWC only.

pageReference, recordId, and url are prioritized in that order. Providing an argument with a higher priority means the others are ignored.

Note

LWC Sample Code

This component has a function that opens a specified tab and applies focus on it.

1import { LightningElement, wire } from 'lwc';
2import { IsConsoleNavigation, openTab } from 'lightning/platformWorkspaceApi';
3
4export default class OpenTabExample extends LightningElement {
5    @wire(IsConsoleNavigation) isConsoleNavigation;
6
7    async openTab() {
8        if (!this.isConsoleNavigation) {
9            return;
10        }
11        await openTab({
12            pageReference: {
13                type: 'standard__objectPage',
14                attributes: {
15                    objectApiName: 'Account',
16                    actionName: 'home'
17                }
18            },
19            icon: 'utility:bookmark',
20            focus: true,
21            label: 'Account List'
22        });
23    }
24}

For another example that uses openTab(), see the workspaceAPIOpenTab 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 tab.

Component code:

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

Pass in a pageReference Controller code (pageReference) using the standard__recordPage type:

1({
2    handleOpenTab: function(component, event, helper) {
3        var workspaceAPI = component.find("workspace");
4        workspaceAPI.openTab({
5            pageReference: {
6                "type": "standard__recordPage",
7                "attributes": {
8                    "recordId":"500xx000000Ykt2AAC",
9                    "actionName":"view"
10                },
11                "state": {}
12            },
13            focus: true
14        }).then(function(response) {
15            workspaceAPI.getTabInfo({
16                tabId: response
17        }).then(function(tabInfo) {
18            console.log("The recordId for this tab is: " + tabInfo.recordId);
19        });
20        }).catch(function(error) {
21            console.log(error);
22        });
23    }
24)}

Controller code (recordId):

1({
2    handleOpenTab : function(component, event, helper) {
3        var workspaceAPI = component.find("workspace");
4        workspaceAPI.openTab({
5            recordId: '001xx000003DIkeAAG',
6            focus: true
7        }).then(function(response) {
8            workspaceAPI.getTabInfo({
9                  tabId: response
10            }).then(function(tabInfo) {
11            console.log("The url for this tab is: " + tabInfo.url);
12            });
13        })
14        .catch(function(error) {
15               console.log(error);
16        });
17    }
18})

Controller code (url):

1({
2    handleOpenTab : function(component, event, helper) {
3        var workspaceAPI = component.find("workspace");
4        workspaceAPI.openTab({
5            url: '/lightning/r/Account/001xx000003DI05AAG/view',
6            focus: true
7        }).then(function(response) {
8            workspaceAPI.getTabInfo({
9                tabId: response
10            }).then(function(tabInfo) {
11            console.log("The recordId for this tab is: " + tabInfo.recordId);
12            });
13        }).catch(function(error) {
14                console.log(error);
15        });
16    }
17})

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 the tabId of the new tab.

Salesforce Console Developer Guide

openTab() for Lightning Experience

Arguments

LWC Sample Code

Aura Components Sample Code

Response