动态更改标题颜色

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

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

先决条件：在表单的“自定义 CSS”属性字段中添加包含文本字段新颜色的 CSS 类。

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

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

在“自定义 CSS”属性字段中引用 CSS 类后，请按照以下步骤设计表单：

1. 添加一个“文本字段”组件和一个“单选”组件。在高级逻辑中使用这些值时，请注意其“属性名称” 。

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

   

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

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

5. 添加一个逻辑并将其命名为 "color selection"。

6. Select the Simple trigger type.

   1. 从“表单组件”下拉菜单中，选择Radio ({radio_field_key}) 。
   2. 在“具有值”字段中，输入"green" 。

   上述配置会检测用户是否从单选选项中选择了 "green" ，并触发 Actions 更改文本字段标签颜色。

7. 添加操作并将其命名为 "change color using css"

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

   return { customClass: "textFieldLabel-green" }
   

9. 保存操作和逻辑。

10. 保存组件。

在 Runtime，如果业务用户选择 "green" 单选按钮，则文本字段的标签将变为绿色。 如果用户选择 "red" 单选按钮，则文本字段的标签将变为红色。