如何为Azure DevOps Server 2022扩展自定义描述字段添加最大化按钮？

我正在开发Azure DevOps Server 2022的自定义扩展，其中包含一个自定义描述字段，该字段除了默认描述字段的功能外还有额外功能。我的目标是给这个字段添加一个和默认描述字段一样的最大化按钮。

已尝试方案 #

• 尝试在字段内添加自定义最大化按钮，但未达到预期效果。
• 检查流程模板配置后发现，默认描述字段和我的自定义描述字段均绑定到System.Description，该字段本质上是HtmlFieldControl。
• 探索过通过修改流程XML启用扩展按钮的可能性，但未找到直接实现方式。

我的问题 #

• 是否可以为自定义扩展字段启用与默认描述字段类似的最大化按钮？
• 能否通过修改流程XML实现，或者通过表单控件扩展来实现？

恳请提供任何指导或示例！

解决方案 #

可以为自定义描述字段添加类似的最大化按钮，但无法仅通过修改流程XML实现，必须通过表单控件扩展开发自定义控件，复用或模拟默认HtmlFieldControl的最大化功能。

具体实现步骤：

1. 封装原生HtmlFieldControl开发自定义控件
   在扩展中创建自定义表单控件，内部包裹Azure DevOps原生的HtmlFieldControl，这样就能直接保留其自带的最大化按钮，同时添加你的额外功能。示例代码框架如下：

   import { HtmlFieldControl } from "azure-devops-extension-api/WorkItemTracking";
   import { Component } from "react";
   
   class CustomDescriptionField extends Component {
       render() {
           const { fieldName, workItemId } = this.props;
           return (
               <div>
                   {/* 渲染原生HtmlFieldControl，保留最大化按钮 */}
                   <HtmlFieldControl 
                       fieldName={fieldName} 
                       workItemId={workItemId}
                   />
                   {/* 插入你的额外功能组件，比如自定义工具栏、内容处理模块等 */}
               </div>
           );
       }
   }
   

2. 注册自定义表单控件
   在扩展的vss-extension.json中注册该控件，指定其关联System.Description字段：

   "contributions": [
       {
           "id": "custom-description-control",
           "type": "ms.vss-work-web.work-item-form-control",
           "targets": ["ms.vss-work-web.work-item-form"],
           "properties": {
               "name": "自定义描述字段",
               "description": "带额外功能的描述字段，支持最大化",
               "controlType": "CustomDescriptionField",
               "supportedFields": ["System.Description"]
           }
       }
   ]
   

3. 修改流程XML替换控件
   更新流程模板XML，将自定义描述字段的控件类型设置为你注册的自定义控件ID：

   <Control Type="custom-description-control" FieldName="System.Description" Label="自定义描述" />
   

关键注意点：

• 原生HtmlFieldControl自带最大化逻辑，无需手动实现，只要复用该控件就能保留此功能。
• 如果需要对最大化行为做定制，可以通过React的ref获取控件实例，监听相关事件或扩展其功能。
• 确保扩展依赖的azure-devops-extension-sdk版本与Azure DevOps Server 2022兼容（推荐版本≥5.0.0）。

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