アクティビティ

高度な論理

フォームデザイナーの [論理] タブでは、条件や高度な論理スクリプトを作成し、それによって、選択したフォームコンポーネントのステートや動作を変更できます。

高度な論理を使用すると、フォームコンポーネントのコントロール、外観、操作感を動的に変更できます。

フォームの論理は、トリガーとアクションの 2 つの部分で構成されます。

トリガー: 論理のトリガーは、アクションが発生する条件です。たとえば、チェックボックスオプションが選択されている場合にのみ、特定のフォームフィールドを表示できます。この場合、チェックボックスオプションがトリガーになり、フォームフィールドの表示がアクションになります。

論理トリガーには次の 4 種類があります。

トリガーの種類	説明	例
Simple	1 つのトリガーフォームコンポーネントと値を定義します。
JavaScript	フォームコンポーネントまたはフォームデータの JavaScript 論理を指定します。ループや動的な動作など、複雑なロジックを作成するには、JavaScript 構文を使用します。
JSON 論理	フォームコンポーネントまたはフォームデータの JSON 論理を指定します。 JavaScript を使用できない場合に推奨されます。ループや動的な動作をサポートすることはできません。
イベント	コンポーネントイベントを定義します。対応するコンポーネントによってこのイベントが生成されると、目的のアクションがトリガーされます。

操作

論理アクションは、設定した論理条件 (トリガー) に基づいて発生させるフォームコンポーネントの動作です。たとえば、特定の年齢のユーザーに対してボタンをアクティブ化できます。この場合、年齢範囲がトリガーになり、ボタンのアクティブ化がアクションになります。

論理アクションには、次の 4 種類があります。

アクションの種類	説明	例
プロパティ	トリガーは、利用可能なコンポーネントのプロパティ (ツールチップ、説明、CSS クラスなど) のいずれかを変更します。利用可能なプロパティは、トリガーコンポーネントの種類によって異なります。
値 (Value)	トリガーによって、対応するコンポーネントの値を変更します。アクションは JavaScript 構文を使用して定義する必要があります。
コンポーネントスキーマをマージ	トリガーによって、コンポーネント JSON で見つかったコンポーネントスキーマパラメーターを変更します。変更できるスキーマパラメーターを確認するには、対応するコンポーネント上でホバーして [JSON を編集] をクリックします。 1 つのアクション内で複数のパラメーターを変更できます。
カスタムアクション	JavaScript のトリガーの種類を定義する場合と同じように、JavaScript 構文を使用してカスタムアクションを定義します。

チュートリアル

高度な論理を設定するには、以下の手順を実行します。

[フォームを作成] アクティビティでフォームデザイナーを開きます。
コンポーネントをフォームにドラッグアンドドロップします。フィールドキーに注意してください。フィールドキーは高度な論理で使用する場合があります。
変更するコンポーネント (アクションを実行するコンポーネント) の [論理] タブに移動します。
[+ 論理を追加] をクリックします。論理はいくつでも追加できます。
論理の名前を入力します。
[トリガー] ペインで、論理で使用するトリガーの種類を選択します。利用可能な種類は、[シンプル]、[Javascript]、[JSON 論理]、[イベント] です。アクションをトリガーするために必要な条件を設定します。
[アクション] ペインで、[+ アクションを追加] をクリックします。アクションはいくつでも追加できます。すべてのアクションは、そのアクションをグループ化する論理によってトリガーされます。
アクションの名前を入力します。
使用するアクションの種類を選択します。利用可能な種類は、[プロパティ]、[値]、[コンポーネントスキーマをマージ]、[カスタムアクション] です。アクションで必要とされる効果を設定します。
すべての設定が完了したら、[アクションを保存] をクリックします。
論理を保存するには、[論理を保存] をクリックします。

上記の手順は、一般的にあらゆる種類のトリガーまたはアクションに適用されます。詳しい手順については、特定のトリガーとアクションの種類それぞれの例を示した個別のチュートリアルをご覧ください。

トリガーの種類: Javascript & アクションの種類: 値 2 つのテキストフィールドを動的に合計する
トリガーの種類: シンプル & アクションの種類: プロパティ フィールドを動的に非表示にする
トリガーの種類: シンプル、アクションの種類: コンポーネントスキーマをマージ タイトルの色を動的に変更する
トリガーの種類: イベント & アクションの種類: カスタムアクション イベントを使用してフォームフィールドを既定値に設定する
トリガーの種類: JSON 論理、アクションの種類: プロパティ ユーザー入力に基づいてコンポーネントを表示する

2 つのテキストフィールドを動的に合計する

トリガーの種類: JavaScript アクションの種類: 値

この高度な論理は、対応するテキストフィールドをユーザーが操作したかどうかという条件に基づいて、2 つのテキストフィールドを合計します。

[フォームを作成] アクティビティでフォームデザイナーを開きます。
3 つの テキストフィールド コンポーネントをフォームにドラッグアンドドロップします。
テキストフィールドコンポーネントの 2 つに A および B という名前を付け、3 つ目のコンポーネントに Total という名前を付けます。フィールドキーに注意してください。フィールドキーは高度な論理で使用します。

任意で、Total テキストフィールドコンポーネントを無効に設定し、ビジネスユーザーが操作できないようにすることができます。
[Total] フィールドコンポーネントの [論理] タブに移動します。
論理を追加し、「dynamic sum」という名前を付けます。
[Javascript] のトリガーの種類を選択し、[テキスト領域] セクションに以下のスクリプトを入力します。
```
result = true;
return result;result = true;
return result;
```
上記のスニペットは、テキストフィールドに変更があるかどうか (つまり、ユーザーがテキストフィールドを操作したかどうか) を検出し、フィールドを合計するアクションをトリガーします。
アクションを追加し、「a+b」という名前を付けます。
[値] のアクションの種類を選択し、[値 (Javascript)] セクションに以下のスクリプトを入力します。
```
result = (+data.a) + (+data.b);
return result;result = (+data.a) + (+data.b);
return result;
```
a と b をテキストフィールドコンポーネントのフィールドキーの値に置き換えます。
アクションと論理を保存します。
コンポーネントを保存します。

実行時に、ビジネスユーザーがテキストフィールド [A] および [B] を操作すると、A と B の合計が [Total] フィールドに自動的に入力されて表示されます。

フィールドを動的に非表示にする

トリガーの種類: シンプル アクションの種類: プロパティ

この高度な論理は、ユーザーが別のフォームフィールド (Parent field) に「hide」と入力すると、フォームフィールド (Child field) を非表示にします。

[フォームを作成] アクティビティでフォームデザイナーを開きます。
2 つの テキストフィールド コンポーネントをドラッグアンドドロップします。
一方のテキストフィールドコンポーネントに Parent field という名前を付け、もう一方に Child field という名前を付けます。フィールドキーに注意してください。フィールドキーは高度な論理で使用します。
Child field コンポーネントの [論理] タブに移動します。
論理を追加し、「hide input」という名前を付けます。
[シンプル] のトリガーの種類を選択します。

6.1. [条件として使用するフォームコンポーネント] ドロップダウンメニューから、Parent field ({parentField_field_key}) を選択します。

6.2. [条件として使用する値] フィールドに、「hide」と入力します。

上記の設定により、ユーザーが親フィールドに文字列「hide」を入力した場合を検出し、子フィールドを非表示にするアクションをトリガーします。
アクションを追加し、「hide」という名前を付けます。
[プロパティ] のアクションの種類を選択します。

8.1. [コンポーネントのプロパティ] ドロップダウンメニューから、[非表示] を選択します。

8.2. [ステートを設定] ドロップダウンメニューから、[True] を選択します。
アクションと論理を保存します。
コンポーネントを保存します。

実行時に、ビジネスユーザーが親フィールドに「hide」と入力すると、子フィールドが非表示になります。

タイトルの色を動的に変更する

トリガーの種類: シンプル アクションの種類: コンポーネントスキーマをマージ

この高度な論理は、ユーザーがリストから目的の色を選択すると、テキストフィールドコンポーネントのラベルの色を変更します。この変更は、カスタム CSS ファイルを使用して適用されます。

前提条件:

テキストフィールドラベルの新しい色を含む CSS ファイルを作成し、これを [フォームを作成] アクティビティの [ローカル CSS ファイルパス] アクティビティプロパティで参照します。

たとえば、以下の CSS スニペットには、ラベルの色を緑または赤に設定するクラスが含まれています。

.textFieldLabel-green 
{
   color : green;
}
.textFieldLabel-red 
{
   color : red;
}.textFieldLabel-green 
{
   color : green;
}
.textFieldLabel-red 
{
   color : red;
}

CSS ファイルを [フォームを作成] のプロパティで参照したら、以下の手順に従ってフォームを設計します。

[フォームを作成] アクティビティでフォームデザイナーを開きます。
1 つのテキストフィールド コンポーネントと、1 つのラジオ コンポーネントをドラッグアンドドロップします。フィールドキーに注意してください。このフィールドキーは高度な論理で使用します。
テキストフィールドコンポーネントの [表示] タブで、既定のカスタム CSS クラスを設定します。たとえば、赤をテキストフィールドの既定の色に設定するには、textFieldLabel-red クラスを使用します。このクラスは、上記の前提条件の CSS ファイルで定義されている必要があります。
ラジオ コンポーネントで、色 green および red の 2 つの値を追加します。
テキストフィールド コンポーネントの [論理] タブに移動します。
論理を追加し、「color selection」という名前を付けます。
[シンプル] のトリガーの種類を選択します。

7.1. [条件として使用するフォームコンポーネント] ドロップダウンメニューから、Radio ({radio_field_key}) を選択します。

7.2. [条件として使用する値] フィールドに、「green」と入力します。

上記の設定により、ユーザーがラジオオプションから [green] を選択した場合を検出し、テキストフィールドのラベルの色を変更するアクションをトリガーします。
アクションを追加し、「change color using css」という名前を付けます。
[コンポーネントスキーマをマージ] のアクションの種類を選択して、以下のスニペットを入力します。
```
return { customClass: "textFieldLabel-green" }return { customClass: "textFieldLabel-green" }
```
アクションと論理を保存します。
コンポーネントを保存します。

実行時に、ビジネスユーザーが [green] ラジオボタンを選択すると、テキストフィールドのラベルが緑になります。「red」ラジオボタンを選択すると、テキストフィールドのラベルは赤になります。

イベントを使用してフォームフィールドを既定値に設定する

トリガーの種類: イベント アクションの種類: カスタムアクション

この高度な論理は、ユーザーがボタンをクリックすると、テキストフィールドの内容を変更します。このボタンをクリックするとイベントが生成され、そのイベントに基づいてテキストフィールドの内容が既定のテキストに変更されます。

[フォームを作成] アクティビティでフォームデザイナーを開きます。
1 つのテキストフィールド コンポーネントと、1 つのボタン コンポーネントをドラッグアンドドロップします。コンポーネントのフィールドキーに注意してください。このフィールドキーは高度な論理で使用します。
ボタンコンポーネントの [表示] タブで、以下の手順を実行します。

3.1. ボタンコンポーネントを Change value to "Default" としてラベル付けします。

3.2. ボタンの [アクション] を [クリック] に設定します。

3.3. [ローカル更新に使用] チェックボックスをオンにします。

3.4. [データロジックを更新] セクションに、次のスニペットを入力します。これは、ユーザーがボタンをクリックするたびに resetTextField というイベントを出力します。
```
instance.emit('resetTextField', {});instance.emit('resetTextField', {});
```
3.5. ボタンコンポーネントを保存します。
テキストフィールドコンポーネントの [論理] タブに移動します。
論理を追加し、「reset」という名前を付けます。
[イベント] のトリガーの種類を選択します。
[イベント名] フィールドに、ボタンをクリックしたときに生成されるイベントの名前を入力します (つまり、resetTextField)。

上記の設定により、ユーザーが [Change value to "Default"] ボタンをクリックしたときに検出し、テキストフィールドの既存のコンテンツを「Default」に置き換えます。
アクションを追加し、「default」という名前を付けます。
[カスタムアクション] のアクションの種類を選択します。
[カスタムアクション (Javascript)] セクションに、次のスニペットを入力します。
```
return "Default"return "Default"
```
アクションと論理を保存します。
コンポーネントを保存します。

実行時に、ビジネスユーザーが [Change value to "Default"] ボタンをクリックすると、resetTextField イベントが生成されます。このトリガーはイベントをリッスンし、既存のテキストフィールドの内容を「Default」に置き換えます。

ユーザー入力に基づいてコンポーネントを表示する

トリガーの種類: JSON 論理 アクションの種類: プロパティ

この高度な論理は、必要なテキストをユーザーが入力すると、HTML コンポーネント (この場合は画像) の内容を表示します。

[フォームを作成] アクティビティでフォームデザイナーを開きます。
1 つのテキストフィールド コンポーネントと、1 つの HTML 要素コンポーネントをドラッグアンドドロップします。コンポーネントのフィールドキーに注意してください。フィールドキーは高度な論理で使用します。
テキストフィールドコンポーネントの [表示] タブで、以下の手順を実行します。

3.1. テキストフィールドコンポーネントに「Type "Show me"」とラベル付けします。

3.2. [説明] に「Must be an exact match (case sensitive)」と追加し、ユーザーが必要に応じてテキストを入力する必要があることを示します。

3.3. テキストフィールドコンポーネントを保存します。
HTML 要素コンポーネントの [表示] タブで、以下の手順を実行します。

4.1.[コンテンツ] セクションで、表示する画像を参照します。例: <img href="https://picsum.photos/200/300" />

4.2.画像を既定で非表示にするには、[非表示] チェックボックスをオンにします。 4.3.HTML 要素コンポーネントを保存します。
HTML 要素コンポーネントの [論理] タブに移動します。
論理を追加し、「user input」という名前を付けます。
[JSON 論理] のトリガーの種類を選択します。
[JSON 論理] セクションに次のスニペットを入力します。{text_field_component_field_key} は、テキストフィールドコンポーネントに設定したフィールドキーの値に置き換えます。
```
{
  "===": [
    {
      "var": "data.{text_field_component_field_key}"
    },
    "Show me"
  ]
}{
  "===": [
    {
      "var": "data.{text_field_component_field_key}"
    },
    "Show me"
  ]
}
```
上記の設定では、ユーザーが「Show me」と入力した場合を検出し、その場合にのみ、HTML 要素の [非表示] プロパティの値を [False] に設定して、対応する HTML コンテンツを表示します。
アクションを追加し、「display image」という名前を付けます。
[プロパティ] のアクションの種類を選択します。

10.1. [コンポーネントのプロパティ] ドロップダウンメニューから、[非表示] を選択します。

10.2. [ステートを設定] ドロップダウンメニューから、[False] を選択します。
アクションと論理を保存します。
コンポーネントを保存します。