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

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

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

概要:

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

Requirement 概要:

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

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

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

使用ケース

シナリオ:

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

設定方法:

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

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



コード:

  1. const WIDGET_API_NAME = 'Calculator';

  3. // 手順 1: flyout を作成し、設定します
  4. ZDK.Client.createFlyout('myFlyout', {
  5. header: WIDGET_API_NAME,
  6. animation_type: 3,
  7. height: '400px',
  8. width: '420px',
  9. top: 'center',
  10. right: '0'
  11. });

  13. // 手順 2: flyout ウィジェットを開き、価格項目の値を渡します
  14. ZDK.Client.getFlyout('myFlyout').開く({ api_name: WIDGET_API_NAME, 種類: 'widget'});

  16. let response = ZDK.Client.getFlyout('myFlyout').通知({ data: ZDK.Page.getField('価格').getValue() }, { wait: 真 });

  18. // 手順 3: 応答を受信した後に flyout を閉じます
  19. ZDK.Client.getFlyout('myFlyout').閉じる();

  21. // 手順 4: 応答内容で価格項目を更新します
  22. ZDK.Page.getField('価格').setValue(response.incrementedNumber);


ウィジェットコード内で、flyout の待機とクライアントスクリプトからのデータ受領のために以下のイベントリスナーを登録してください。

  1. Zoho.embeddedApp.オン('NotifyAndWait', function (data) {
  2. console.log('Client Script同期フライアウト通知', data);
  3. console.log('Data受領済み:', data.data);

  5. // 受信したデータを保存（例：元の内容、価格）
  6. result.値 = data.data.data;

  8. // レスポンスを返すためのFlyout IDを保存
  9. FLYOUT_ID = data.id;
  10. }

ウィジェットからClient Scriptへレスポンスを返すには、Zoho CRM JS SDKメソッドを使用できます。

  1. ZDK.Client.sendResponse(FLYOUT_ID, {
  2. incrementedNumber: result.値 // 実際に計算した結果に置き換えてください
  3. });

ウィジェットのUIには「送信するResult」ボタンを追加し、クリック時に値を計算してSDKメソッドを呼び出し、Client Scriptへ返却します。


例 ワークフロー :
  1. ユーザーが価格項目を編集します。
  2. クライアントスクリプトが電卓ウィジェットをフライアウトで開きます。
  3. ウィジェットは元の価格内容を受け取り、計算を実行します。
  4. 「送信する」をクリックすると、ウィジェットが計算された値を返します。
  5. 価格項目は新しい値で自動的に更新されます。


動作デモ:



 
上記の例で使用されているウィジェットのデータ元コードはこちらからご利用いただけます。


関連リンク
Quoteカスタム Solution 作成者 Francis (Vishnu) | Zoho パートナーサポート

ご不明点がございましたら、どうぞご遠慮なくパートナー-サポート@zohocorp.comまでご連絡ください。
また、「Europe and イギリス partners」の皆様は、パートナー-サポート@eu.zohocorp.comまでご連絡いただきますようお願いいたします。