クライアントスクリプトを使用してZoho CRMでフライアウトモードのカスタムウィジェットを起動および同期する

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

概要:

この記事では、Zoho CRMでClient Scriptを使用してフライアウトとしてカスタムウィジェットを起動し、CRM項目からウィジェットへデータを渡し、ウィジェットのレスポンスに基づいて同じ項目を更新する方法について説明します。

Requirement 概要:

特定の使用ケースでは、Zoho CRMでユーザーが項目を編集する際にカスタムインタラクションが必要となります。例えば、データから移動せずに電卓やカスタムロジックのインターフェースを起動する場合です。Client Scriptのフライアウト構成を活用すると、専用パネル（フライアウト）でウィジェットを開き、CRMデータから情報を渡し、ウィジェットの出力に応じて項目を更新することができます。

Zoho CRMでClient Scriptをデプロイする方法:

ユーザーが価格項目を編集した際にトリガーされるClient Scriptを設定します。スクリプトの動作は以下の通りです。
フライアウトウィジェットを開く
項目の値をウィジェットに送信する
ウィジェットからのレスポンスを待機する
価格項目を返された値で更新する

使用ケース

シナリオ:

ユーザーが価格項目を編集すると、フライアウトとして電卓ウィジェットが開きます。項目の値が計算のためにウィジェットへ渡されます。ウィジェット内で新しい値が計算されると、その結果がClient Scriptへ送信され、CRM内の同じ項目が更新されます。

設定方法:

Client Script – フライアウトの作成と処理

Client Scriptを作成し、Price項目の変更時に実行する

設定 → Developer Hub → Client Scriptへ移動します。
新規Scriptをクリックします。
スクリーンショットの通り、該当するカテゴリーとイベントを選択します（イベント: 変更時、項目: 価格）。
エディタにスクリプトコードを追加します。
保存をクリックし、公開/Activateでスクリプトを有効にします。

参考用スクリーンショット:

コード:

const WIDGET_API_NAME = 'Calculator';
// 手順 1: flyout を作成し、設定します
ZDK.Client.createFlyout('myFlyout', {
header: WIDGET_API_NAME,
animation_type: 3,
height: '400px',
width: '420px',
top: 'center',
right: '0'
});
// 手順 2: flyout ウィジェットを開き、価格項目の値を渡します
ZDK.Client.getFlyout('myFlyout').開く({ api_name: WIDGET_API_NAME, 種類: 'widget'});
let response = ZDK.Client.getFlyout('myFlyout').通知({ data: ZDK.Page.getField('価格').getValue() }, { wait: 真 });
// 手順 3: 応答を受信した後に flyout を閉じます
ZDK.Client.getFlyout('myFlyout').閉じる();
// 手順 4: 応答内容で価格項目を更新します
ZDK.Page.getField('価格').setValue(response.incrementedNumber);