Zoho CRMサブフォームでクライアントスクリプトを使用して商品リスト価格を自動入力する方法

Zoho CRMサブフォームでクライアントスクリプトを使用して商品リスト価格を自動入力する方法

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

Requirement 概要

顧客は、同じタブに保存されている選択済み価格Book（Lookup項目）に基づき、カスタムタブ（例：Pre-注文）のサブフォーム内の商品リスト価格を自動的に更新・表示したいと考えています。この処理は、サブフォームで商品を選択した際に実行されます。

権限 & 利用可能性

-> 管理Extensibility権限を持つユーザーは、クライアントスクリプトの設定・構成が可能です。
-> 管理テスト環境権限を持つユーザーは、テスト環境を管理できます。

  1. クライアントスクリプトをさまざまな場所で展開

例：

-> ページのOn_Load/On_Save/On_Edit、項目のOn_Type/On_Change、サブフォーム処理、Blueprint処理、リスト表示処理など
-> コマンド／ショートカットキー（CRM内のどこからでも任意のタイミングでスクリプトをトリガー可能）
-> カスタムボタン（最近の強化）

Notes詳細については、以下のヘルプ参照をご覧ください： クライアントスクリプト処理の詳細。

  1. クライアントスクリプトの作成方法：

クライアントスクリプトは2通りの方法で追加できます：

1. 設定ページから：

Zoho CRMの設定（⚙️）>> Developer Hub >> Client Script >> 新規Scriptへ進みます。



-> スクリプトに適切な名前と説明を入力してください
-> カテゴリー 詳細-
  1. 要件に応じてカテゴリーを選択します。タブ - 処理経由でトリガーされます || Commandsでは、Command Palletやショートカットキーでトリガーされます。
  2. スクリプトを追加したいタブを選択します。（例：Lead、連絡先など）
  3. スクリプトを特定のページに適用するためにPageを選択します。（例：作成、編集、複製する、詳細、Listなど）
  4. レイアウト（Layout）を選択します。（例：スタンダードまたはカスタムレイアウト）
-> Event 詳細-
処理の種類を選択します - 項目イベント、ページイベント、サブフォームイベント
  1.       項目 Event-> 項目とイベントを選択します（例：名項目のonChange）。
  2.       Page Event-> ページとイベントを選択します（例：作成ページのonLoad）。
  3.       Subform Event-> サブフォームとイベントを選択します（例：onCellChange）。


2. 詳細／List／作成／編集／複製する ページからタブ内のデータを操作

-> Zoho CRMで希望するタブを選択し、そのタブ内の任意のデータのList、作成、詳細、編集、複製するページを開きます。 例として、Leadの作成ページを参照してください。
-> ページ（作成／編集／複製するなど）の場合、ページ右端にある「Client Script」をクリックし、スクリプトを追加してください。
-> カテゴリー 詳細はシステムによって自動入力されます。クライアントスクリプトのその他の詳細事項（名前、説明、Event 詳細など）を入力してください。その後、「次へ」をクリックし、スクリプトをClient Script IDEのコードエディタに追加します。最後に「保存」と「閉じる」をクリックします。

詳細ページからClient Scriptを追加する方法:



リスト/作成/編集/複製など、さまざまなページからClient Scriptを追加する方法:


使用例

ある企業では、従業員がZoho CRMでカスタムデータ（例：Pre-注文）を作成できるようになっています。これらのデータは主に営業チームやサポートスタッフがリードの精査や見積もり作成時に入力します。各データには価格 bookへのルックアップ項目が含まれており、社内チームが顧客の適格性、地域、プロモーション等に応じて選択します。

顧客が購入を希望する複数の商品を追加できるサブフォームがあります。営業担当者がサブフォーム内で商品を選択すると、システムがメインデータで選択された価格 bookからlist 価格を取得し、その商品のサブフォーム内のlist 価格項目に自動で反映されるため、正しい価格帯が反映されます。

この使用例における現在の課題:

現時点では、この要件は手動でしか対応できず、価格 bookに基づいて商品のlist 価格を自動入力するオプションはありません。そのため、Client Scriptを用いたカスタムソリューションを開発しました。

設定

それでは、順番タブの作成ページで、Subform Eventトリガー（onCellChange）を用いたClient Scriptを作成します。例えば、サブフォーム内の任意のセルが更新されると、クライアントスクリプトが実行され、商品のList 価格が更新されます。

この使用例に対応するClient Scriptの設定手順は、以下の通りです。

1) 名前や説明など、基本情報を入力します。

2）カテゴリー 詳細セクションで、下記を選択してください：
* カテゴリーはタブを選択します。
* Pageは作成を選択します。
* タブはPre-注文を選択します。
* 必須のLayoutを選択してください。
3） Event 詳細セクションで、下記を選択してください：

* 種類はSubformイベントを選択します。
* 必須のSubformをドロップダウンから選択してください。
* EventはOnCellChangeを選択します。



コード

  1. console.クリア();
  2. //Subformで商品が選択された際に、Pre-注文タブからPricebookの詳細を取得
  3. if (field_name == '商品')
  4. {
  5. var pricebook = ZDK.Page.getField('価格表').getValue();
  6. log('Pricebook:',pricebook);
  7. row_no = 0;
  8. if (pricebook != null)
  9. {
  10. var pricebookID = pricebook.id;
  11. log('PricebookID:', pricebookID);
  12. var productId = 値.id;
  13. log('productId:', productId);
  14. //商品の詳細および関連するPricebook詳細を商品IDで取得する
  15. var getproduct = ZDK.Apps.CRM.商品.fetchById(productId);
  16. log('getproduct:', getproduct);
  17. var related_records = getproduct.__fetchRelatedRecords('Price_Books');
  18. log('related_records:', related_records);
  19. //Forループを使用して商品に一致するPricebookを検索し、Pre-注文サブフォーム内の商品のリスト価格を更新する
  20. if (related_records.length > 0)
  21. {
  22. for (var j = 0; j < related_records.length; j++)
  23. {
  24. var pricebookid = related_records[j].id;
  25. log('pricebookid:', pricebookid);
  26. if (pricebookid == pricebookID)
  27. {
  28. var listprice = related_records[j].list_price;
  29. log('listprice:', listprice);
  30. row_no = row_no + 1;
  31. }
  32. }
  33. }
  34. if(row_no>0)
  35. {
  36. var cell_obj = ZDK.Page.getSubform('Subform_1').getRow(index).getCell('Unit_Price_1').setValue(listprice);
  37. }
  38. }
  39. }


動作デモ — スクリーンキャスト



ヒント

-> スクリプト内で 正しい API Namesを、タブ & 項目の両方に対して使用することを確認してください。
​
-> スクリプト作成時には、各変数にlogs() || console.log()を追加し、出力を確認することでスムーズな動作を実現することを推奨します。例として、出力内容は 'Messages'タブ（Client Script IDE内）でlogs()の印刷ごとに表示できます。consoleログを表示するには、次の手順に従ってください：'ブラウザページ上で右クリック >> 検証 >> Console'
​
-> 期待した動作が行われない場合は、それぞれの出力やループを検証し、提供されているサンプルヘルプドキュメント内の各ZDK Client/CRM API メソッドの構文もクロス認証してください。

-> スクリプトに同じ処理（例：繰り返し使用される小さな関数）がある場合、Static Resourcesの利用が可能です。

各 ZDK Client/CRM APIs メソッドのサンプルスクリプト - ヘルプ 参照

スムーズな導入のために、設定を テスト環境 環境で設定・検証してから本番環境へ展開することを推奨します。


Quote
カスタム Solution 作成者 Hemanth Kumar L M | Zoho パートナー サポート


ご不明な点がございましたら、どうぞご遠慮なくパートナー-サポート@zohocorp.comまでご連絡ください。

また、ヨーロッパおよびイギリスのパートナーの皆様は、パートナー-サポート@eu.zohocorp.comまでご連絡いただきますようお願いいたします。