Lightning Utility Barを作ってみた

Spring'17 から利用可能になった Utility Bar を作ってみたので、その手順を残しておきます。

f:id:dackdive:20170419225949p:plain

とりあえず 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 する必要があります。

<aura:component implements="flexipage:availableForAllPageTypes">
  <div class="slds-text-heading--large">Hello, World!</div>
</aura:component>

FlexiPage メタデータを用意する

Lightning Utility Bar も、メタデータ的には App Builder で作ったページと同じ FlexiPage なんだそうです。
FlexiPage のメタデータについては以下。

FlexiPage | Metadata API Developer Guide | Salesforce Developers

実際には、いきなりローカルでメタデータを作るのではなく

設定 > アプリケーション > アプリケーションマネージャ

より任意のアプリケーションの編集画面を開き、「ユーティリティバー」タブから画面上でユーティリティバーを作成し、できたメタデータをダウンロードする方が早いです。
「追加」を押すと先ほどの Lightning Component も表示されるはず。

f:id:dackdive:20170420000102p:plain

保存したら 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 に対応しますが、その対応付けは確認した限りは以下の通りです。

f:id:dackdive:20170420001905p:plain

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>