Zoho CRMでクライアントスクリプトを使用してウィジェットをバリデーションアラートとして呼び出す方法を探る
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。
Requirement 概要
Zoho CRM ユーザーは、任意のユーザーがデータに変更を加えた際に、カスタマイズされたバリデーションポップアップを表示したいと考えています。
使用する-case
乗用車会社は、インド、アメリカ、UAEなど、複数の場所に倉庫を保有しています。各場所ごとに商品配送価格を個別に案内することは困難です。そのため、ユーザーが必要な倉庫を動的に選択でき、価格はデータの該当項目に自動的に反映されます。
ここで、会社は納品先住所に基づいたバリデーション注意を表示し、ユーザーがウィジェットのポップアップ上で別の場所を動的に選択できるようにしたいと考えています。
-
これを直接実現する際の課題:
=> 現状では、ポップアップを直接表示するオプションはありません。ただし、Client Script の 'method-getInput()' を利用して、必須項目やボタン付きのポップアップを表示することは可能です。しかし、ユーザーがポップアップの内容を法人要件に合わせて必須で修正・カスタマイズすることはできません。
=> そのため、ユーザーは Zoho CRM 上で（HTML、JavaScript、CSS などを用いて）ウィジェットを作成し、Client Script から呼び出すことができます。
重要性について
- カスタマイズされたポップアップによるバリデーションはユーザー体験を向上させます
- エラー防止
- データ品質と正確性の向上
- 内部法人プロセスの迅速化
権限と利用可否
->「管理 Extensibility」権限を持つユーザーは、Client ScriptおよびWidgetの設定・管理が可能です。
-> 「管理 テスト環境」権限を持つユーザーは、テスト環境の管理やこの使用ケースのテストが行えます。
設定
法人の利用ケースは各社の要件によって異なるため、基本的な理解のために、ウィジェットを使って簡単なカスタマイズポップアップを作成し、任意のページ（例：作成／編集／詳細等）のデータ内でどのように呼び出せるかを確認します。
Step1- Zoho CRMでのウィジェット作成
-> 初めてウィジェットを作成する場合、ユーザーが一からサンプルウィジェットを作成する流れと基本的なポイントを解説します。
-> インストール後、ユーザーは案内に従って最初のプロジェクトを作成できます。
-> 最初のプロジェクトを作成したら、アプリフォルダ内に初期設定で「widget.html」という名前のウィジェット用HTMLファイルが見つかります。ユーザーは、以下のサンプルHTMLスクリプトをコピー＆ペーストできます。
- ウィジェットHTMLサンプルスクリプト：
- <リンク rel='stylesheet' href='./stylee.css' />
- <件名>シンプル Calculator
- <本文>
-
Delivery エラー
-
申し訳ありませんが、配送処理中に問題が発生しました。
-
正しい倉庫を選択してください:
-
利用可能倉庫
- HTMLスクリプトの説明
-> Styleタグの下では、シンプルCSS折れ線グラフのコードを用いて、必須のポップアップをカスタマイズした色と形式で表示しています。
-> 本文タグの下では、すべてのヘッダー、段落、ボタンにクラスを割り当てて追加しています。また、「Result」テキスト項目と「続ける」ボタンに「id」タグを付与し、HTMLスクリプト内のFlyoutコードで使用できるようにしています。
-> Scriptタグの下では、Flyoutを介してClient Scriptへ戻る通信を行うコードがあります。
-> まず、両方のResultテキストと続けるボタンを取得します。その後、addEventListener('クリック', transportData)を使用して結果データを戻します。ここで「transportData」は、Flyoutへレスポンスを送信する関数です。
- Zoho CRMでウィジェットを作成する
これで、ユーザーはCRM内でWidgetをボタン種類として作成し、Client Scriptから呼び出すことができます。
Zoho CRMの設定（⚙️）>> Developer Hub >> Widgetsへ移動します。
新規作成するWidgetを選択し、下記のスクリーンショットに従って設定を選択してください：
メモ:
-> 種類は必ず「Button」を選択してください。
-> Hostingは「Zoho」を選択し、完了したウィジェットファイルを郵便番号として取得し、アップロードしてください。
-> Indexページにはhtmlファイル名を指定します。例：最初のプロジェクトを作成する際、htmlファイル名が「widget.html」の場合、ユーザーはindexとして「/widget.html」と指定できます。
ステップ2- クライアントスクリプトの作成
次に、「受注書」タブの編集ページで、onSaveトリガーに基づくページイベント用のクライアントスクリプトを作成します。例として、ユーザーが編集ページで「保存」ボタンをクリックすると、スクリプトが実行され、バリデーションに基づいてエンドユーザーにポップアップが表示されます。
この使用ケースのクライアントスクリプトを設定するには、以下の手順に従ってください。
1）基本情報として、名前および説明を、スクリプトの目的に基づいて入力してください。
2）カテゴリー 詳細セクションでは、次の項目を選択してください。
* カテゴリー：タブ
* Page：編集
* タブ：受注書
* 必須のLayoutを選択してください。
* Page：編集
* タブ：受注書
* 必須のLayoutを選択してください。
3）Event 詳細セクションでは、次の項目を選択してください。
* 種類：Page Event
* イベントとしてonSave
コード
- console.クリア();
- var field_obj = ZDK.Page.getField('倉庫');
- var 倉庫 = field_obj.getValue();
- if (倉庫 == 'India') {
- console.log('入力されました');
- var WIDGET_API_NAME = 'Popup1';
- ZDK.Client.createFlyout('myFlyout', { header: 'Delivery エラー 注意', animation_type: 1, close_icon: 無効, height: '385px', width: '240px', left: 'center' });
- ZDK.Client.getFlyout('myFlyout').開く({ api_name: WIDGET_API_NAME, 種類: 'widget' });
- console.log('フライアウト作成済み');
- var response = ZDK.Client.getFlyout('myFlyout').通知({ data: ZDK.Page.getField('倉庫').getValue() }, { wait: 真 });
- ZDK.Client.getFlyout('myFlyout').閉じる();
- console.log('??? ', response);
- console.log(response.incrementedNumber)
- ZDK.Page.getField('倉庫').setValue(response.incrementedNumber);
- ZDK.Client.showMessage('倉庫が正常に更新されました', { 種類: 'info' });
- }
-
Client Script コード解説
-> まず、倉庫項目の値を取得し、変数（例：倉庫）に格納します。
-> 基本的なバリデーションとして、ユーザーが倉庫として「India」を選択し、保存ボタンをクリックした場合、他の倉庫を選択するように促すバリデーションエラーのポップアップが表示されます。したがって、ユーザーが「India」を選択した際には、以下の処理を行います。
Flyout メソッド
-> Flyoutは、Client Scriptを使用して制御できるフローティングユーザーインターフェースです。ユーザーは、ウィジェットをページ上の任意の場所でポップアップまたはコンポーネントとして呼び出すことができます。
-> Flyoutは、ウィジェットとClient Script間のコミュニケーションに便利です。
-> ウィジェットからの入力を待ち、CRM内の該当する項目にその内容を入力することで情報を収集できます。
-> 上記の説明の通り、flyout（つまりウェブページ上のコンポーネント）を作成し、高さやウィジェットなどを調整して適切な位置に配置します。
-> 次に、ウィジェットを作成したFlyoutコンポーネントに渡します。
-> ここでFlyoutは待機し、ウィジェットコード（上記参照）が実行されます。その後、Flyoutはウィジェットの結果テキストからデータを取得し、選択済み倉庫が保存されます。
-> 続いて、Flyoutが閉じられ、データがCRMの項目に入力されます。
-> また、ウィジェット経由でCRM項目のデータが更新された場合、最後に「倉庫が正常に更新されました」と記載されたメッセージのポップアップが表示されます。
動作デモ - スクリーンキャスト
-> ユーザーは、他のページ（リスト表示/作成/詳細など）にも同じ設定を適用できます。
-> また、ウィジェット内でHTMLやCSSを活用して詳細なカスタマイズを行い、エンドユーザーに提供することも可能です。
円滑な実装を行うために、まずテスト環境で設定を構成およびテストし、その後本番環境へデプロイすることを推奨します。
TIPS - よくあるエラーを回避する方法
-> 意図した出力を取得するため、各変数に対してlogs() または console.log() を追加し、出力を確認することをお勧めします。たとえば、'Messages'タブ内で各logs() の出力を表示できます。console logsを表示するには、「ブラウザページ上で右クリック >> 検証 >> Console」
-> 期待される機能が動作しない場合は、各出力やループを確認してください。また、提供されているサンプルのヘルプ ドキュメントに記載されている各ZDK Client/CRM APIメソッドの構文も必ずクロスチェックしてください。ZDK Client/CRM API methodは、提供されたサンプルのヘルプ ドキュメントをご参照ください。
各ZDK Client/CRM APIメソッドのサンプルスクリプト- ヘルプ 参照