高级逻辑

The Logic tab of the Form Designer allows you to create conditions and advanced logic scripts that can change the state or the behavior of the selected form component.

使用高级逻辑，您可以动态更改表单组件的控件、外观和风格。

表单逻辑由两部分组成：触发器和操作。

触发器逻辑触发器是发生操作的条件。例如，您可能希望仅在选中复选框选项时显示特定表单字段。在本例中，复选框选项是触发器，显示表单字段是操作。

有四种类型的逻辑触发器：

触发器类型	描述	示例
Simple	您定义一个触发表单组件和值。
Javascript	您为表单组件或表单数据提供 JavaScript 逻辑。使用 JavaScript 语法创建复杂逻辑，例如循环或动态行为。
JSON 逻辑	您为表单组件或表单数据提供 JSON 逻辑。建议在不允许使用 JavaScript 的情况下使用。无法支持循环或动态行为。
事件	您定义一个组件事件，该事件一旦由相应的组件发出，就会触发所需的操作。

操作

逻辑操作是应根据您设置的逻辑条件（即触发器）发生的表单组件行为。 例如，您可能想要为特定年龄的用户激活按钮。 在这种情况下，年龄范围是触发器，激活按钮是操作。

有四种类型的逻辑操作：

操作类型	描述	示例
属性	触发器会更改一个可用组件属性，例如工具提示、说明、CSS 类等。可用属性取决于触发组件的类型。
值	触发器会更改相应组件的值。该操作必须使用 JavaScript 语法定义。
合并组件架构	触发器会更改组件 JSON 中的组件架构参数。要查看可以更改的架构参数，请将鼠标指针悬停在相应的组件上，然后单击“编辑 JSON” 。您可以在一项操作中更改多个参数。
自定义操作	您可以使用 JavaScript 语法定义自定义操作，就像定义 JavaScript 触发器类型一样。

教程

要配置高级逻辑，请执行以下操作：

1. 在“创建表单”活动中打开“表单设计器”。
2. 将组件拖放到表单中。 请注意其字段键，因为您可能会在高级逻辑中使用这些字段键。
3. Navigate to the Logic tab of the component you want to change (i.e., the component upon which the action should take place).
4. Click +Add Logic. You can add as many logics as you want.
5. 输入逻辑的名称。
6. In the Trigger pane, select the type of trigger you want to use in your logic. The available types are Simple, Javascript, JSON Logic, and Event. Set the desired conditions to trigger the action.
7. In the Action pane, click +Add Action. You can add as many actions as you want, all triggered by the logic that groups them.
8. 输入操作的名称。
9. Select the type of action you want to use. The available types are Property, Value, Merge Component Schema, and Custom Action. Set the desired effect of your action.
10. When you are all set, click Save Action.
11. To save your logic, click Save Logic.

上述过程通常适用于任何类型的触发器或操作。 有关详细过程，请查看特定教程，其中提供了每个特定触发器和操作类型的示例

• 触发器类型： Javascript和操作类型：值动态汇总两个文本字段
• 触发器类型：简单和操作类型：属性动态隐藏字段
• 触发器类型：简单和操作类型：合并组件架构动态更改标题颜色
• 触发器类型：事件和操作类型：自定义操作使用事件将表单字段设置为默认值
• 触发器类型： JSON 逻辑和操作类型：属性根据用户输入显示组件

动态汇总两个文本字段

触发器类型： JavaScript操作类型：值

此高级逻辑根据用户与相应文本字段交互的条件汇总两个文本字段。

1. 在“创建表单”活动中打开“表单设计器”。

2. Drag and drop three Text Field components into your form.

3. 将其中两个文本字段组件命名为 A 和 B，将第三个命名为 Total。 在高级逻辑中使用字段键时，请注意其字段键。

   （可选）您可以将Total文本字段组件设置为“禁用” ，使业务用户无法与之交互。

4. Go to the Logic tab of the Total field component.

5. 添加一个逻辑并将其命名为“动态求和”。

6. Select the Javascript trigger type, and enter the following script in the Text Area section:

   result = true;
   return result;
   

   上面的代码片段检测文本字段中是否有任何更改，即用户与文本字段的交互，并触发 Actions 以汇总字段。

7. 添加一个操作并将其命名为“a+b”。

8. Select the Value action type, and enter the following script in the Value (Javascript) section:

   result = (+data.a) + (+data.b);
   return result;
   

   将 a 和 b 替换为文本字段组件的字段键值。

9. 保存操作和逻辑。

10. 保存组件。

在运行时，如果业务用户与文本字段 A 和 B进行交互，则 Total 字段将自动填充，并显示 A 和 B 的总和。

动态隐藏字段

触发器类型：简单操作类型：属性

当用户在另一个表单字段（即 Parent field）中输入“隐藏” 时，此高级逻辑将隐藏表单字段（即 Child field）。

1. 在“创建表单”活动中打开“表单设计器”。
2. Drag and drop two Text Field components.
3. 将其中一个文本字段组件命名为 Parent field，将另一个命名为 Child field。 在高级逻辑中使用字段键时，请注意其字段键。
4. Go to the Logic tab of the Child field component.
5. 添加一个逻辑并将其命名为“隐藏输入”。
6. Select the Simple trigger type.
   1. 从“表单组件”下拉菜单中，选择Parent field ({parentField_field_key}) 。
   2. 在具有值字段中，输入“hide”。上述配置将检测用户是否在父字段中输入了字符串“hide”，并触发操作以隐藏子字段。
7. 添加一个操作并将其命名为“隐藏”。
8. Select the Property action type.
   1. 从“组件属性”下拉菜单中，选择“隐藏” 。
   2. 从设置状态下拉菜单中，选择True 。
9. 保存操作和逻辑。
10. 保存组件。

在运行时，如果业务用户在父字段中输入“隐藏”，则子字段将变为隐藏状态。

动态更改标题颜色

触发器类型：简单操作类型：合并组件架构

当用户从列表中选择所需颜色时，此高级逻辑会更改文本字段组件的标签颜色。 使用自定义 CSS 文件应用此更改。

先决条件：

Create a CSS file containing the new color for the text field label and reference it in the Create Form activity, in the LocalCSSFilePath activity property.

例如，下面的 CSS 代码片段包含一个将标签颜色设置为绿色或红色的类：

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

在“创建表单”属性中引用 CSS 文件后，请按照以下步骤设计表单：

1. 在“创建表单”活动中打开“表单设计器”。

2. Drag and drop one Text Field component and one Radio component. Pay attention to their field keys, as you use those in your advanced logic.

3. 在 文本字段组件 的“显示”选项卡中，设置默认的“自定义 CSS 类” 。例如，要将红色设置为文本字段的默认颜色，请使用textFieldLabel-red类。必须在上述先决条件中的 CSS 文件中定义该类。

   

4. For the Radio component, add two values for the colors green and red.

5. Go to the Logic tab of the Text Field component.

6. 添加一个逻辑，并将其命名为“颜色选择”。

7. Select the Simple trigger type.

   1. 从“表单组件”下拉菜单中，选择Radio ({radio_field_key}) 。
   2. 在具有值字段中，输入“绿色”。上述配置可检测用户是否从单选选项中选择“绿色”，并触发操作以更改文本字段标签颜色。

8. 添加一个操作，并将其命名为“使用 css 更改颜色”。

9. Select the Merge Schema Component action type and enter the following snippet:

   return { customClass: "textFieldLabel-green" }
   

10. 保存操作和逻辑。

11. 保存组件。

在运行时，如果业务用户选择“绿色”单选按钮，则文本字段的标签将变为绿色。 如果用户选择“红色”单选按钮，则文本字段的标签将变为红色。

使用事件将表单字段设置为默认值

触发器类型：事件操作类型：自定义操作

当用户单击按钮时，此高级逻辑会更改文本字段的内容。 该按钮会发出一个事件，根据该事件，文本字段内容将更改为默认文本。

1. 在“创建表单”活动中打开“表单设计器”。

2. Drag and drop one Text Field component and one Button component. Pay attention to the components field keys, as you use those in your advanced logic.

3. 在按钮组件的“显示” 选项卡中：

   1. 将按钮组件标记为 Change value to "Default"
   2. 将按钮“操作”设置为“单击” 。
   3. 选中“用于本地更新” 复选框。
   4. 在“更新数据逻辑”部分输入以下代码片段。这会在用户每次单击按钮时发出名为resetTextField事件。

      instance.emit('resetTextField', {});
      

   5. 保存按钮组件。

4. Go to the Logic tab of the text field component.

5. 添加一个逻辑并将其命名为“reset”。

6. Select the Event trigger type.

7. In the Event Name field, enter the name of the event emitted when clicking the button. (i.e., resetTextField).

   上述配置会检测用户何时单击 Change value to "Default" 按钮，并将文本字段的现有内容替换为“默认”。

8. 添加一个操作并将其命名为“默认”。

9. Select the Custom Action action type.

10. Input the following snippet in the Custom Action (Javascript) section.

    return "Default"
    

11. 保存操作和逻辑。

12. 保存组件。

在运行时，如果业务用户单击 Change value to "Default" 按钮，则会发出 resetTextField 事件。 触发器侦听事件并将现有文本字段内容替换为“默认”。

根据用户输入显示组件

触发器类型： JSON 逻辑操作类型：属性

当用户输入所需文本时，此高级逻辑会显示 HTML 组件的内容（在本例中为图像）。

1. 在“创建表单”活动中打开“表单设计器”。

2. Drag and drop one Text Field component and one HTML Element component. Pay attention to the components field keys, as you use those in your advanced logic.

3. In the Display tab of the text field component:

   1. 将文本字段组件标记为“Type "Show me"”。
   2. 添加说明“必须完全匹配（区分大小写）”，以告知用户必须按要求输入文本。
   3. 保存文本字段组件。

4. In the Display tab of the HTML element component:

   1. 在“内容”部分中，引用要显示的图像。例如： <img href="https://picsum.photos/200/300" /> 。
   2. 选中“隐藏”复选框，以默认隐藏图像。
   3. 保存 HTML 元素组件。

5. Go to the Logic tab of the HTML element component.

6. 添加一个逻辑并将其命名为“用户输入”。

7. Select the JSON Logic trigger type.

8. Input the following snippet in the JSON Logic section, and replace {text_field_component_field_key} with the field key value you set for your text field component.

   {
     "===": [
       {
         "var": "data.{text_field_component_field_key}"
       },
       "Show me"
     ]
   }
   

   The above configuration detects when the user inputs "Show me" and only then sets the value of the HTML element Hidden property to False, thus displaying the corresponding HTML content.

9. 添加一个操作，并将其命名为“显示图像”。

10. Select the Property action type.

    1. 从“组件属性”下拉菜单中，选择“隐藏” 。
    2. 从设置状态下拉菜单中，选择False 。

11. 保存操作和逻辑。

12. 保存组件。

在运行时，如果用户在文本字段中输入所需的文本，则表单将显示 HTML 内容。

示例工作流

要查看完整的工作流或供日后参考，请下载XAML 示例