同一工作项表单中自定义控件（贡献）间的交互实现方法

你遇到的核心问题是：每个自定义控件作为独立贡献，对应独立的iframe实例，各自与Host Frame建立了专属的XDM通道（handShakeId不同），因此直接通过XDM通道或SDK.register注册的对象无法跨控件访问，导致"No handler found"错误。

正确的解决方案是利用Azure DevOps SDK提供的全局事件服务（Event Service），通过Host Frame作为中间层实现跨控件消息传递，具体步骤如下：

1. 接收方控件（Receiver）代码 #

在需要接收消息的控件中，初始化SDK后注册自定义事件监听器：

VSS.init({
    explicitNotifyLoaded: true,
    usePlatformScripts: true,
    usePlatformStyles: true
});

VSS.ready(() => {
    // 获取全局事件服务
    VSS.getService(VSS.ServiceIds.Event).then((eventService) => {
        // 注册自定义事件监听器，事件名需与触发方保持一致
        eventService.subscribe("custom-control-cross-message", (message) => {
            // 处理收到的消息，执行你的业务逻辑
            console.log("收到来自其他控件的消息:", message);
            // 示例：调用本地函数
            yourLocalFunction(message.payload);
        });
    });

    VSS.notifyLoadSucceeded();
});

// 本地处理函数示例
function yourLocalFunction(payload) {
    // 实现你的逻辑
}

2. 触发方控件（Invoker）代码 #

在需要发送消息的控件中，初始化SDK后发布自定义事件：

VSS.init({
    explicitNotifyLoaded: true,
    usePlatformScripts: true,
    usePlatformStyles: true
});

VSS.ready(() => {
    // 获取全局事件服务
    VSS.getService(VSS.ServiceIds.Event).then((eventService) => {
        // 构造要传递的消息数据（需可序列化，不能包含函数等非序列化对象）
        const messageData = {
            action: "trigger-action",
            payload: {
                workItemId: VSS.getWebContext().workItemId,
                customData: "your-data-here"
            }
        };
        // 发布自定义事件
        eventService.publish("custom-control-cross-message", messageData);
    });

    VSS.notifyLoadSucceeded();
});

关键说明 #

• 事件名一致性：两个控件必须使用完全相同的事件名才能完成消息传递
• 数据序列化：传递的消息必须是可JSON序列化的数据，不能直接传递函数、DOM元素等无法序列化的对象
• 请求-响应模式：如果需要双向通信（比如触发方等待接收方的处理结果），可以在消息中加入唯一请求ID，接收方处理完成后发布带该ID的响应事件，触发方监听响应事件即可

为什么之前的方案无效 #

每个自定义控件都是独立的iframe，与Host Frame的XDM通道是隔离的（handShakeId不同）：

• 直接通过XDM.channelManager注册的对象仅存在于当前控件的专属通道中，其他控件无法访问
• SDK.register()注册的对象也仅在当前控件的SDK上下文内有效，无法跨iframe调用

而全局事件服务是Host Frame提供的统一事件总线，所有控件都能通过SDK接入该总线，从而实现跨控件的消息传递。

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