如何在工作项配置的Group中添加可调用JS代码的按钮？

问题背景 #

需要在已有Group的工作项XML定义中添加可执行JS的点击按钮，现有Group代码如下：

<Section>
    <Group Label="*****">
        <Control Label="*****" Type="FieldControl" FieldName="*****" />
        <Control Label="*****" Type="LabelControl">
            <Link UrlRoot="http://*****.html" />
        </Control>
    </Group>
</Section>

已通过WebpageControl实现可执行JS的按钮，但无法放入上述Group；尝试LabelControl无法执行JS，需解决控件兼容或替代方案。

已实现的WebpageControl代码：

<Control Type="WebpageControl">
    <WebpageControlOptions>
        <Content> 
            <![CDATA[<button><a target="_blank" onclick="console.log('test');"><b>Testt</b></a></button>]]>
        </Content> 
    </WebpageControlOptions> 
</Control> 

可行解决方案 #

方案1：调整WebpageControl属性适配Group布局 #

WebpageControl本身支持放入Group，问题多源于未设置合适尺寸导致布局冲突。添加Label和Size属性后即可正常嵌入：

<Section>
    <Group Label="*****">
        <Control Label="*****" Type="FieldControl" FieldName="*****" />
        <Control Label="*****" Type="LabelControl">
            <Link UrlRoot="http://*****.html" />
        </Control>
        <!-- 适配Group的WebpageControl -->
        <Control Label="测试按钮" Type="WebpageControl" Name="TestButton">
            <WebpageControlOptions>
                <Content> 
                    <![CDATA[<button onclick="console.log('test');"><b>Test</b></button>]]>
                </Content> 
            </WebpageControlOptions>
            <Size Width="120" Height="32" />
        </Control>
    </Group>
</Section>

• Label：保持与Group内其他控件一致的布局逻辑
• Size：显式设置宽高，避免控件溢出Group容器

方案2：使用带HTML支持的FieldControl替代 #

创建只读自定义字符串字段，通过FieldControl的AllowHtml属性渲染可执行JS的按钮，完美兼容Group布局：

1. 先在工作项类型的FIELDS节点下定义只读字段：

<FIELD name="测试按钮" refname="Custom.TestButtonField" type="String" readonly="true">
    <DEFAULT from="value" value="<button onclick=&quot;console.log('test');&quot; style='padding:4px 12px;'><b>Test</b></button>" />
</FIELD>

2. 在Group中添加该字段的FieldControl：

<Section>
    <Group Label="*****">
        <Control Label="*****" Type="FieldControl" FieldName="*****" />
        <Control Label="*****" Type="LabelControl">
            <Link UrlRoot="http://*****.html" />
        </Control>
        <!-- 带HTML支持的FieldControl按钮 -->
        <Control Label="" Type="FieldControl" FieldName="Custom.TestButtonField" AllowHtml="True" ReadOnly="True" />
    </Group>
</Section>

• AllowHtml="True"：允许字段值中的HTML和JS代码执行
• Label=""：隐藏控件标签，仅显示按钮
• 字段设置readonly="true"：防止用户编辑按钮内容

方案3：自定义控件（进阶） #

若使用Azure DevOps Server/TFS 2017及以上版本，可开发自定义工作项控件，完全自定义按钮逻辑并嵌入Group。此方案适合复杂交互场景，但需要.NET开发能力。

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