如何在model-driven app表单中修改Choice选项的文本颜色及自定义图标

目前Model-Driven App的表单客户端API未提供直接修改字段显示样式的官方方法，仅能通过以下两种方式实现需求：

方案1：使用Power Apps Component Framework (PCF)控件（官方推荐） #

该方案为微软官方支持的自定义表单控件实现方式，不会因为平台版本更新失效，适配所有客户端访问场景：

• 新建PCF项目，选择字段类型匹配Choice对应的数据类型
• 在控件渲染逻辑中判断选项值，若为Red则渲染红色文字+红色圆形图标
• 将开发完成的PCF控件打包部署到当前Dataverse环境
• 进入表单编辑界面，将il_statuscolor字段的默认控件替换为自定义PCF控件即可

方案2：表单加载后操作DOM（轻量快速，非官方支持） #

如果仅需要临时实现效果、不想投入成本开发PCF，可以直接在现有Web Resource的OnLoad事件中扩展DOM操作逻辑，代码示例如下：

function onFormLoad(executionContext) {
    const formContext = executionContext.getFormContext();
    const choiceText = formContext.getAttribute("il_statuscolor").getText();
    
    // 等待控件渲染完成后再操作DOM，延迟时长可根据实际加载速度调整
    setTimeout(() => {
        // 选择器需要根据当前环境的Choice控件实际DOM结构调试修改
        const choiceControlEl = document.querySelector("div[data-id='il_statuscolor.fieldControl-Lookup_results']");
        if (!choiceControlEl || choiceText !== "Red") return;
        
        // 修改文字颜色为红色
        choiceControlEl.style.color = "red";
        // 插入红色圆形前置图标
        const redIcon = document.createElement("span");
        Object.assign(redIcon.style, {
            display: "inline-block",
            width: "12px",
            height: "12px",
            borderRadius: "50%",
            backgroundColor: "red",
            marginRight: "6px",
            verticalAlign: "middle"
        });
        choiceControlEl.prepend(redIcon);
    }, 500);
}

注意事项：

• 代码中的DOM选择器需要你打开浏览器开发者工具自行调试，匹配当前环境的控件结构
• 该方案属于非官方支持的实现，平台每次版本更新都可能修改DOM结构导致代码失效，需要定期维护调整，不建议在核心业务场景长期使用

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