条件付きコンポーネント

フォーム デザイナーの [条件] タブでは、フォーム内のコンポーネントに条件を設定して、コンポーネントを表示または非表示にすることができます。

[条件] タブには、次の 2 つのセクションがあります。

• Simple
• 高度な条件

シンプルな条件

[条件] タブの [シンプル] セクションでは、コンポーネントを、別のコンポーネントの値に基づいて表示または非表示にすることができます。

[シンプル] セクションは、次の 3 つのフィールドで構成されます。

1. このコンポーネントを表示 - このドロップダウン リストから以下を選択します。

   • コンポーネントを表示する条件を設定する場合は [True] を選択します。
   • コンポーネントを非表示にする条件を設定する場合は [False] を選択します。
2. 条件として使用するフォーム コンポーネント - このドロップダウン リストから、条件として機能させるフォーム内のコンポーネントを選択します。

3. 条件として使用する値 - コンポーネントを表示または非表示にする条件となる値を入力します。

   
   

   

   
   

高度な条件

[高度な条件] セクションでは、JavaScript コードを使用して複数の条件を組み合わせることができます。

高度な論理は、シンプルな条件ロジックの結果を上書きします。

[JavaScript コード] セクションに、カスタムの JavaScript コードを入力します。

show 変数には、true または false のいずれかの値を指定する必要があります。data 変数は、フォーム内の他のコンポーネントに API キーを使用してアクセスするために使用されます。

チュートリアル

シンプルな条件

シンプルな条件ロジックを設定するには、以下の手順を実行します。

1. [フォームを作成] アクティビティでフォーム デザイナーを開きます。

2. コンポーネントをフォームにドラッグ アンド ドロップします。この例では、以下をドラッグ アンド ドロップします。

   1. 2 つのチェックボックス コンポーネント、 1 つの数コンポーネント、1 つのテキスト フィールドコンポーネント

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

高度な条件

高度な条件ロジックを設定するには、以下の手順を実行します。

1. [フォームを作成] アクティビティでフォーム デザイナーを開きます。

2. コンポーネントをフォームにドラッグ アンド ドロップします。この例では、以下をドラッグ アンド ドロップします。

   1. 2 つのチェックボックス コンポーネント、 1 つの数コンポーネント、1 つのテキスト フィールドコンポーネント

      各コンポーネントのフィールド キーに注意してください。条件ロジックを作成するには、これらのフィールド キーが必要です。
3. 数コンポーネントの [条件] タブに移動します。
4. [高度な条件] をクリックして [JavaScript] セクションに移動します。
5. 条件を作成する場合は、show 変数を使用し、等号 = 記号を使用してこの変数に条件を割り当てます。data.field_key_component 変数を使用して、他のフォーム コンポーネントのデータにアクセスします。

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

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

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

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

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

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

サンプル ワークフロー

ワークフロー全体を確認するか、今後の参考にするには、XAML の例をダウンロードしてください。