Lightning コンソール JavaScript API の構文

LWC の構文

LWC ワークスペース API を使用するには、JavaScript コードに lightning/platformWorkspaceApi をインポートします。

lightning/platformWorkspaceApi モジュールでは、ワークスペース API メソッド、ワイヤーアダプター、および Lightning メッセージチャネルにアクセスできます。Lightning メッセージチャネルにアクセスするには、インポート元を @salesforce/messageChannel/lightning__tab* にします。たとえば、@salesforce/messageChannel/lightning__tabClosed にします。

次の例は、openSubtab API メソッドと EnclosingTabId ワイヤーアダプターを使用する Lightning Web コンポーネントを示しています。

1import { LightningElement, wire } from 'lwc';
2import { EnclosingTabId, openSubtab } from 'lightning/platformWorkspaceApi';
3
4export default class MyComponent extends LightningElement {
5  @wire(EnclosingTabId) tabId;
6
7  handleClick() {
8    if (!this.tabId) {
9      return;
10    }
11    // Open a record as a subtab of the current tab
12    openSubtab(this.tabId, { recordId: 'YourRecordId', focus: true });
13  }
14}

Lightning アプリケーションビルダーでコンポーネントにアクセスできるように、コンポーネントの .js-meta.xml ファイルを設定します。

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3  <apiVersion>59.0</apiVersion>
4  <isExposed>true</isExposed>
5  <targets>
6      <target>lightning__RecordPage</target>
7      <target>lightning__AppPage</target>
8      <target>lightning__HomePage</target>
9  </targets>
10</LightningComponentBundle>

LWC では、ワークスペース API メソッドのみがサポートされています。Aura の場合と同様、ワークスペース API のメソッドは、引数として JSON オブジェクトを取ります。オブジェクトに含まれる値は、メソッドによって異なります。たとえば、openTab は、url と focus (新しいタブにフォーカスするかどうか) が含まれるオブジェクトを取ります。メソッドを使用する前にこのガイドの「参照」セクションを参照して、メソッドに渡す引数を確認してください。

Aura コンポーネントの構文

Lightning コンソール JavaScript API を使用するには、lightning:navigationItemAPI、lightning:workspaceAPI、lightning:utilityBarAPI を Aura コンポーネントに含めます。

lightning:navigationItemAPI、lightning:workspaceAPI、lightning:utilityBarAPI コンポーネントを使用すると、これらの調整 API にアクセスできます。各コンポーネントに aura:id を付与して、コンポーネントのコントローラーから参照できるようにします。

次の例では、API ライブラリを使用する簡単な Aura コンポーネントを示します。

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>

このコンポーネントは flexipage:availableForAllPageTypes を実装しているため、Lightning アプリケーションビルダーでアクセスできます。

コンポーネントの JavaScript コントローラーは次のようになります。

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})

コントローラーには、API メソッドを使用する 3 つの関数があります。コントローラーでメソッドを使用するには、lightning:navigationItemAPI、lightning:workspaceAPI、lightning:utilityBarAPI に付与した aura:id と共に component.find を使用します。

ワークスペース API とユーティリティバー API のメソッドは、引数として JSON オブジェクトを取ります。オブジェクトに含まれる値は、メソッドによって異なります。たとえば、openTab は、url と focus (新しいタブにフォーカスするかどうか) が含まれるオブジェクトを取ります。メソッドを使用する前にこのガイドの「参照」セクションを参照して、メソッドに渡す引数を確認してください。

LWC と Aura のガイドライン

Lightning コンソール JavaScript API を操作するときは、次のガイドラインを考慮してください。

• LWC の場合、必須パラメーターは focusTab(tabId); のようにメソッドに明示的に渡されます。Aura の場合、必須パラメーターは workspaceAPI.focusTab({tabId : response}); のようにオブジェクトのメソッドに渡されます。
• LWC では、Lightning Experience ページに一致する URL を渡します。たとえば、/lightning/r/Account/001R0000003HgssIAC/view のような URL を渡します。