如何借助Azure DevOps扩展将指定工作项字段设为只读？

官方推荐方案：自定义字段渲染器 #

这是最稳定、符合扩展框架规范的实现方式，通过替换目标字段的默认渲染器，在自定义组件中根据条件控制编辑权限。

步骤1：注册自定义渲染器 #

在扩展的vss-extension.json中声明对目标字段的渲染器替换配置：

"contributions": [
  {
    "id": "custom-readonly-field-renderer",
    "type": "ms.vss-work-web.work-item-field-renderer",
    "targets": [
      "ms.vss-work-web.work-item-field-text-renderer" // 根据字段类型调整，比如下拉字段用work-item-field-dropdown-renderer
    ],
    "properties": {
      "fieldType": "string", // 匹配目标字段类型：string、integer、datetime等
      "uri": "dist/renderer.html" // 自定义渲染器页面的路径
    }
  }
]

步骤2：实现自定义渲染器逻辑 #

在渲染器页面中，借助Azure DevOps SDK获取工作项数据，判断条件后决定渲染只读控件还是可编辑控件：

import * as VSS from "VSS/VSS";
import * as WorkItemForm from "TFS/WorkItemTracking/Services";

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

VSS.require(["TFS/WorkItemTracking/Services"], (workItemServices: typeof WorkItemForm) => {
  const targetFieldRefName = "System.Title"; // 目标字段的引用名

  workItemServices.WorkItemFormService.getService().then(service => {
    // 获取工作项类型作为判断条件（可替换为状态、用户权限等自定义规则）
    service.getWorkItemType().then(witType => {
      const isReadOnly = witType === "Bug"; // 示例：Bug类型工作项的该字段设为只读

      // 获取当前字段值
      service.getFieldValue(targetFieldRefName).then(fieldValue => {
        const container = document.getElementById("field-container");
        if (isReadOnly) {
          // 渲染只读文本
          const readonlySpan = document.createElement("span");
          readonlySpan.textContent = fieldValue || "";
          container.appendChild(readonlySpan);
        } else {
          // 渲染可编辑输入框，并同步值到工作项
          const input = document.createElement("input");
          input.type = "text";
          input.value = fieldValue || "";
          input.addEventListener("change", e => {
            service.setFieldValue(targetFieldRefName, (e.target as HTMLInputElement).value);
          });
          container.appendChild(input);
        }
      });
    });
  });

  VSS.notifyLoadSucceeded();
});

替代方案：DOM操作+状态监听（非官方，需注意兼容性） #

如果不想开发完整的自定义渲染器，可以通过监听工作项表单的DOM变化，动态修改字段的禁用状态。这种方式依赖Azure DevOps的UI结构，可能随平台更新失效，适合快速验证场景。

核心代码示例 #

import * as VSS from "VSS/VSS";
import * as WorkItemForm from "TFS/WorkItemTracking/Services";

VSS.init({ explicitNotifyLoaded: true });

VSS.require(["TFS/WorkItemTracking/Services"], workItemServices => {
  const targetFieldRefName = "System.Title";

  // 检查并设置字段只读状态的核心函数
  const updateFieldReadOnlyStatus = () => {
    workItemServices.WorkItemFormService.getService().then(service => {
      service.getWorkItemType().then(witType => {
        const isReadOnly = witType === "Bug";
        
        // 定位字段对应的输入元素（需根据当前UI结构调整选择器）
        const fieldInput = document.querySelector(`input[name="${targetFieldRefName}"]`);
        if (fieldInput) {
          (fieldInput as HTMLInputElement).disabled = isReadOnly;
          // 同步禁用字段容器的编辑样式
          const fieldContainer = fieldInput.closest(".workitemcontrol");
          if (fieldContainer) {
            fieldContainer.classList.toggle("readonly", isReadOnly);
          }
        }
      });
    });
  };

  // 初始加载时执行
  updateFieldReadOnlyStatus();

  // 监听工作项字段变化、表单加载完成事件，实时更新状态
  VSS.register(VSS.getContribution().id, {
    onFieldChanged: args => {
      if (args.changedFields.includes(targetFieldRefName)) {
        updateFieldReadOnlyStatus();
      }
    },
    onLoaded: updateFieldReadOnlyStatus
  });

  VSS.notifyLoadSucceeded();
});

关键注意事项 #

• 自定义渲染器需要针对不同字段类型（文本、下拉、日期等）单独实现，确保交互逻辑和官方控件对齐。
• DOM操作方案需定期验证兼容性，因为Azure DevOps的UI结构可能会迭代更新。
• 条件判断逻辑可扩展为更复杂的规则，比如结合工作项状态、当前用户权限等，都可以通过WorkItemFormService获取对应数据。

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