条件付きコンポーネント

動的なフォームにするには、フォーム コンポーネントの [条件] タブを使用できます。そこで、実行時に表示する条件を適用できます。次の 2 種類の条件を適用できます。

• シンプルな条件
• 高度な条件

シンプルな条件

このチュートリアルでは、フォーム コンポーネントでシンプルな条件を作成する方法を説明します。

1. Studio でフォーム ファイルを開き、フォームにコンポーネントを追加します。
   この例では、次のコンポーネントを追加します。

   • 2 つのチェックボックス
   • 1 つの数
   • 1 つのテキスト フィールド
2. テキスト フィールド コンポーネントの [条件] タブに移動し、[シンプル] セクションに移動します。
   1. このコンポーネントを表示 - ドロップダウン リストから [True] を選択します。これにより、テキスト フィールド コンポーネントを表示する条件が作成されます。コンポーネントを非表示にする場合は、[False] を選択します。
   2. 条件として使用するフォーム コンポーネント - ドロップダウン リストから数コンポーネントを選択します。
   3. 条件として使用する値 - テキスト フィールドを表示する条件とする数コンポーネントの値を入力します。
   
   

   

   
   
3. コンポーネントを保存します。

このシンプルな条件の動作を確認するには、以下のビデオをご覧ください。

高度な条件

このチュートリアルでは、フォーム コンポーネントで高度な条件を作成する方法を説明します。

重要: 高度な条件はシンプルな条件よりも優先されます。

1. Studio でフォーム ファイルを開き、フォームにコンポーネントを追加します。シンプルな条件を試すために使用したものと同じフォーム ファイルを使用できます。
   この例では、次のコンポーネントを追加します。

   • 2 つのチェックボックス
   • 1 つの数
   • 1 つのテキスト フィールド
2. 数コンポーネントの [条件] タブに移動します。
3. [高度な条件] をクリックして [JavaScript] セクションに移動します。
4. 実行時に条件を表示する場合は、条件を Boolean 型変数 show で始めます。data 変数とプロパティ名を使用して、他のフォーム コンポーネントのデータにアクセスします。

   この例では、数コンポーネントを表示するために、次のスクリプトを入力します。

   show = (data.checkbox1 === true && data.checkbox === true)

   
   

   

   
   

特定の条件でコンポーネントを非表示にする場合は、感嘆符 ! を等号 = 記号の後かつ条件の前に配置します。

高度な条件の動作を確認するには、以下のビデオをご覧ください。