活动

高级逻辑

使用表单设计器的“ 逻辑 ” 选项卡，您可以创建条件和高级逻辑脚本，以更改所选表单组件的状态或行为。

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

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

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

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

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

操作

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

有四种类型的逻辑操作：

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

教程

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

在“创建表单”活动中打开“表单设计器”。
将组件拖放到表单中。请注意其字段键，因为您可能会在高级逻辑中使用这些字段键。
导航到要更改的组件（即应在其上执行 Actions 的组件）的逻辑选项卡。
单击“ +添加逻辑”。您可以根据需要添加任意数量的逻辑。
输入逻辑的名称。
在“ 触发器 ” 窗格中，选择要在逻辑中使用的触发器类型。可用的类型包括 “简单”、“ Javascript”、“ JSON 逻辑”和“ 事件”。设置触发操作所需的条件。
在“ Actions ” 窗格中，单击“ +添加 Actions” 。您可以根据需要添加任意数量的 Actions ，所有操作均由对它们进行分组的逻辑触发。
输入操作的名称。
选择要使用的操作类型。可用的类型包括 “属性”、“ 值”、“ 合并组件架构”和 “自定义操作”。设置操作的所需效果。
完成后，单击“ 保存 Actions”。
要保存逻辑，请单击“ 保存逻辑” 。

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

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

动态汇总两个文本字段

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

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

在“创建表单”活动中打开“表单设计器”。
将三个 文本字段 组件拖放到表单中。
将其中两个文本字段组件命名为 A 和 B，将第三个命名为 Total。在高级逻辑中使用字段键时，请注意其字段键。

（可选）您可以将 Total 文本字段组件设置为“ 已禁用”，以便企业用户无法与其交互。
转到 Total 字段组件的“ 逻辑 ”选项卡。
添加一个逻辑并将其命名为“动态求和”。
选择 Javascript 触发器类型，然后在“ 文本区域 ”部分输入以下脚本：
```
result = true;
return result;result = true;
return result;
```
上面的代码片段检测文本字段中是否有任何更改，即用户与文本字段的交互，并触发 Actions 以汇总字段。
添加一个操作并将其命名为“a+b”。
选择“ 值 ”操作类型，然后在“ 值 (Javascript) ”部分输入以下脚本：
```
result = (+data.a) + (+data.b);
return result;result = (+data.a) + (+data.b);
return result;
```
将 a 和 b 替换为文本字段组件的字段键值。
保存操作和逻辑。
保存组件。

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

动态隐藏字段

触发器类型：简单 Actions 类型：属性

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

在“创建表单”活动中打开“表单设计器”。
拖放两个“ 文本字段 ”组件。
将其中一个文本字段组件命名为 Parent field，将另一个命名为 Child field。在高级逻辑中使用字段键时，请注意其字段键。
转到 Child field 组件的“ 逻辑 ” 选项卡。
添加一个逻辑并将其命名为“隐藏输入”。
选择“ 简单” 触发器类型。

6.1 从“ When”表单组件 下拉菜单中，选择 Parent field ({parentField_field_key})。

6.2 在“ 包含值 ” 字段中，输入“隐藏”。

上述配置检测用户是否在父字段中输入字符串“hide”，并触发隐藏子字段的操作。
添加一个操作并将其命名为“隐藏”。
选择“ 属性 Actions ” 类型。

8.1 从“ 组件属性” 下拉菜单中，选择 “隐藏”。

8.2. 从“ 设置状态 ” 下拉菜单中，选择 “True”。
保存操作和逻辑。
保存组件。

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

动态更改标题颜色

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

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

先决条件：

创建一个 CSS 文件，其中包含文本字段标签的新颜色，并在“创建表单”活动的“ 本地 CSS文件路径”活动属性中引用该文件。

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

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

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

在“创建表单”活动中打开“表单设计器”。
拖放一个“ 文本字段 ”组件和一个 “单选” 组件。在高级逻辑中使用字段键时，请注意其字段键。
在文本字段组件的“ 显示” 选项卡中，设置默认的 “ 自定义 CSS 类”。例如，要将红色设置为文本字段的默认颜色，请使用 textFieldLabel-red 类。必须根据上述先决条件在 CSS 文件中定义该类。
对于“ 单选” 组件，为颜色 green 和 red添加两个值。
转到“ 文本字段 ”组件的“逻辑” 选项卡。
添加一个逻辑，并将其命名为“颜色选择”。
选择“ 简单” 触发器类型。

7.1 从“ When”表单组件 下拉菜单中，选择 Radio ({radio_field_key})。

7.2 在“ 具有值 ” 字段中，输入“green”。

上述配置检测用户是否从单选选项中选择“绿色”，并触发操作以更改文本字段标签颜色。
添加一个操作，并将其命名为“使用 css 更改颜色”。

选择“ 合并架构组件 Actions ” 类型，然后输入以下代码片段：

return { customClass: "textFieldLabel-green" }return { customClass: "textFieldLabel-green" }

保存操作和逻辑。
保存组件。

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

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

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

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

在“创建表单”活动中打开“表单设计器”。
拖放一个“ 文本字段 ”组件和一个“ 按钮 ”组件。在高级逻辑中使用组件字段键时，请注意这些字段键。
在按钮组件的“显示” 选项卡中：

3.1. 将按钮组件标记为 Change value to "Default"

3.2. 将按钮“ Actions ” 设置为“ 单击”

3.3. 选中“用于本地更新” 复选框。

3.4 在“ 更新数据逻辑 ”部分中输入以下代码片段。每次用户单击按钮时，这都会发出名为 resetTextField 的事件。
```
instance.emit('resetTextField', {});instance.emit('resetTextField', {});
```
3.5. 保存按钮组件。
转到文本字段组件的“ 逻辑 ” 选项卡。
添加一个逻辑并将其命名为“reset”。
选择“ 事件触发器类型”。
在“ 事件名称 ” 字段中，输入单击按钮时发出的事件的名称。（即 resetTextField）。

上述配置会检测用户何时单击 Change value to "Default" 按钮，并将文本字段的现有内容替换为“默认”。
添加一个操作并将其命名为“默认”。
选择“ 自定义操作” 类型。
在“ 自定义操作 (Javascript) ”部分中输入以下代码段。
```
return "Default"return "Default"
```
保存操作和逻辑。
保存组件。

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

根据用户输入显示组件

触发器类型： JSON 逻辑 Actions 类型：属性

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

在“创建表单”活动中打开“表单设计器”。
拖放一个“ 文本字段 ”组件和一个“ HTML 元素 ”组件。在高级逻辑中使用组件字段键时，请注意这些字段键。
在文本字段组件的“ 显示” 选项卡中：

3.1 将文本字段组件标记为“输入“自动演示””。

3.2. 添加说明 “必须完全匹配（区分大小写）”，以指示用户必须根据需要输入文本。

3.3. 保存文本字段组件。
在 HTML 元素组件的“ 显示” 选项卡中：

4.1. 在“ 内容 ” 部分中，引用要显示的图像。例如： <img href="https://picsum.photos/200/300" />。

4.2. 选中“ 隐藏” 复选框，以在默认情况下隐藏图像而不显示。 4.3. 保存 HTML 元素组件。
转到 HTML 元素组件的逻辑选项卡。
添加一个逻辑并将其命名为“用户输入”。
选择 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"
  ]
}
```
上述配置会检测用户何时输入“演示”，然后仅将 HTML 元素的 “隐藏” 属性的值设置为 False，从而显示相应的 HTML 内容。
添加一个操作，并将其命名为“显示图像”。
选择“ 属性 Actions ” 类型。

10.1. 从“ 组件属性” 下拉菜单中，选择 “隐藏”。

10.2. 从“ 设置状态 ” 下拉菜单中，选择“ False”。
保存操作和逻辑。
保存组件。