如何在Dynamics 365表单保存事件中获取PCF控件内联CSS？

我在Dynamics 365的表单上有一个PCF控件，想要在表单保存事件中获取该控件的内联CSS。尝试了以下代码，但始终进入第一个else分支，打印“Control not found.”：

var control = formContext.getControl("myControlName"); // 我从data-id标签复制的控件名称
if (control) {

    var controlElement = document.querySelector(`[data-id='${control.getName()}-field']`);
    if (!controlElement) {
        console.log("尝试通过父容器定位DOM..."); // 打印周围HTML用于调试
        //console.log("Outer HTML:", document.body.);
        const myDiv = document.getElementById('inputField');
        const style = window.getComputedStyle(myDiv);
        console.log(style.border);
    }
    if (controlElement) {
        // 获取计算样式
        var computedStyle = window.getComputedStyle(controlElement);

        // 示例：获取特定CSS属性
        console.log("Background color:", computedStyle.backgroundColor);
        console.log("Font size:", computedStyle.fontSize);
        console.log("Width:", computedStyle.width);
        console.log("Height:", computedStyle.height);
    } else {
        console.log("Control DOM element not found.");
    }
} else {
    console.log("Control not found.");
}

问题排查与解决步骤 #

1. 修正控件名称的获取方式
   不要从data-id标签复制名称，formContext.getControl()需要传入的是PCF控件绑定的字段逻辑名称，你可以在表单设计器中查看该控件绑定的字段，复制其逻辑名称替换代码中的myControlName。

2. 确保formContext正确传递
   保存事件的函数必须正确接收执行上下文，再从中获取formContext。比如函数定义应为：

   function onSave(executionContext) {
       var formContext = executionContext.getFormContext();
       // 后续代码使用这个formContext
   }
   

3. 确认控件加载时机
   如果PCF控件是异步加载的，保存事件触发时可能还未完成加载。可以尝试延迟执行代码，比如用setTimeout：

   setTimeout(function() {
       var control = formContext.getControl("your_field_logical_name");
       // 后续逻辑
   }, 1000);
   

4. 正确定位DOM元素
   PCF控件的DOM结构可能和你预期的${control.getName()}-field格式不符，建议通过浏览器开发者工具查看实际DOM结构，找到包含控件的容器。也可以用控件自带的getContainer()方法获取宿主容器，再查找内部元素：

   var controlContainer = control.getContainer();
   // 根据实际DOM结构调整选择器
   var controlElement = controlContainer.querySelector("[data-id='your-actual-data-id']");
   

修正后的示例代码 #

function onSave(executionContext) {
    var formContext = executionContext.getFormContext();
    // 替换为PCF控件绑定的字段逻辑名称
    var control = formContext.getControl("your_field_logical_name"); 
    if (control) {
        var controlContainer = control.getContainer();
        if (controlContainer) {
            // 自定义选择器，根据实际DOM结构修改
            var controlElement = controlContainer.querySelector(".pcf-control-inner");
            if (controlElement) {
                var computedStyle = window.getComputedStyle(controlElement);
                console.log("背景颜色:", computedStyle.backgroundColor);
                console.log("字体大小:", computedStyle.fontSize);
                console.log("宽度:", computedStyle.width);
                console.log("高度:", computedStyle.height);
            } else {
                console.log("未找到控件的DOM元素。");
            }
        } else {
            console.log("未找到控件的宿主容器。");
        }
    } else {
        console.log("未找到控件。");
    }
}

注意事项 #

• 尽量避免直接操作DOM：Dynamics 365平台更新可能会改变DOM结构，导致代码失效。如果可以，优先通过PCF控件的自定义事件或输出参数传递样式信息。
• 遵守平台安全规范：确保代码在沙箱环境中运行，不使用被限制的DOM操作方法。

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