Lightning Console JavaScript API Syntax

To use the Lightning Console JavaScript API, include lightning:navigationItemAPI, lightning:workspaceAPI, or lightning:utilityBarAPI in your Aura component.

The lightning:navigationItemAPI, lightning:workspaceAPI, andlightning:utilityBarAPI components give you access to their coordinating APIs. Give each component an aura:id so that you can reference it from the component’s controller.

The follow example shows a simple Aura component that uses the API libraries:

1<aura:component implements="flexipage:availableForAllPageTypes" access="global">
2    <lightning:navigationItemAPI aura:id="navigationItem" />
3    <lightning:workspaceAPI aura:id="workspace" />
4    <lightning:utilityBarAPI aura:id="utilityBar" />
5    <lightning:button label="Focus Navigation Item" onclick="{!c.focusNavigationItem }" />
6    <lightning:button label="Open Utility" onclick="{!c.openUtilityBar }"/>
7    <lightning:button label="Open Tab" onclick="{!c.openTab }" />
8</aura:component>

This component implements flexipage:availableForAllPageTypes so that it can be accessed in the Lightning App Builder.

This is the component’s JavaScript controller:

1({
2    openUtilityBar : function(component, event, helper) {
3        var utilityAPI = component.find("utilitybar");
4        utilityAPI.openUtility();
5    },
6
7    openTab: function(component, event, helper) {
8        var workspaceAPI = component.find("workspace");
9        workspaceAPI.openTab({
10            pageReference: {
11                "type": "standard__recordPage",
12                "attributes": {
13                    "recordId":"500xx000000Ykt2AAC",
14                    "actionName":"view"
15                },
16                "state": {}
17            },
18            focus: true
19        }).then(function(response) {
20            workspaceAPI.getTabInfo({
21            tabId: response
22        }).then(function(tabInfo) {
23            console.log("The recordId for this tab is: " + tabInfo.recordId);
24        });
25        }).catch(function(error) {
26            console.log(error);
27        });
28    },
29
30    focusNavigationItem : function(component, event, helper) {
31        var navigationItemAPI = component.find("navigationItem");
32        navigationItemAPI.focusNavigationItem().then(function(response) {
33            console.log(response);
34        })
35        .catch(function(error) {
36            console.log(error);
37        });
38    } 
39})

The controller has three functions, each of which uses an API method. To use a method in a controller, use component.find with the aura:id you gave to the lightning:navigationItemAPI, lightning:workspaceAPI, or lightning:utilityBarAPI.

Methods in the Workspace API and the Utility Bar API take a JSON object as an argument. The values included in the object depend on the method. openTab, for example, takes an object that includes the url and focus (whether the new tab has focus). Check the reference section of this guide before using a method so that you know which arguments to pass to it.