Spring'17 から利用可能になった Utility Bar を作ってみたので、その手順を残しておきます。
とりあえず Hello, World! と表示するところまで。
こちらの記事が参考になりました。
一応、公式の Implementation Guide とやらもあるみたいだけど、
https://resources.docs.salesforce.com/204/latest/en-us/sfdc/pdf/utility_bar_impl_guide.pdf
おそらく情報が古く、REST API 経由で操作するような記述が見られるが実際には必要ありませんでした。
以下、作り方。
Utility Bar のコンテンツとなる Lightning Component を作る
通常の Lightning Component と同じように作ります。
flexipage:availableForAllPageTypes を implement する必要があります。
<auracomponent implements="flexipage:availableForAllPageTypes">
<div class="slds-text-heading--large">Hello, World!</div>
</auracomponent>
FlexiPage メタデータを用意する
Lightning Utility Bar も、メタデータ的には App Builder で作ったページと同じ FlexiPage なんだそうです。
FlexiPage のメタデータについては以下。
FlexiPage | Metadata API Developer Guide | Salesforce Developers
実際には、いきなりローカルでメタデータを作るのではなく
設定 > アプリケーション > アプリケーションマネージャ
より任意のアプリケーションの編集画面を開き、「ユーティリティバー」タブから画面上でユーティリティバーを作成し、できたメタデータをダウンロードする方が早いです。
「追加」を押すと先ほどの Lightning Component も表示されるはず。
保存したら Force.com Migration Tool や jsforce-metadata-tools などを使って CustomApplication と FlexiPage を retrieve してきます。
retrieve してきた FlexiPage の中身はこんな感じ。
xml version="1.0" encoding="UTF-8"
<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
<flexiPageRegions>
<componentInstances>
<componentInstanceProperties>
<name>eager</name>
<type>decorator</type>
<value>false</value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>height</name>
<type>decorator</type>
<value>480</value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>icon</name>
<type>decorator</type>
<value>custom_apps</value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>label</name>
<type>decorator</type>
<value>UtilityBarSample</value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>scrollable</name>
<type>decorator</type>
<value>true</value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>width</name>
<type>decorator</type>
<value>440</value>
</componentInstanceProperties>
<componentName>UtilityBarSample</componentName>
</componentInstances>
<name>utilityItems</name>
<type>Region</type>
</flexiPageRegions>
<masterLabel>MyFirstUtilityBar</masterLabel>
<pageTemplate>one:utilityBarTemplateDesktop</pageTemplate>
<type>UtilityBar</type>
</FlexiPage>
ファイル名は [アプリケーション名]_UtilityBar.flexipage とかになってるはずですが、カスタムアプリケーション側の <utilityBar> 名と一致していれば好きな名前を付けられるはず（未確認）。
また、画面から設定できるユーティリティ項目は、XML の componentInstanceProperties >name に対応しますが、その対応付けは確認した限りは以下の通りです。
eager 以外はわかりやすいですね。
また、 <componentName> は Lightning Component 名と揃える必要があります。
CustomApplication のメタデータに追加する
最後に、Utility Bar をアプリケーションに追加した場合の CustomApplication メタデータは以下のようになります。
xml version="1.0" encoding="UTF-8"
<CustomApplication xmlns="http://soap.sforce.com/2006/04/metadata">
<brand>
<headerColor>#0070D2</headerColor>
</brand>
<formFactors>Large</formFactors>
<label>MyLightningApp</label>
<navType>Standard</navType>
<uiType>Lightning</uiType>
<utilityBar>MyLightningApp_UtilityBar</utilityBar>
</CustomApplication>
<utilityBar>MyLightningApp_UtilityBar</utilityBar> の部分です。
おわりに
画面から Utility Bar を作れるようになったことでずいぶん楽になったんでしょう。
今回は Hello, World! を表示するだけの実用性のないコンポーネントでしたが、いろんな可能性のある機能なので引き続き何か作りたいと思います。
冒頭で紹介した記事のほか、こちらにもサンプルコードがあるので参考になりそう。
https://github.com/zaki-yama/lightning-component-samples/tree/master/lightning-utility-bar
