アクティビティ

条件付きコンポーネント

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

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

Simple
高度な条件

シンプルな条件

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

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

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

高度な条件

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

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

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

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

チュートリアル

シンプルな条件

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

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

高度な条件

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

[フォームを作成] アクティビティでフォームデザイナーを開きます。
コンポーネントをフォームにドラッグアンドドロップします。この例では、以下をドラッグアンドドロップします。
1. 2 つのチェックボックス コンポーネント、 1 つの数コンポーネント、1 つのテキストフィールドコンポーネント
  各コンポーネントのフィールドキーに注意してください。条件ロジックを作成するには、これらのフィールドキーが必要です。
数コンポーネントの [条件] タブに移動します。
[高度な条件] をクリックして [JavaScript] セクションに移動します。
条件を作成する場合は、show 変数を使用し、等号 = 記号を使用してこの変数に条件を割り当てます。data.field_key_component 変数を使用して、他のフォームコンポーネントのデータにアクセスします。
この例では、数コンポーネントを表示するために、次のスクリプトを入力します。
```
show = (data.checkbox1 === true && data.checkbox === true)show = (data.checkbox1 === true && data.checkbox === true)
```
特定の条件でコンポーネントを非表示にする場合は、感嘆符 ! を等号 = 記号の後かつ条件の前に配置します。
この例では、数コンポーネントを非表示にするために、次のスクリプトを入力します。
```
show = !(data.checkbox1 === true && data.checkbox === true)show = !(data.checkbox1 === true && data.checkbox === true)
```
7. コンポーネントを保存します。