はじめに
今回は、
クリックすると設定したページの新規コンソールタブを開く、ユーティリティバーのコンポーネントをAuraで作成します。
できあがったもの
アプリケーションマネージャーでユーティリティ項目として
遷移させたいURLを設定。
設置した項目をクリックすると設定したページが新規コンソールタブで開きます。
URLを設定しているだけなので、Salesforce内のページ・WEBタブ・WEBページ なども開けます。
Salesforce外のWEBページを開く場合は、Salesforce内にiframeで呼び出すことになるため
iframe呼び出しが禁止されているサイトでは使えません。
なぜ作ろうと思ったのか
-
一つのアプリケーションを
フィールドインサイドのように職能としては同じだけど役割が違う場合- Salesforce内でのページや、WEBサイト、カスタムWEBタブの利用頻度が異なってくる
-
いろんなやり方はあるけど
ユーティリティバーを使った場合だとどうするのか？- 特にクリック数を少なくするには？
という考えからユーティリティバーに単純なリンクを開くボタンを設置したくて作ってみました。
この記事で書かないこと
- Auraの基本説明
- Auraコンポーネントの作り方
- SalesforceDXのセットアップ
できあがったコード
コンポーネント名：utilitySingleLinkButton
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
<lightning:utilityBarAPI aura:id="utilitybar" />
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<aura:attribute name="url" type="String" />
<aura:attribute name="label" type="String" />
<aura:attribute name="isFocus" type="Boolean" />
<lightning:workspaceAPI aura:id="workspace" />
</aura:component>
<design:component label="新規タブ表示ボタン">
<design:attribute name="url" required="true" description="クリックで開きたいリンク、相対リンク使用可（lightning.force.com の後ろの /から入力）" />
<design:attribute name="label" required="true" description="タブ名" />
<design:attribute name="isFocus" description="タブにフォーカスを当てるかどうか" default="true" />
</design:component>
({
init: function (component) {
var openTab = function () {
var workspaceAPI = component.find("workspace");
var label = component.get("v.label");
workspaceAPI
.openTab({
url: component.get("v.url"),
label: label,
focus: component.get("v.isFocus")
})
.then(function (response) {
workspaceAPI.setTabIcon({
tabId: response,
icon: "utility:people",
iconAlt: label
});
var utilityAPI = component.find("utilitybar");
utilityAPI.minimizeUtility();
})
.catch(function () {});
};
openTab();
// utilitybar APIがinit時に即時使用ができないため、setTimeoutで遅延させる
setTimeout(function () {
var utilityAPI = component.find("utilitybar");
utilityAPI.minimizeUtility();
utilityAPI
.onUtilityClick({
eventHandler: openTab
})
.then(function () {})
.catch(function () {});
}, 500);
}
});
コード解説
1. Auraでユーティリティバーを扱うための設定
flexipage:availableForAllPageTypes
レコードページと他の種別のページ (Lightning アプリケーションのユーティリティバーを含む) でコンポーネントを使用できます。
implements="flexipage:availableForAllPageTypes"でアプリケーションのユーティリティ項目に設定できます。
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
.
.
.
</aura:component>
2. ユーティリティ項目設定時にプロパティを設定できるようにする
designファイルでプロパティの項目を作成できます。
<design:component label="新規タブ表示ボタン">
<design:attribute name="url" required="true" description="クリックで開きたいリンク、相対リンク使用可（lightning.force.com の後ろの /から入力）" />
<design:attribute name="label" required="true" description="タブ名" />
<design:attribute name="isFocus" description="タブにフォーカスを当てるかどうか" default="true" />
</design:component>
設定した値を利用できるように、cmpにも同じattribute名の受け皿を設定します。
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="url" type="String" />
<aura:attribute name="label" type="String" />
<aura:attribute name="isFocus" type="Boolean" />
</aura:component>
3. workspaceAPI・utilityBarAPIを利用可能にする
<lightning:utilityBarAPI aura:id="utilitybar" />でutilityBarAPIの有効
<lightning:workspaceAPI aura:id="workspace" />でworkspaceAPIの有効
をしています。
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
<lightning:utilityBarAPI aura:id="utilitybar" />
<lightning:workspaceAPI aura:id="workspace" />
</aura:component>
utilityBarAPIは、ユーティリティバーに関する操作（開く・閉じる等）ができます。
workspaceAPIは、コンソールアプリケーションに関する操作（タブの開く・閉じる等）ができます。
4. クリックされたらリンクを開くようにする
初期化処理としてaura:handlerを設定しています。
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
・
・
<aura:handler name="init" value="{!this}" action="{!c.init}" />
・
・
・
</aura:component>
utilityBarAPIでやりたいこと
- クリックした時に
workspaceAPIを使って新規コンソールタブを開く - ページを開いたら、開いたユーティリティ項目を閉じる
onUtilityClickでクリックした時に実行するfunctionを設定。
minimizeUtilityでユーティリティ項目を閉じています。
本当はinitの状態で、setTimeoutを使わずにそのまま
onUtilityClickを設定したかったのですが、initでutilityBarAPIを使うとutilityIdを取得できずエラーになるのでsetTimeoutで遅延させています。
クリックイベント時に動作させたい、極力ボタンのようなユーザ体験にしたいので
init内で現在書いています。
({
init: function (component) {
var openTab = function () {
// タブを開く処理
};
openTab();
// utilitybar APIがinit時に即時使用ができないため、setTimeoutで遅延させる
setTimeout(function () {
var utilityAPI = component.find("utilitybar");
utilityAPI.minimizeUtility();
utilityAPI
.onUtilityClick({
eventHandler: openTab
})
.then(function () {})
.catch(function () {});
}, 500);
}
});
workspaceAPIでやりたいこと
- クリックした時に設定したURLを新規プライマリータブで開く
- 開く際に、フォーカスをオンにしタブ名を設定する
openTabのurlに開きたいURL、labelにタブ名、focus trueで開いたタブをフォーカス状態にします。
新規タブを開いた後は、挙動としてボタンを同じように見せたいので
minimizeUtilityを使ってユーティリティ項目を閉じています。
({
init: function (component) {
var openTab = function () {
var workspaceAPI = component.find("workspace");
var label = component.get("v.label");
workspaceAPI
.openTab({
url: component.get("v.url"),
label: label,
focus: component.get("v.isFocus")
})
.then(function (response) {
workspaceAPI.setTabIcon({
tabId: response,
icon: "utility:people",
iconAlt: label
});
var utilityAPI = component.find("utilitybar");
utilityAPI.minimizeUtility();
})
.catch(function () {});
};
}
});
最後に
ユーティリティバーをボタンのように見せる方法他にあれば、ぜひコメント等にご意見いただきたいです。
（実は標準機能にあったりして？）
今回のworkspaceAPIも使用しましたが、
workspaceAPIはなんとLWCでもベータですが対応しましたね。
LWCでできないことを現在Auraで書くのですが、ついにAura離れも近くなっているかもです。