はじめに
前回のSalesforce Canvasの導入の続きにです。
キャンバスアプリケーションイベント実装について検証しようと思います。
Salesforce（Visualforce）⇄ キャンバスアプリケーション（Webサイト） 間でイベント実装します。
Visualforce-Canvasから公開された指定のイベントを登録
前提条件
- キャンバスアプリケーションの設定をした接続アプリケーションがあること
- キャンバスアプリケーションとして呼び出すWebサイトがあること
イベント実装でできること
キャンバスアプリケーション側（埋め込みサイト）の方からSalesforceに〇〇したよ！とか〇〇お願いのメッセージ、レコードの外部ID等を通知したりすることができます。
以下のように実装すると、Salesforce側に {status : 'Completed'}という情報を渡すことができます。
Sfdc.canvas.client.publish(sr.client,
{name : "mynamespace.statusChanged", payload : {status : 'Completed'}});
Sfdc.canvas.controller.subscribe([
{
name: "mynamespace.statusChanged",
onData: function (event) {
console.log("Subscribed to custom event ", event);
}
}
]);
});
逆も可能でVisualforce→キャンバスアプリケーションみたいにすることもできます。
こんな感じ!
ではやってみる
キャンバスアプリケーション→Visualforceパターン
キャンバスアプリケーション： イベントの作成
コードは前回に引き続きGitHubに公開しているもので必要のないものを省きながら編集します。
GitHubへのコード反映をVisualforce分終わってないので、
終了次第記事に追記します。
以下のコードに修正しました。
<html>
<head>
<script src="./js/canvas-all.js"></script>
</head>
<body>
<h1>埋め込みテスト</h1>
<script>
Sfdc.canvas.client.refreshSignedRequest(function(data) {
if (data.status === 200) {
const signedRequest = data.payload.response;
console.log(signedRequest);
const part = signedRequest.split('.')[1];
const obj = JSON.parse(Sfdc.canvas.decode(part));
console.log(obj);
+ Sfdc.canvas.client.publish(obj.client, {
+ name: "mynamespace.Hello",
+ payload: {
+ status: 'Hello'
+ }
+ });
}
});
</script>
</body>
</html>
mynamespace.Helloというイベントを作成し、Helloという文字列を渡します。
Visualforce： イベントの登録
Visualforceでキャンバスアプリケーションから公開された指定のイベントを登録するには
- controller.jsの読み込み
- subscribeの実装
の2点が必要です。
<apex:page>
+ <script type="text/javascript" src="/canvas/sdk/js/55.0/controller.js"></script>
+ <script>
+ Sfdc.onReady(function () {
+ Sfdc.canvas.controller.subscribe([
+ {
+ name: "mynamespace.Hello",
+ onData: function (event) {
+ alert(event.status)
+ }
+ }
+ ]);
+ });
+ </script>
<apex:canvasApp developerName="canvasAppTest" maxHeight="infinite" width="100%" entityFields="Phone, Name" parameters="{message:'キャンバステスト'}"
/>
</apex:page>
確認
Helloという文字を渡すことができました！
Visualforceパターン→キャンバスアプリケーションパターン
ボタンを押すと、キャンバスアプリケーションにイベントが通知されるようにします。
Visualforce： イベントの作成
Visualforceでイベントを作成するには
- controller.jsの読み込み
- publishの実装
<apex:page>
+ <script type="text/javascript" src="/canvas/sdk/js/55.0/controller.js"></script>
+ <script>
+ function publishStatus() {
+ Sfdc.canvas.controller.publish({
+ name: 'mynamespace.world',
+ payload: {
+ status: 'world'
+ },
+ });
+ }
+ </script>
+ <apex:form >
+ <apex:commandLink onclick="publishStatus()" value="Hello" />
+ </apex:form>
<apex:canvasApp developerName="canvasAppTest" maxHeight="infinite" width="100%" entityFields="Phone, Name" parameters="{message:'キャンバステスト'}"
/>
</apex:page>
mynamespace.worldというイベントを作成し、worldという文字列を渡します。
キャンバスアプリケーション：イベントの登録
<html>
<head>
<script src="./js/canvas-all.js"></script>
</head>
<body>
<h1>埋め込みテスト</h1>
<script>
Sfdc.canvas.client.refreshSignedRequest(function(data) {
if (data.status === 200) {
const signedRequest = data.payload.response;
console.log(signedRequest);
const part = signedRequest.split('.')[1];
const obj = JSON.parse(Sfdc.canvas.decode(part));
console.log(obj);
+ Sfdc.canvas.client.subscribe(obj.client, {
+ name: 'mynamespace.world',
+ onData: function (event) {
+ alert(event.status)
+ }
+ });
}
);
});
</script>
</body>
</html>
確認
ボタンを押すと...
無事受信できました。
最後に
キャンバスアプリケーションとVisualforceでの通信ができました！
互いのフォームイベントを感知したり等いろいろ使い道はありそうです。
次は、Salesforce Canvas + jsforceでSalesforceのレコードの取得・作成をしようと思います。
参考