基于模型的Power Apps中PCF组件与实体引用问题咨询

一、核心用例可行性确认 #

这个需求完全可行，无需更换核心方案，只需调整PCF组件的配置与实现逻辑即可。

二、现有问题的具体解决方法 #

1. 组件与实体引用字段同区域渲染+复刻标记逻辑 #

系统默认的实体引用控件无法直接局部扩展，可通过替换整个实体引用字段为自定义PCF组件实现目标布局：

• 步骤1：在PCF清单（ControlManifest.Input.xml）中，将控件类型设为standard，同时绑定实体引用字段、标记状态Boolean字段。
• 步骤2：在PCF代码中复刻系统实体引用的UI（输入框+查找按钮），并在右侧添加自定义标记按钮。

React版核心代码示例

import * as React from 'react';
import { IInputs, IOutputs } from './generated/ManifestTypes';
import { EntityReference } from '@fluentui/react-components';

export class EntityReferenceWithMark implements React.FC<IInputs> {
    private notifyOutputChanged: () => void;
    private entityRef: EntityReference | null;
    private isMarked: boolean;

    constructor(props: IInputs) {
        this.entityRef = props.EntityField;
        this.isMarked = props.MarkField;
        this.notifyOutputChanged = props.notifyOutputChanged;
    }

    private handleEntityChange = (newValue: EntityReference | null) => {
        this.entityRef = newValue;
        this.notifyOutputChanged();
    }

    private handleMarkToggle = () => {
        this.isMarked = !this.isMarked;
        this.notifyOutputChanged();
    }

    public render(): React.ReactElement {
        return (
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <EntityReference
                    value={this.entityRef}
                    onChange={this.handleEntityChange}
                    entityTypes={['incident']}
                />
                <button 
                    onClick={this.handleMarkToggle}
                    style={{ 
                        padding: '4px 8px', 
                        cursor: 'pointer', 
                        backgroundColor: this.isMarked ? '#0078d4' : '#f3f2f1', 
                        color: this.isMarked ? 'white' : 'black' 
                    }}
                >
                    {this.isMarked ? '已标记' : '标记'}
                </button>
            </div>
        );
    }

    public getOutputs(): IOutputs {
        return {
            EntityField: this.entityRef,
            MarkField: this.isMarked
        };
    }
}

清单配置片段

<control namespace="YourNamespace" constructor="EntityReferenceWithMark" version="1.0.0" display-name-key="EntityReferenceWithMark" description-key="EntityReferenceWithMarkDescription" control-type="standard">
  <property name="EntityField" display-name-key="EntityField" description-key="EntityFieldDescription" of-type="EntityReference" usage="bound" required="true" />
  <property name="MarkField" display-name-key="MarkField" description-key="MarkFieldDescription" of-type="Boolean" usage="bound" required="true" />
  <resources>
    <code path="index.ts" order="1" />
    <css path="css/EntityReferenceWithMark.css" order="2" />
  </resources>
</control>

2. 获取Incident实体GUID问题 #

问题源于绑定与属性读取逻辑，修正方式：

• 确保清单中已指定允许的实体类型（如上述代码的entityTypes配置）。
• 代码中正确读取实体引用的ID：

if (this.entityRef && this.entityRef.id) {
    const incidentGuid = this.entityRef.id.toString();
    // 后续业务逻辑处理
}

• 绑定组件时，确认实体引用字段已关联Incident实体，且组件数据源权限配置正确。

三、PCF Controls、Ribbons、自定义JS的适用场景对比 #

1. PCF Controls #

• 适用场景：字段级UI自定义、需双向数据绑定、跨平台（Web/移动端）兼容的场景，如带附加操作的字段、可视化控件。
• 优势：官方原生支持，数据绑定可靠，支持React/Angular，可打包部署。
• 劣势：无法局部修改系统控件，只能替换整个控件。

2. Ribbon自定义按钮 #

• 适用场景：表单/列表顶部的全局操作、批量操作、触发全局业务逻辑。
• 优势：无需修改字段控件，直接扩展系统ribbon区域，适合全局操作。
• 劣势：无法与单个字段UI紧密结合，不支持字段级实时数据绑定。

3. 自定义JavaScript（Web资源） #

• 适用场景：快速修改系统控件局部UI、临时业务逻辑补充、PCF无法实现的复杂DOM操作。
• 优势：灵活度高，直接操作页面DOM，无需打包部署。
• 劣势：依赖DOM结构，系统升级可能失效，不支持移动端，维护成本高。

四、备选方案（Web端专属） #

若不想替换整个实体引用字段，可通过自定义JS动态插入按钮：

function onFormLoad(executionContext) {
    const formContext = executionContext.getFormContext();
    const incidentField = formContext.getAttribute("new_incidentref");
    const markField = formContext.getAttribute("new_ismarked");
    
    const fieldContainer = document.querySelector("[data-id='new_incidentref']");
    if (!fieldContainer) return;

    const markBtn = document.createElement("button");
    markBtn.textContent = markField.getValue() ? "已标记" : "标记";
    markBtn.style.cssText = "margin-left:8px; padding:4px 8px; cursor:pointer;";
    markBtn.onclick = function() {
        const newValue = !markField.getValue();
        markField.setValue(newValue);
        markBtn.textContent = newValue ? "已标记" : "标记";
        
        const incidentRef = incidentField.getValue();
        if (incidentRef) {
            console.log(incidentRef[0].id); // 获取GUID
        }
    };

    fieldContainer.appendChild(markBtn);
}

注意：此方案仅适用于Web端，DOM选择器需随Dynamics 365版本调整。

内容的提问来源于stack exchange，提问作者Frederik Bo Dahl