ビジネスケース2：ユーザー入力に基づくフィールドの自動入力にクライアントスクリプトを使用する

ビジネスケース2：ユーザー入力に基づくフィールドの自動入力にクライアントスクリプトを使用する

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

フォームを設計する際、ユーザーの回答に応じて異なる項目セットを表示したい場合があります。このような項目の自動表示は、クライアントスクリプトで処理できます。
 

業務シナリオ

Helenは、Qntrlを使用して製品の登録フォームを作成します。Helenの要件は、学生、会社員、経営者といったユーザーの職業に応じて、関連する項目を表示することです。
 
学生には割引が適用されます。一方、その他の会社員には、個人として製品を購入するか、組織全体で購入するかを選択するオプションが表示されます。Helenは、Qntrlを使用して項目を自動表示するこのプロセスを自動化したいと考えています。

解決方法

Qntrlでは、クライアントスクリプトを使用して項目を自動表示できます。
  1. Helenはフォームを作成し、新規ユーザーの職業をデータとして取得するためのドロップダウン項目を追加します。
  2. ユーザーが選択したオプションに基づいて、クライアントスクリプトにより関連する項目が表示されます。

設定例  

ステップ1：ボードの作成

新しいボード「ユーザー登録ボード」を作成し、ユーザーが選択する職業に応じて表示するすべての項目を追加します。
  1. ドロップダウン項目［ユーザーの職業］を追加し、ドロップダウンの選択肢として［学生］、［会社員］、［自分の事業を運営している］を追加します。
  2. ［学校名または大学名］を取得する単一行項目と、［割引を利用しますか？］を表示するラジオボタン項目を作成します。これらの項目は、ユーザーが職業として［学生］を選択した場合に表示できます。
  3. ［会社名］と［組織での役職］を取得する単一行項目を2つ作成します。これらの項目は、ユーザーが職業として［会社員］を選択した場合に表示できます。
  4. ［組織名］と［組織向けにQntrlを購入しますか？］を取得する単一行項目を作成します。これらの項目は、ユーザーが職業として［自分の事業を運営している］を選択した場合に表示できます。


フォームを作成したら、ブループリントの設計、権限の設定、ボードの公開に進みます。

ステップ2：クライアントスクリプトの作成

Helenのプロセスには2つのクライアントスクリプトが必要です。1つはユーザーが選択するまで最初にすべての項目を非表示にするスクリプト、もう1つはユーザーが選択したときに関連する項目を表示するスクリプトです。
 

スクリプト1：ユーザー登録時の初期項目の非表示

  1. 新しいスクリプトを作成し、名前「ユーザー登録時の項目の非表示」を入力します。
  2. ［ボード］のドロップダウンで［ユーザー登録ボード］を選択します。
  3. 新しいカードが追加されたときにスクリプトを実行するため、［実行場所］として［新しいカードを追加］を選択します。
  4. フォームの読み込み時に特定の項目を非表示にするため、［実行トリガー］として［onLoad］を選択します。
  5. 以下のスクリプトをスクリプトエディターにコピーして貼り付け、パラメーター名を置き換えます。
    1. パラメーター名を確認するには、スクリプトエディターの右上にある［？］アイコンを使用できます。
  6. スクリプトの準備ができたら、［公開］します。
サンプルスクリプト

async function onLoad(forpage) {
current.Layout.Fields.<select-Name-of-your-school-or-college-parameter-こちら>.hide();
current.Layout.Fields.<select-Would-you-like-to-avail-a-discount-parameter-こちら>.hide();
current.Layout.Fields.<select-Name-of-your-company-parameter-こちら>.hide();
current.Layout.Fields.<select-Your-designation-in-the-company-parameter-こちら>.hide();
current.Layout.Fields.<select-Name-of-your-organization-parameter-こちら>.hide();
current.Layout.Fields.<select-Would-you-like-to-purchase-Qntrl-for-your-org-parameter-こちら>.hide();
return;
}


スクリプト2：ユーザー登録時の項目の自動表示

  1. 新しいスクリプトを作成し、名前「ユーザー登録時の項目の自動表示」を入力します。
  2. ［ボード］のドロップダウンで［ユーザー登録ボード］を選択します。
  3. 新しいカードが追加されたときにスクリプトを実行するため、［実行場所］として［新しいカードを追加］を選択します。
  4. ユーザーの職業が入力されたときにスクリプトで項目を自動表示できるように、［実行トリガー］として［onChange］を選択します。このオプションを選択すると、右パネルに項目のドロップダウンが表示されます。ここで、更新時にスクリプトをトリガーする項目を選択できます。
  5. 以下のスクリプトをスクリプトエディターにコピーして貼り付け、パラメーター名を置き換えます。
    1. パラメーター名を確認するには、スクリプトエディターの右上にある［？］アイコンを使用できます。
  6. スクリプトの準備ができたら、［公開］します。
サンプルスクリプト

async function onChange(forpage,oldVal,newVal,executeOnLoad){
if(executeOnLoad){
return;
}
var val = current.Job.getValue(current.Layout.Fields.<select-User-occupation-parameter-こちら>.id);
if ('Student' === val.value.display_name)
{
current.Layout.Fields.<select-Name-of-your-school-or-college-parameter-こちら>.show();
current.Layout.Fields.<select-Would-you-like-to-avail-a-discount-parameter-こちら>.show();
current.Layout.Fields.<select-Name-of-your-company-parameter-こちら>.hide();
current.Layout.Fields.<select-Your-designation-in-the-company-parameter-こちら>.hide();
current.Layout.Fields.<select-Name-of-your-organization-parameter-こちら>.hide();
current.Layout.Fields.<select-Would-you-like-to-purchase-Qntrl-for-your-org-parameter-こちら>.hide();
 
}
else if ('Working Professional' === val.value.display_name)
{
current.Layout.Fields.<select-Name-of-your-school-or-college-parameter-こちら>.hide();
current.Layout.Fields.<select-Would-you-like-to-avail-a-discount-parameter-こちら>.hide();
current.Layout.Fields.<select-Name-of-your-company-parameter-こちら>.show();
current.Layout.Fields.<select-Your-designation-in-the-company-parameter-こちら>.show();
current.Layout.Fields.<select-Name-of-your-organization-parameter-こちら>.hide();
current.Layout.Fields.<select-Would-you-like-to-purchase-Qntrl-for-your-org-parameter-こちら>.hide();
 
}
else if ('I run my own business' === val.value.display_name)
{
current.Layout.Fields.<select-Name-of-your-school-or-college-parameter-こちら>.hide();
current.Layout.Fields.<select-Would-you-like-to-avail-a-discount-parameter-こちら>.hide();
current.Layout.Fields.<select-Name-of-your-company-parameter-こちら>.hide();
current.Layout.Fields.<select-Your-designation-in-the-company-parameter-こちら>.hide();
current.Layout.Fields.<select-Name-of-your-organization-parameter-こちら>.show();
current.Layout.Fields.<select-Would-you-like-to-purchase-Qntrl-for-your-org-parameter-こちら>.show();
}
}


ステップ3：カードの追加

フォーム、ブループリント、クライアントスクリプトの準備ができたら、新しいカードを作成してスクリプトをテストできます。
  1. ［ボード］に移動し、左パネルからボードを選択します。
  2. ［カードを追加］をクリックします。
  3. ［ボード］のドロップダウンから［ユーザー登録ボード］を選択します。
  4. ドロップダウンから［ユーザーの職業］を選択します。
  5. ［学生］を選択すると、以下のオプションが表示されます。
     
  6. ［会社員］を選択すると、以下のオプションが表示されます。
     
  7. ［自分の事業を運営している］を選択すると、以下のオプションが表示されます。
     

    • Related Articles

    • Bridgeのユースケース：Bridgeを使用したリモートデータベースとの接続

      お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 多くの組織では、ファイアウォールを使用してリモートデータベースを保護しています。これらのファイアウォールを経由してリモートデータベースにアクセスする方法をお探しの場合は、Bridgeが役立ちます。 ...

    • フィールドの更新

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

    • ボードとは

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

    • ファイル

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

    • 設定環境

      お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 組織の詳細は、［設定］セクションで管理できます。組織名、所有者、URL、日付と時刻の設定、メールドメインなどの組織設定をこちらで設定できます。 アクセス権限 設定にアクセスできるのは組織の所有者のみです。 組織名と所有者の変更 組織名を変更するには、 ...