特定のページでZoho CRMのセクションを動的に表示または非表示にする方法

特定のページでZoho CRMのセクションを動的に表示または非表示にする方法

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

Requirement 概要

Zoho CRM ユーザーが、UI をシンプルにしユーザー体験を向上させるために、特定のページ（作成、編集、複製する、または 詳細ページなど）でのみ、特定のレイアウトセクションを隠すことを希望しています。

使用例

-> ユーザーが金融関連の法人（例：銀行や保険会社）を運営しています。会社は顧客の個人情報、金融取引、銀行口座の詳細、機密性の高い税金情報などを取り扱い、これらの情報は各セクションに保存されます。
-> 通常、ユーザーはデータ作成時に顧客情報のみを入力し、その他の情報はその後のフォローアップで入力します。そのため、他の不要なセクション（例：金融取引、銀行口座の詳細など）は作成ページでのみ非表示にする必要があります。

現在の課題
現時点では、特定のページごとにセクションの表示/非表示を制御する権限ベースの機能はありません。レイアウトルール機能を利用してセクションを隠すことは可能ですが、これはすべてのページにグローバルに適用されるため、この要件には適していません。

権限 & 利用状況

Info
-> タブ カスタマイズ権限を持つユーザーは、タブレイアウトへの項目追加やレイアウトルールの管理が可能です。
-> Developer Permissionを持つユーザーは、Client Script の設定と管理が可能です。
-> 管理 テスト環境権限を持つユーザーは、テスト環境の管理が可能です。

Solution - 手順-by-手順 実装ガイド

-> この要件を満たしユーザーインターフェースを向上させるため、Zoho CRM の複数の標準機能（レイアウトルール、Client Script、ワークフロールールなど）を活用し、指定ページ上の特定セクションを隠します。

作成/編集/複製する ページでのセクション非表示

作成/編集/複製するページでセクションを非表示にするには、以下の技術コンポーネントを使用します。

Info
技術コンポーネント
  1. レイアウトルール
  2. クライアントスクリプト
  3. ワークフロー Rule（詳細を表示するページのセクション表示用）

STEP1- レイアウト内のCheckbox項目でセクションの表示設定を制御

必須タブのレイアウト（例：リード、連絡先など）にCheckbox項目（名前：表示セクション）を追加します。



Info
ユーザーにカスタム項目を表示したくない場合は、項目詳細の編集画面で全権限に対して非表示（表示しない）に設定できます。

STEP2- レイアウトルールの作成

次の手順で移動します：設定（⚙️）＞カスタマイズ＞Kiosk studio＞Kioskを作成。
​
追加したCheckbox項目に基づき、必須タブの各セクションを表示／非表示にするレイアウトルールを作成します。



STEP3- クライアントスクリプトの作成

次の手順で移動します：設定（⚙️）＞Developer Hub＞Client Script＞新規Script。
スクリプトを追加する際は、「作成ページ → 必須タブ・レイアウトを選択 → 処理の種類は Page Event→ イベントは onLoad を選択してください。

Client Scriptを使用して、追加したCheckbox項目を「表示専用」に設定し、「作成ページ」のロード時に項目を「未選択」に更新します。これにより、作成ページのみでセクションが非表示になります。



サンプルクライアントスクリプト

  1. // //項目の取得
  2. var hideShowVar = ZDK.Page.getField('Show_Section');
  3. console.log('hideeee', hideShowVar);

  5. // //チェックボックス項目を選択済みに更新
  6. hideShowVar.setValue(無効);

  8. // //初期設定で項目を表示専用にする
  9. hideShowVar.setReadOnly(真);

このように、ユーザーがデータを保存（作成ページから）すると、詳細ページへリダイレクトされ、該当セクションが表示されます。これを制御するために、ワークフローRuleを追加で使用して、チェックボックス項目を「Not 選択済み」に更新し、詳細ページでセクションが表示されるようにします。

STEP4- ワークフローRuleの作成

Zoho CRMの設定（⚙️）>> 自動化 >> ワークフローへ移動します。
必須タブ用にワークフローを追加し、「トリガーを作成/編集または繰り返し有効」-> いいえ 条件-> 操作を項目の更新に設定します。




Info
作成、編集、または複製ページで特定のセクションを表示または非表示にしたい場合のみ、ワークフローRuleが必要です。

全体設定デモ - Screencast


​

全体の動作デモ - スクリーンキャスト


詳細ページ内セクションの非表示 - スタンダードビュー

詳細ページ内のセクションを非表示にするには、以下の技術コンポーネントを使用します。

STEP1- レイアウトにセクション表示制御用のチェックボックス項目を2つ追加し、更新する


-> チェックボックス項目（名前：表示Section）を必須タブのレイアウト（例：リード、連絡先など）に追加します。

-> さらに、同じレイアウト内にもう1つチェックボックス項目（名前：ForDetailPage - 自動更新を停止）を追加し、詳細ページの自動更新を制御します。



Info
カスタム項目をユーザーに表示したくない場合は、「項目詳細を編集する」で全権限に対して非表示（表示しない）として設定できます。

STEP2- レイアウトルールの作成
Zoho CRMの設定（⚙️）>> カスタマイズ >> Kiosk studio >> Kiosk作成へ進みます。
必須タブ用のレイアウトルールを作成し、上記で追加したチェックボックス項目に基づいてセクションを表示または非表示にします。



STEP3- クライアントスクリプトの作成
Zoho CRMの設定（⚙️）>> Developer Hub >> Client Script >> 新規スクリプトへ進みます。
『詳細ページ → 必須タブを選択 & Layout → 処理の種類をPage Event → EventをonLoad』用のスクリプトを追加します。

クライアントスクリプトを使用して、追加したチェックボックス項目（表示セクション）を「表示専用」に設定し、詳細ページのロード時に項目を「未選択」に更新します。これにより、作成ページのみでセクションが非表示になります。

Notes
メモ : 現在、クライアントスクリプトを通じて詳細ページに加えた更新は即時には反映されません。ユーザーがページを更新することで、申請済みの変更がデータに反映されます。

上記の制限により、同じクライアントスクリプトを用いてデータ詳細ページを自動的に更新します。これにより、ユーザーがデータ詳細ページを開くたびにスクリプトがデータを更新し、自動更新が行われます。ただし、一度だけ更新を停止する必要があります。そのため、もう一つのチェックボックス項目を使用して更新を停止します。




例：
ユーザーがデータを開くたびに、クライアントスクリプトがトリガーされ、以下のように両方のチェックボックス項目を更新します。チェックボックス2の値（未選択の場合）に基づき、ページを更新します。この方法で、ページの更新を一度だけ制御します。

チェックボックス1 : 表示セクション ---> 「未選択」
チェックボックス2 : ForDetailPage - 自動更新の停止 ---> 「選択」

サンプル クライアントスクリプト：

  1. // 現在のデータを取得
  2. var recDetail = ZDK.Apps.CRM.Testss.fetchById($Page.record_id);
  3. // console.log(recDetail);

  5. recDetail.Show_Section = 無効;
  6. recDetail.ForDetailPage_stop_automatic_reload = 真;
  7. var recUpdate = recDetail.__update();
  8. console.log('recUpdate',recUpdate);

  10. var stopField = ZDK.Page.getField('ForDetailPage_stop_automatic_reload');

  12. // // 項目を初期設定で表示専用にする
  13. stopField.setReadOnly(真);

  15. var stopFieldVal = stopField.getValue();
  16. console.log(stopFieldVal);
  17. console.log('項目 値');

  19. if (stopFieldVal == 無効) {

  21.    // 詳細ページを自動で1時間後に更新する
  22. console.log('entered');
  23. ZDK.Client.navigateTo('record_detail', { タブ: 'testss', record_id: $Page.record_id });
  24. }

詳細ページの動作デモ - スクリーンキャスト


​

Alert
スムーズな導入のために、テスト環境で設定を構成およびテストし、本番環境に展開する前に確認することを推奨します。
Idea
この使用ケースは、法人がユーザーの権限に基づいて特定のセクションを表示したい場合にも役立ちます。Client Scriptを利用して、$Crm.ユーザー メソッド（Help_Reference）でログイン中のユーザーの詳細を取得し、上記の処理を実行してセクションを非表示にできます。

今後の予定

今後、Client Scriptを用いたセクションの表示／非表示の直接サポートを計画しています。これにより、ユーザーは法人の要件に応じて、必要なページでセクションの表示設定を動的に制御できるようになります。


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

Notesまた、ヨーロッパおよびイギリスのパートナーの方は パートナー-サポート@eu.zohocorp.comまでご連絡ください。