dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

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> 名と一致していれば好きな名前を付けられるはず(未確認)。

また、画面から設定できるユーティリティ項目は、XMLcomponentInstanceProperties >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>

<utilityBar>MyLightningApp_UtilityBar</utilityBar> の部分です。


おわりに

画面から Utility Bar を作れるようになったことでずいぶん楽になったんでしょう。
今回は Hello, World! を表示するだけの実用性のないコンポーネントでしたが、いろんな可能性のある機能なので引き続き何か作りたいと思います。

冒頭で紹介した記事のほか、こちらにもサンプルコードがあるので参考になりそう。


GitHub

https://github.com/zaki-yama/lightning-component-samples/tree/master/lightning-utility-bar