SalesforceのLightningコンソールJavaScriptAPIとは？

SalesforceのLightningコンソールJavaScriptAPIとは？

JavaScriptAPIを利用すると、Lightningコンソールアプリケーションへのアクセスが他のプログラムから参照できるため、クライアントの要望に合わせてより柔軟なLightningコンソールアプリケーション開発が可能になります。 JavaScriptAPIを使いアプリケーション開発を始める前に、まずJavaScriptAPIの基本を覚えましょう。 JavaScriptAPIは以下3つのライブラリで構成されており、これらのライブラリをAuraコンポーネントに含めます。

• lightning:navigationItemAPI（ナビゲーション 項目API）
• lightning:workspaceAPI（ワークスペース API）
• lightning:utilityBarAPI（ユーティリティバーAPI）

「ユーティリティバーAPI」は標準ナビゲーションのLightningアプリケーションで使用できますが、「ナビゲーション項目API」と「ワークスペースAPI」は、Lightningコンソールアプリケーションでのみ使用されます。 JavaScriptAPIを利用することで、LightningコンソールアプリケーションとAuraコンポーネントを統合することが可能になります。 ※SalesforceのAuraコンポーネントは、Spring ’19以前に「Lightningコンポーネント」と呼ばれていましたが、現在「Lightningコンポーネント」はAuraコンポーネント、LightningWEBコンポーネントに分類されています。 次の章ではJavaScriptAPIを利用してLightningコンソールアプリケーション開発するための準備方法を、具体的な記述例を取り上げて解説します。

SalesforceのAuraコンポーネントでJavaScriptAPIを利用する際の構文

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

上記のコードは前述した3つの構成要素lightning:navigationItemAPI、lightning:workspaceAPI、lightning:utilityBarAPIを使って記述した構文です。 開発する上で必ず記述することになりますので、これを機に覚えておきましょう。さらに理解を深めるために、次の章からそれぞれの記述を分割して解説します。

Auraコンポーネント構文の解説

< aura:component implements=""flexipage:availableForAllPageTypes"" access=""global"" >

「implements=””flexipage:availableForAllPageTypes””」を実装している場合は、Lightningアプリケーションビルダーでアクセスが可能になります。

...
 < lightning:navigationItemAPI aura:id=""navigationItem"" />
...
< lightning:workspaceAPI aura:id=""workspace"" />
...
< lightning:utilityBarAPI aura:id=""utilityBar"" />
...

それぞれのコンポーネントに「aura:id=””」属性を含めることで、後でコンポーネントのJavaScriptコントローラから参照できます。 最低限の必要な記述は以上です。次にJavaScriptコントローラから、それぞれのコンポーネントを参照するために、JavaScriptコントローラの記述についても見ていきましょう。

JavaScriptコントローラ

({
    openUtilityBar : function(component, event, helper) {
        var utilityAPI = component.find(""utilitybar"");
        utilityAPI.openUtility();
    },

    openTab: function(component, event, helper) {
        var workspaceAPI = component.find(""workspace"");
        workspaceAPI.openTab({
            pageReference: {
                ""type"": ""standard__recordPage"",
                ""attributes"": {
                    ""recordId"":""600xx000000Xat2BBD"",
                    ""actionName"":""view""
                },
                ""state"": {}
            },
            focus: true
        });
    },

    focusNavigationItem : function(component, event, helper) {
        var navigationItemAPI = component.find(""navigationItem"");
    }
})

上記はJavaScriptコントローラからコンポーネントを参照するための記述です。 Auraコンポーネントの「aura:id=””」で登録したidをそれぞれ参照していることがわかります。

< lightning:utilityBarAPI aura:id=""utilityBar"" />

var utilityAPI = component.find(""utilitybar"");

他にもコントローラを利用するための基本的な記述がありますので、順番に解説します。

JavaScriptコントローラの解説

    openUtilityBar : function(component, event, helper) {
        var utilityAPI = component.find(""utilitybar"");
        utilityAPI.openUtility();
    },

コンポーネントのJavaScriptコントローラをメソッド使用するためには、「component.find()」という関数を指定する必要があります。 上記JavaScriptコントローラの一部抜粋した記述には、LightningコンソールJavaScriptAPIの「aura:id=”utilitybar”」で付与された「utilitybar」という値を取得しています。

    openTab: function(component, event, helper) {
        var workspaceAPI = component.find(""workspace"");
        workspaceAPI.openTab({
            pageReference: {
                ""type"": ""standard__recordPage"",
                ""attributes"": {
                    ""recordId"":""500xx000000Ykt2AAC"",
                    ""actionName"":""view""
                },
                ""state"": {}
            },
            focus: true
        }).

上記の記述ではopenTabメソッドを使用し、pageReferenceオプションで新しいタブのコンテンツ情報（コンテンツ内の全てのページに適用される属性）を取得しています。 「””state””: {}」なのでオプションは指定していません。 open関数のメソッドに「focus: true」とありますが、引数をfalseにするとバックグラウンドでタブを開くため、通常のユーティリティ項目はtrue設定しましょう。

Salesforceのコンソールイベント

Salesforceのコンソールイベントを使用するためには、Auraコンポーネントの「event=」属性にJavaScriptAPIイベントを設定します。 Salesforceのコンソールイベントを使用する用途としては、Salesforceのタブが閉じられたときに、閉じたタブのIDを記録したいときなどが挙げられます。 event=””lightning:tabClosed”” イベントを利用してタブを閉じたときにアラートを発生させてみましょう。

< aura:component implements=""flexipage:availableForAllPageTypes"" access=""global"" >
< aura:handler event=""lightning:tabClosed"" action=""{! c.onTabClosed }""/>
< /aura:component>

({
  onTabClosed : function(component, event, helper) {
    var tabId = event.getParam(""tabId"");
    alert(“タブID “ + tabId + “が閉じられました。”);
  }
})

タブを閉じたタイミングで、AuraコンポーネントのコントローラからonTabClosetを呼びだして、閉じたタブのID（tabid）がアラートに表示されます。 出力結果 タブID（tabid）が閉じられました。 他にもイベントの種類が用意されていますので、基本的なイベントを紹介します。

JavaScriptAPIイベントの種類

SalesforceのJavaScriptAPIイベントには、以下の種類が存在します。 lightning:tabClosed lightning:tabCreated lightning:tabFocused lightning:tabRefreshed lightning:tabReplaced lightning:tabUpdated チャットのイベント メッセージングのイベント オムニチャネルのイベント それぞれのJavaScriptAPIについては、公式サイトを参照してください。

JavaScriptAPIメソッドの種類

LightningコンソールのopenTabメソッドの他にも、LightningExperienceのメソッドには以下の種類があります。Auraコンポーネントから使用できるメソッドの大まかな分類です。 LightningExperienceのナビゲーション項目のメソッド LightningExperienceのワークスペースタブとサブタブのメソッド LightningExperienceのユーティリティバーのメソッド LightningExperienceのチャットのメソッド LightningExperienceのオムニチャネルのメソッド openTabメソッドは「Lightning Experience のワークスペースタブとサブタブのメソッド」に分類されています。それぞれのメソッドのコンポーネントコード、コントローラコードを確認する場合は公式サイトを参照してください。

JavaScriptAPIを利用して効率的なアプリケーション開発をしよう！

SalesforceのLightningコンソールでJavaScriptAPIを利用する方法を解説しました。 JavaScriptAPIを利用すると、Lightningコンソールアプリケーションへのアクセスが他のプログラムから参照できるため、より柔軟なLightningコンソールアプリケーションの開発が可能になります。 本記事で紹介した構文は基礎的な記述となります。もしLightningコンソールアプリケーションの開発に携わることがあれば復習しておきましょう。]]>