-> Styleタグの下では、シンプルCSS折れ線グラフのコードを用いて、必須のポップアップをカスタマイズした色と形式で表示しています。

-> 本文タグの下では、すべてのヘッダー、段落、ボタンにクラスを割り当てて追加しています。また、「Result」テキスト項目と「続ける」ボタンに「id」タグを付与し、HTMLスクリプト内のFlyoutコードで使用できるようにしています。

-> Scriptタグの下では、Flyoutを介してClient Scriptへ戻る通信を行うコードがあります。

-> まず、両方のResultテキストと続けるボタンを取得します。その後、addEventListener('クリック', transportData)を使用して結果データを戻します。ここで「transportData」は、Flyoutへレスポンスを送信する関数です。

これで、ユーザーはCRM内でWidgetをボタン種類として作成し、Client Scriptから呼び出すことができます。

Zoho CRMの設定（⚙️）>> Developer Hub >> Widgetsへ移動します。

新規作成するWidgetを選択し、下記のスクリーンショットに従って設定を選択してください：

メモ:

-> 種類は必ず「Button」を選択してください。

-> Hostingは「Zoho」を選択し、完了したウィジェットファイルを郵便番号として取得し、アップロードしてください。

-> Indexページにはhtmlファイル名を指定します。例：最初のプロジェクトを作成する際、htmlファイル名が「widget.html」の場合、ユーザーはindexとして「/widget.html」と指定できます。

次に、「受注書」タブの編集ページで、onSaveトリガーに基づくページイベント用のクライアントスクリプトを作成します。例として、ユーザーが編集ページで「保存」ボタンをクリックすると、スクリプトが実行され、バリデーションに基づいてエンドユーザーにポップアップが表示されます。

1）基本情報として、名前および説明を、スクリプトの目的に基づいて入力してください。

2）カテゴリー 詳細セクションでは、次の項目を選択してください。

* カテゴリー：タブ
* Page：編集
* タブ：受注書
* 必須のLayoutを選択してください。

3）Event 詳細セクションでは、次の項目を選択してください。

* 種類：Page Event

* イベントとしてonSave

1. console.クリア();
2. var field_obj = ZDK.Page.getField('倉庫');
3. var 倉庫 = field_obj.getValue();
4. 
   
5. if (倉庫 == 'India') {
6. console.log('入力されました');
7. var WIDGET_API_NAME = 'Popup1';
8. ZDK.Client.createFlyout('myFlyout', { header: 'Delivery エラー 注意', animation_type: 1, close_icon: 無効, height: '385px', width: '240px', left: 'center' });
9.     
10. ZDK.Client.getFlyout('myFlyout').開く({ api_name: WIDGET_API_NAME, 種類: 'widget' });
11. console.log('フライアウト作成済み');
12. 
    
13. var response = ZDK.Client.getFlyout('myFlyout').通知({ data: ZDK.Page.getField('倉庫').getValue() }, { wait: 真 });
14. 
    
15. ZDK.Client.getFlyout('myFlyout').閉じる();
16. console.log('??? ', response);
17. 
    
18. console.log(response.incrementedNumber)
19. ZDK.Page.getField('倉庫').setValue(response.incrementedNumber);
20. 
    
21. ZDK.Client.showMessage('倉庫が正常に更新されました', { 種類: 'info' });
22. }

TIPS - よくあるエラーを回避する方法