条件付きコンポーネント

動的なフォームにするには、フォーム コンポーネントの [条件] タブを使用できます。そこで、実行時に表示する条件を適用できます。次の 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)
   

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

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