この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

Chatter パブリッシャーへのカスタムアプリケーションのインテグレーション (パイロット)

Chatter のリッチパブリッシャーアプリケーション API を使用して、カスタムアプリケーションを Chatter パブリッシャーに統合します。リッチパブリッシャーアプリケーションを使用すると、開発者はカスタムペイロードをフィード項目に添付できます。リッチパブリッシャーアプリケーションは、Lightning コンポーネントを使用して構成や表示を行います。インテグレーションに役立つよう、2 つの Lightning インターフェースと 1 つの Lightning イベントが用意されています。

lightning:sendChatterExtensionPayload イベントと共に、lightning:availableForChatterExtensionComposer および lightning:availableForChatterExtensionRenderer インターフェースを使用して、カスタムアプリケーションを Chatter パブリッシャーに統合し、アプリケーションのペイロードを Chatter フィードに表示します。

Chatter のリッチパブリッシャーアプリケーションは、特定の契約条件への同意が必要なパイロットプログラムを通じて一部のお客様に提供されています。リッチパブリッシャーアプリケーションは変更される可能性があり、Salesforce がドキュメント、プレスリリース、または公式声明で正式リリースを発表しない限り、正式リリースされません。特定期間内の正式リリースあるいはリリースの有無は保証できません。現在正式にリリースされている製品および機能に基づいて購入をご決定ください。

メモ

Chatter パブリッシャーと統合されたカスタムアプリケーションの例

次の例では、ビデオミーティングアプリケーション (1)、絵文字アプリケーション (2)、毎日の引用句を選択するアプリケーション (3) の 3 つのカスタムアプリケーションが統合された Chatter パブリッシャーを示します。 Chatter パブリッシャーと統合された 3 つのアプリケーション

Chatter フィード投稿のカスタムアプリケーションペイロードの例

次の例では、Chatter 投稿に含まれるカスタムアプリケーションのペイロードを示します。 Chatter 投稿のカスタムアプリケーションペイロード

次に、カスタム引用句アプリケーションが Chatter パブリッシャーにどのように統合されたのかを示します。

コンポーネントで使用されるファイル

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

次に、quotesCompose.cmp のコンポーネントマークアップを示します。

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>

次に、quotesComposeController.js のコントローラコードを示します。

1({
2	init : function(cmp, event, helper) {
3		helper.getQuote(cmp);
4	},
5    
6    getQuote: function(cmp, event, helper) {
7        helper.getQuote(cmp);
8    }
9})

次に、quotesComposeHelper.js のヘルパーコードを示します。このファイルでは、イベント lightning:sendChatterExtensionPayload (パイロット) も指定されています。

1({
2	getQuote : function(cmp) {
3        var url = "https://andruxnet-random-famous-quotes.p.mashape.com/";
4		var params = "cat=famous";
5		var xhr = new XMLHttpRequest();
6		xhr.open("POST", url, true);
7
8		//Send the proper header information along with the request
9		xhr.setRequestHeader("X-Mashape-Key", "<Put_API_key_here>");
10		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
11        xhr.setRequestHeader("Accept", "application/json");
12
13        xhr.onreadystatechange = function() {
14            if(xhr.status == 200 && xhr.response && xhr.response !== "") {
15                var res = JSON.parse(xhr.response);
16                cmp.find("quote").getElement().innerText = res.quote;
17                cmp.find("author").getElement().innerText = "--- " + res.author + " ---";
18              	var compEvent = cmp.getEvent("sendChatterExtensionPayload");
19        		compEvent.setParams({
20                    "payload" : res.quote + "|" + res.author,
21		            "extensionTitle" : "Quote from " + res.author,
22            		"extensionDescription" : res.quote
23        		});
24        		compEvent.fire();  
25            }
26		}
27        
28		xhr.send(params);
29	}
30})

次に、quotesCompose.css のスタイルを示します。

1.THIS.container {
2    display: flex;
3    flex-direction: column;
4	align-items: center;
5}
6
7.THIS .quote {
8    margin: 0.5rem;
9    text-align: center;
10    font-size: large;
11}
12
13.THIS .author {
14    padding-bottom: 1rem;
15}

lightning:availableForChatterExtensionRenderer コンポーネントで使用されるファイル

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

次に、quotesRender.cmp のコンポーネントマークアップを示します。

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>

次に、quotesRenderController.js のコントローラコードを示します。

1({
2	init : function(cmp, event, helper) {
3        var payload = cmp.get("v.payload");
4        var parts = payload.split("|");
5        cmp.set("v._quote", parts[0]);
6        cmp.set("v._author", parts[1]);
7	}
8})

次に、quotesRender.css のスタイルを示します。

1.THIS.container {
2    display: flex;
3    flex-direction: column;
4	align-items: center;
5    background: #FFFFE3;
6    border: 1px solid #E4C0B1;
7}
8
9.THIS .quote {
10    margin: 0.5rem;
11    text-align: center;
12}
13
14.THIS .author {
15    padding-bottom: 1rem;
16    font-size: smaller;
17}

これらのコンポーネントの作成後、ワークベンチに移動して組織にログインします。新しい ChatterExtension エンティティを作成します。ChatterExtension エンティティを作成する手順は、次のとおりです。

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

ワークベンチの [Data (データ)] メニューの [Insert (挿入)]

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

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

作業内容を保存して、Chatter パブリッシャーの投稿ビューおよび質問ビューにカスタムアプリケーションを表示します。

この情報はキャッシュされるため、アプリケーションがパブリッシャーに表示されるまで 15 ～ 30 分かかることがあります。

メモ

Lightning コンポーネント開発者ガイド

Chatter パブリッシャーへのカスタムアプリケーションのインテグレーション (パイロット)

Chatter パブリッシャーと統合されたカスタムアプリケーションの例