如何在Azure DevOps工作项中实现下拉框选中值互斥？

Azure DevOps工作项表单扩展完全支持基于其他下拉框的选择动态更新选项集合，核心是利用Work Item Form SDK监听字段变更并修改目标字段的可选值。以下是具体实现步骤和示例代码：

核心思路 #

1. 初始化时保存所有下拉框的原始选项集合，避免后续过滤丢失选项
2. 为每个下拉字段注册变更监听事件
3. 当任意下拉框值变化时，收集所有已选中的非空值
4. 对每个目标下拉框，过滤掉其他字段已选中的值（但保留自身当前选中值），并更新其可选选项

详细实现步骤 #

1. 配置扩展清单 #

确保你的vss-extension.json声明了正确的权限、贡献点和依赖：

{
  "manifestVersion": 1,
  "id": "dynamic-dropdowns-extension",
  "name": "Dynamic Linked Dropdowns",
  "version": "1.0.0",
  "publisher": "your-publisher-id",
  "targets": [{"id": "Microsoft.VisualStudio.Services"}],
  "contributions": [
    {
      "id": "work-item-form-enhancement",
      "type": "ms.vss-work-web.work-item-form-page",
      "targets": ["ms.vss-work-web.work-item-form"],
      "properties": {"uri": "work-item-form.html"}
    }
  ],
  "files": [
    {"path": "work-item-form.html", "addressable": true},
    {"path": "scripts", "addressable": true}
  ],
  "scopes": ["vso.work_write"]
}

2. 编写表单页面 #

创建work-item-form.html作为扩展的入口页面：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vss-web-extension-sdk@6.141.0/dist/VSS.SDK.min.js"></script>
</head>
<body>
    <script src="scripts/main.js"></script>
</body>
</html>

3. 核心逻辑实现 #

创建scripts/main.js，处理字段监听和选项更新：

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

VSS.require(["TFS/WorkItemTracking/Services"], function (WorkItemServices) {
    // 替换为你实际的三个下拉字段引用名
    const dropdownFieldRefs = ["Custom.Dropdown1", "Custom.Dropdown2", "Custom.Dropdown3"];
    let originalOptions = {};

    WorkItemServices.WorkItemFormService.getService().then(formService => {
        // 初始化获取所有字段的原始选项
        Promise.all(dropdownFieldRefs.map(field => {
            return formService.getFieldAllowedValues(field).then(values => {
                originalOptions[field] = values;
            });
        })).then(() => {
            // 给每个字段绑定变更监听
            dropdownFieldRefs.forEach(field => {
                formService.registerFieldChangedListener(field, () => updateAllDropdowns(formService));
            });

            // 页面加载完成后先执行一次初始更新
            updateAllDropdowns(formService);
            VSS.notifyLoadSucceeded();
        });
    });

    function updateAllDropdowns(formService) {
        // 获取当前所有字段的选中值
        formService.getFieldValues(dropdownFieldRefs).then(fieldValues => {
            // 收集所有已选中的非空值
            const selectedValues = dropdownFieldRefs
                .map(field => fieldValues[field])
                .filter(val => val != null && val !== "");

            // 更新每个下拉框的可选选项
            dropdownFieldRefs.forEach(targetField => {
                const currentVal = fieldValues[targetField];
                // 过滤选项：保留自身当前值 + 未被其他字段选中的值
                const filteredOpts = originalOptions[targetField].filter(opt => {
                    return opt === currentVal || !selectedValues.includes(opt);
                });
                // 应用新的选项集合
                formService.setFieldAllowedValues(targetField, filteredOpts);
            });
        });
    }
});

关键注意事项 #

• 字段引用名：必须替换示例中的Custom.Dropdown1等为你实际使用的工作项字段引用名（可在Azure DevOps的工作项类型编辑器中查看）
• 权限配置：扩展必须声明vso.work_write权限，否则无法修改字段的可选值
• 自身值保留：更新选项时要保留当前字段的选中值，避免用户已选的值被移除导致无法保存
• 空值处理：当用户清空某个下拉框时，对应的值会自动重新回到其他下拉框的选项中，无需额外处理

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