Orbeon Forms：如何在Custom CSS Classes字段用IF/THEN/ELSE设置背景色

先说明白：控件的Custom CSS Classes字段本身不支持直接写IF/THEN/ELSE这类逻辑代码，得靠「动态添加CSS类+提前定义样式」的方式来实现你的需求。

步骤1：给控件添加标识 #

• 给单选按钮组设置一个唯一ID，比如priority-radio-group
• 给需要改变背景色的文本控件添加一个基础类，比如priority-text

步骤2：编写CSS样式 #

在页面的样式区域（比如<style>标签或自定义样式文件）添加以下代码：

/* 高优先级红色背景 */
.priority-text.high-priority {
    background-color: #ff4444;
}
/* 中优先级琥珀色背景 */
.priority-text.medium-priority {
    background-color: #ffbb33;
}
/* 低优先级绿色背景 */
.priority-text.low-priority {
    background-color: #00C851;
}

步骤3：用JavaScript监听单选按钮变化 #

在页面的脚本区域添加以下代码，监听单选按钮的选择事件，动态给文本控件添加对应类：

// 获取单选按钮组和目标文本元素
const radioGroup = document.getElementById('priority-radio-group');
const targetText = document.querySelector('.priority-text');

// 监听单选按钮切换事件
radioGroup.addEventListener('change', function(e) {
    // 先移除所有优先级类
    targetText.classList.remove('high-priority', 'medium-priority', 'low-priority');
    
    // 根据选中的值添加对应类
    switch(e.target.value) {
        case 'HIGH':
            targetText.classList.add('high-priority');
            break;
        case 'MEDIUM':
            targetText.classList.add('medium-priority');
            break;
        case 'Low':
            targetText.classList.add('low-priority');
            break;
    }
});

低代码平台特殊处理 #

如果是在Power Apps、SharePoint表单这类低代码平台操作，平台一般自带动态类绑定功能：

• 直接在文本控件的「Custom CSS Classes」字段写表达式即可（不同平台语法有差异），比如Power Apps中可以这样写：

  If(Radio.Selected.Value = "HIGH", "high-priority", Radio.Selected.Value = "MEDIUM", "medium-priority", "low-priority")
  

  这种情况无需额外编写JS，只要提前定义好对应的CSS类就能生效。

内容的提问来源于stack exchange，提问作者Pete Atkin