リッチパブリッシャーアプリケーションの作成

学習の目的

この単元を完了すると、次のことができるようになります。
  • リッチパブリッシャーアプリケーションプラットフォームで提供されるインターフェースとイベントを挙げる。
  • リッチパブリッシャーアプリケーションを最初から作成する。
  • コミュニティにリッチパブリッシャーアプリケーションを設定する。

ステップ 1.アイコン画像をアップロードしてそのファイルアセット ID を取得する

質問パブリッシャーのリッチパブリッシャーアプリケーションアイコン

フィードパブリッシャーに表示するアイコンを指定してアプリケーションと一緒にパッケージするには、アイコンの fileAsset ID が必要です。

fileAsset ID は、ChatterExtension エンティティを作成するときに使用します。fileAsset ID を ChatterExtension に追加すると、アイコンファイルをアプリケーションと一緒にパッケージできます。

ここでは、画像をアップロードしてその fileAsset ID を取得する方法を説明します。

メモ

メモ

Lightning コンポートフレームワークには、Lightning Web コンポーネントと Aura という 2 つのプログラミングモデルがあります。このモジュールでは、Aura を使用してリッチパブリッシャーアプリケーションを作成します。

  1. アイコンファイルを Salesforce にアップロードします。
  2. ファイル ID をコピーします。
    メモ

    メモ

    ファイル ID は、Salesforce のファイルの詳細から取得できます。[ファイル] ページに移動し、ファイルの詳細を表示します。ブラウザの URL からファイル ID をコピーします。ID は長い番号です (069R00000003roQ など)。

  3. ワークベンチに移動し、fileAsset にある id の値を取得します。
    1. REST Explorer で、[Post (投稿)] を選択し、パス「/services/data/v43.0/connect/files/[file_ID]/asset」を入力します。
    2. [file_ID] に、手順の 2 でコピーしたファイル ID を入力します。
    3. [Request Body (リクエストボディ)] に、「{}」と入力します。
    4. [Execute (実行)] をクリックします。

      ワークベンチの fileAsset

    5. fileAsset ノードを展開し、id の値をコピーし、後で使用するためにどこかに貼り付けておきます。

ステップ 2.構成および表示の Lightning コンポーネントを作成する

コミュニティメンバーがリッチパブリッシャーアプリケーションアイコンをクリックすると、構成モーダルが開きます。このモーダルには、Lightning コンポーネントが含まれます。Lightning コンポーネントを使用すると、ユーザは何かを選択、検索、または生成できます。このコンポーネントは、使用事例に合わせて自由にカスタマイズできます。

では、ある会社がリッチパブリッシャーアプリケーションプラットフォームを使用してケースを投稿と質問に添付する方法を見てみましょう。

Capricorn の概要

Capricorn は、コーヒーと高級コーヒー抽出器具を販売しており、カスタマーサービスに定評があります。その秘訣の 1 つは、カスタマーサービスエージェントが、オープンケースについて議論し、解決策についてコラボレーションできるように設定したコミュニティです。Capricorn は、投稿や質問にケースを添付するためのリッチパブリッシャーアプリケーションを開発しようとしています。エージェントに、過去の解決策を利用して現在の問題をすばやく解決する手段を提供するのです。それを次のように行います。

A. 1 つ目の Lightning コンポーネントを作成する

Lightning インターフェース lightning:availableForChatterExtensionComposer を拡張する Lightning コンポーネントを作成します。構成コンポーネントはこのインターフェースを使用します。

Capricorn の開発者チームは、aura iteration を使用して、コンポーネントコードでリスト項目を表示します。以下は、Lightning コンポーネントのコードです。

<aura:component implements="lightning:availableForChatterExtensionComposer" controller="caseController">
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    <aura:attribute name="items" type="List" description="Contains a list of items for user to select."/>
    
    <div class="container">
        <aura:iteration items="{!v.items}" var="item" indexVar="index">
            <div class="itemContainer" onclick="{!c.selected}">
                <div class="itemLeft">
                	<img class="itemIcon" src="https://login.salesforce.com/logos/Standard/record/logo.svg"></img>
                </div>
                <div class="itemRight">
                    <div class="itemTitle">{!item.title}</div>
                	<div class="itemDescription">Case Number: {!item.caseNo}</div>
                </div>
            </div>
        </aura:iteration>
    </div>
</aura:component>

Capricorn チームは、コントローラの init 関数で Apex 要求を実行して、選択リスト用のサポートケース情報を取得します。以下は、Lightning コンポーネントに関連付けられているコントローラコードです。

({
	init : function(cmp, event, helper) {
        var action = cmp.get("c.getCases");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var caseList = [];
                var response = response.getReturnValue();
                for (var i=0;i<response.length;i++) {
                    caseList.push({
                        "title": response[i].Subject,
                        "caseNo": response[i].CaseNumber
                    })
                }
                cmp.set("v.items", caseList);
            }
        });
        $A.enqueueAction(action);
	},
    
    selected: function(cmp, event, helper) {
        var selectedItem = helper.getSelectedItem(cmp, event);
		var compEvent = cmp.getEvent("sendChatterExtensionPayload");
		compEvent.setParams({
			"payload" : helper.getPayload(selectedItem),
			"extensionTitle" : helper.getTitle(selectedItem),
			"extensionDescription" : helper.getDescription(selectedItem)
		});
		compEvent.fire(); 
    }
})

以下は、コントローラに付随するヘルパーコードです。

({  
    getSelectedItem: function(cmp, event) {
        var clicked = event.currentTarget;
        var parent = clicked.parentElement;
        var total = parent.children.length;
        var selectedIndex = -1;
        for(var i=0; i<total; i++) {
            if(clicked === parent.children.item(i)) {
                selectedIndex = i;
            }
            $A.util.removeClass(parent.children.item(i), "selected");
        }
        $A.util.addClass(clicked, "selected");
        
        var selectedTh = cmp.get("v.items")[selectedIndex];
        return selectedTh;
    },
    
    getPayload: function(item) {
        return item;
    },
    
    getTitle: function(item) {
        return item.title;
    },
    
    getDescription: function(item) {
        return item.caseNo;
    }
})
ヒント

ヒント

以下は、getCases 関数の Apex コールを記述する方法の 1 つです。

public class caseController {
    
    @AuraEnabled
    public static List<Case> getCases() {
       List<Case> cases = [SELECT AccountId,CaseNumber,Subject,Description,Id FROM Case ORDER BY CreatedDate ASC NULLS FIRST LIMIT 20];
       return cases;
    }
}

ユーザが選択できるように独自の方法を実装できます。Apex では、任意のロジックで内部またはサードパーティのサービスを使用してスマートデータまたは最新データを取得し、強力なリッチパブリッシャーアプリケーションを作成できます。

重要なのは、ユーザがクリックしたらコントローラコードの aura event lightning:sendChatterExtensionPayload がトリガされるようにすることです。Capricorn のコードサンプルでは、チームは selected 関数でイベントを設定します。selected 関数でイベントを設定すると、ユーザが選択したときに、ペイロードが送信されてフィード項目に関連付けられます。

チームは、ヘルパー関数を使用して extensionTitle および extensionDescription メタデータを設定し、ペイロードに関連付けます。このメタデータは、メール通知や Classic ビューなど、Lightning 以外の使用事例用です。必要に応じて、サムネイル URL を追加することもできます。

以下は、タイトルとサムネイルを含むモーダルです。

コンポーザコンポーネントのリスト項目

リッチパブリッシャーアプリケーションプラットフォームは、[Add (追加)] および [Cancel (キャンセル)] ボタンも提供されます。前の画像で、[Add (追加)] ボタンは無効化されています。Salesforce では、[Add (追加)] ボタンは、lightning:sendChatterExtensionPayload イベントが、空ではないペイロードで起動された後にのみ有効になります。イベントが空のペイロードで起動された場合、ボタンは無効のままです。

有効になった [Add (追加)] ボタン

B. 2 つ目の Lightning コンポーネントを作成する

次に、Capricorn チームは、Lightning インターフェース lightning:availableForChatterExtensionRenderer を拡張する Lightning コンポーネントを作成します。このインターフェースは、FeedItem が表示されるとき、パブリッシャーに選択されたペイロードを表示します。このインターフェースには、2 つの必須属性 variantpayload が含まれます。variant 属性を使用すると、選択されたアプリケーションがパブリッシャーでプレビューされるか、FeedItem に表示されるかに基づいて表示方法を決定できます。payload 属性は、ユーザが構成コンポーネントで選択した JavaScript オブジェクトです。

<aura:component implements="lightning:availableForChatterExtensionRenderer">
    
    <div class="container">
        <a target="_blank" href="{!v.payload.url}">
            <div class="{! (v.variant == 'FEED' ? 'itemContainerBorder' : '') + ' itemContainer'}">
                <div class="itemLeft">
                    <img class="itemIcon" src="{!v.payload.icon}"></img>
                </div>
                <div class="itemRight">
                    <div class="itemTitle">{!v.payload.title}</div>
                    <div class="itemSubtitle">{!v.payload.subtitle}</div>
                    <div class="itemDescription">Case Number: {!v.payload.caseNo}</div>
                </div>
            </div>
        </a>
    </div>

</aura:component>

Capricorn では、variant FEED を使用してどの CSS クラスを使用するか決定します。FEED を使用して、Salesforce にリッチパブリッシャーアプリケーションを FeedItem に表示するよう指示します。パブリッシャーにアプリケーションを表示するには、variant PREVIEW を使用します。ペイロード情報が表示するケースを示します。この例では、ペイロードは静的です。サーバ側 Apex コントローラを使用して、ライブの動的情報をレンダラコンポーネント内に取得することもできます。

以下は、ペイロードがパブリッシャー内のプレビュー (PREVIEW) としてどのように表示されるかを示します。

リッチパブリッシャーアプリケーションペイロードのプレビュー

以下は、ペイロードが最終的な表示されたフィード項目 (FEED) でどのように表示されるかを示します。

フィード項目で公開されたリッチパブリッシャーアプリケーションペイロード

ステップ 3.ワークベンチでリッチパブリッシャーアプリケーションを作成する

Lightning コンポーネントを作成し、fileAsset ID を取得したので、ワークベンチでリッチパブリッシャーアプリケーションを作成する準備ができました。

ワークベンチに移動し、ChatterExtension オブジェクトを挿入します ([Workbench (ワークベンチ)] > [Data (データ)] > [Insert (挿入)] > [ChatterExtension])。次に、すべてのコンポーネント値を ChatterExtension 項目に関連付けます。

ヒント

ヒント

コンポーネント値を取得する方法の 1 つとして、[Setup (設定)] に移動し、「Lightning Components」(Lightning コンポーネント) を検索します。リストされたコンポーネントをクリックしてその詳細を表示します。ブラウザの URL からコンポーネント ID をコピーします。

ChatterExtension オブジェクト

  • 構成コンポーネントの Lightning コンポーネント ID を指定します。
  • モーダルヘッダーのテキストを追加します。
  • アプリケーションアイコン (フィードパブリッシャーに表示されるアイコン) のフロート表示テキストを追加します。
  • アプリケーションアイコンの fileAsset ID を指定します。
  • 表示コンポーネントの Lightning コンポーネント ID を指定します。
  • [Type (種類)] に、「Lightning」と入力します。現在、Lightning が唯一の使用可能な種別です。
メモ

メモ

トランスレーションワークベンチでヘッダーとフロート表示テキストをローカライズできます。

ステップ 4.コミュニティでリッチパブリッシャーアプリケーションを有効にする

すべての準備ができたら、Capricorn チームはアプリケーションをコミュニティのフィードパブリッシャーに追加します。エクスペリエンスワークスペースの [管理] ワークスペースを使用して最大 5 個のリッチパブリッシャーアプリケーションをコミュニティに追加できます。

  1. エクスペリエンスワークスペースに移動して、[管理] タイルをクリックします。
  2. ナビゲーション列で、[リッチパブリッシャーアプリケーション] をクリックします。
  3. [選択可能なアプリケーション] で最大 5 個のアプリケーションを選択し、[選択済みアプリケーション] 列に移動します。

    [管理] ワークスペースのリッチパブリッシャーアプリケーション

  4. パブリッシャーでのアイコンの順序を設定するには、選択済みアプリケーションをリストの上または下に移動します。
  5. [保存] をクリックします。