Chatter パブリッシャーへのカスタムアプリケーションの統合

1.コンポーザコンポーネントの設定

コンポーザコンポーネントでは、コンポーネントファイル、コントローラファイル、ヘルパーファイル、スタイルファイルが作成されています。

次に、quotesCompose.cmp のコンポーネントマークアップを示します。このファイルでは、lightning:availableForChatterExtensionComposer インターフェースが実装されます。

1<aura:component implements="lightning:availableForChatterExtensionComposer">
2    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
3    
4    <div class="container">
5    	<span class="quote" aura:id="quote"></span>
6        <span class="author" aura:id="author"></span>
7        <ui:button label="Get next Quote" press="{!c.getQuote}"/>
8    </div>
9
10</aura:component>

コントローラとヘルパーを使用して、コンポーザコンポーネントを初期化し、ソースから引用句を取得します。引用句を取得したら、イベント sendChatterExtensionPayload を起動します。このイベントを起動すると、[追加] ボタンが有効になり、プラットフォームでアプリケーションのペイロードをフィード項目に関連付けることができるようになります。ペイロードのメタデータとして、タイトルと説明も追加できます。タイトルと説明は、Salesforce Classic など、Lightning 以外のコンテキストで表示されます。

1getQuote: function(cmp, event, helper) {
2    // get quote from the source
3    var compEvent = cmp.getEvent("sendChatterExtensionPayload");
4    compEvent.setParams({
5        "payload" : "<payload object>",
6        "extensionTitle" : "<title to use when extension is rendered>",
7        "extensionDescription" : "<description to use when extension is rendered>"
8    });
9    compEvent.fire(); 
10}

CSS リソースをコンポーネントバンドルに追加して、コンポジションコンポーネントのスタイルを設定します。

2.レンダラコンポーネントの設定

レンダラコンポーネントでは、コンポーネントファイル、コントローラファイル、スタイルファイルが作成されています。

次に、quotesRender.cmp のコンポーネントマークアップを示します。このファイルでは、コンポーネント内の属性としてペイロードを提供する lightning:availableForChatterExtensionRenderer インターフェースを実装します。

1<aura:component implements="lightning:availableForChatterExtensionRenderer">
2    <aura:attribute name="_quote" type="String"/>
3    <aura:attribute name="_author" type="String"/>
4    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
5    
6    <div class="container">
7    	<span class="quote" aura:id="quote">{!v._quote}</span>
8        <span class="author" aura:id="author">--- {!v._author} ---</span>
9    </div>
10</aura:component>

ペイロードの対処法はいくつかあります。ペイロードをコンポーネント {!v.payload} で直接使用できます。コントローラを使用して、lightning:availableForChatterExtensionRenderer インターフェースによって提供されるペイロードを解析し、その属性を自分で設定できます。CSS リソースをレンダラバンドルに追加して、レンダラコンポーネントのスタイルを設定します。

3.新しい ChatterExtension エンティティの設定

これらのコンポーネントを作成したら、ワークベンチに移動します (または独自のインスタンスをインストール)。必ず API バージョン 41.0 以降を使用してください。組織にログインして、ChatterExtension エンティティを作成します。

[Data (データ)] メニューから [Insert (挿入)] を選択します。

[Object Type (オブジェクト種別)] リストから ChatterExtension を選択します。

[Value (値)] 列で、ChatterExtension 項目の値を指定します (値と説明については「ChatterExtension」を参照)。

ファイルアセットの IconId を取得します。[ワークベンチ] > [utilities (ユーティリティ)] > [REST Explorer] に移動し、組織から fileId を使用してファイルアセットを作成する新しい POST 要求を作成します。

4.アプリケーションのパッケージ化と AppExchange へのアップロード

『ISVforce ガイド』には、アプリケーションのパッケージ化と AppExchange へのアップロードに関する有益な情報が記載されています。

5.Chatter パブリッシャーに埋め込むアプリケーションの選択

各コミュニティには管理者ページがあり、Chatter パブリッシャーに表示するアプリケーションの選択および並び替えができます。最大 5 個のアプリケーションを選択し、任意の順序で配置します。ここで設定する順序によって、パブリッシャーに表示されるアイコンの順序が決まります。

コミュニティで、コミュニティワークスペースに移動して、[管理] ページをクリックします。[リッチパブリッシャーアプリケーション] をクリックして、ページを開きます。

[選択済みの項目] 列にアプリケーションを移動し、[保存] をクリックすると、Chatter パブリッシャーに選択したアプリケーションが表示されます。