如何在Dynamics 365本地版UCI中捕获Related-common Tab切换事件

由于Related-Common Tab是系统自动生成的标签页，无法直接在表单编辑器中配置触发事件，可通过以下两种实现方案捕获切换动作：

方案一：利用官方表单Tab状态监听API（推荐） #

通过监听所有Tab的状态变化事件，判断当前激活的Tab是否为Related-Common类型：

1. 在表单的OnLoad事件中注册全局Tab监听
2. 在状态变化回调中识别目标Tab并执行自定义逻辑

// 表单加载时注册监听
function formOnLoad(executionContext) {
    const formContext = executionContext.getFormContext();
    // 为所有Tab绑定状态变化事件
    formContext.ui.tabs.forEach(tab => {
        tab.addOnTabStateChange(onTabSwitch);
    });
}

// Tab状态变化回调
function onTabSwitch(executionContext) {
    const activeTab = executionContext.getEventSource();
    // 判定条件：Tab处于展开状态，且标签包含"相关"（英文环境替换为"Related"）
    if (activeTab.getDisplayState() === "expanded" && activeTab.getLabel().includes("相关")) {
        // 执行自定义业务函数
        triggerRelatedTabLogic();
    }
}

// 自定义业务逻辑函数
function triggerRelatedTabLogic() {
    console.log("Related-Common Tab已激活");
    // 这里编写你的业务代码
}

注意：若标签文本不固定，可通过浏览器开发者工具执行formContext.ui.tabs.getAll()打印所有Tab信息，获取目标Tab的名称（getName()返回值），用名称作为判定条件更精准。

方案二：DOM监听（作为官方API的 fallback） #

当官方API无法覆盖场景时，可通过MutationObserver监听DOM元素的激活状态变化：

function formOnLoad(executionContext) {
    // 延迟执行确保DOM渲染完成
    setTimeout(() => {
        // 定位Related-Common Tab的DOM元素（根据实际标签文本调整选择器）
        const relatedTabEl = document.querySelector('[aria-label="相关"]');
        if (!relatedTabEl) return;

        // 监听Tab元素的类名变化（激活时会添加active类）
        const tabItem = relatedTabEl.closest('.tab-item');
        const observer = new MutationObserver((mutations) => {
            mutations.forEach(mut => {
                if (mut.attributeName === 'class' && tabItem.classList.contains('active')) {
                    triggerRelatedTabLogic();
                }
            });
        });

        // 启动监听
        observer.observe(tabItem, { attributes: true, attributeFilter: ['class'] });
    }, 1000);
}

function triggerRelatedTabLogic() {
    console.log("Related-Common Tab已切换");
}

注意：DOM结构可能随Dynamics 365版本更新变化，需测试确认选择器和类名的有效性。

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