Azure DevOps 扩展自定义 UI [英] Azure DevOps extension custom UI

问题描述

我的任务是为 Azure DevOps 开发一个扩展以自动化构建过程 - 一个自定义构建任务.需要注意的是，实际上我正在开发的是一系列构建任务，每个任务都包含常规输入.但由于历史原因，所有这些构建任务都应该分组，用户可以从管道设置中任务页面的下拉列表中选择正确的任务.

I've been tasked to develop an extension for Azure DevOps to automate building process - a custom Build Task. The caveat is that in reality what I am developing is a series of build task, each containing regular inputs. But for historical reasons, all these build tasks should be grouped and the user would be able to choose the correct one from a drop-down list on the tasks' page in the pipeline settings.

问题是下拉菜单中的更改应该隐藏一些输入并显示一些其他输入 - 即我想处理下拉菜单的 CHANGE 事件并控制 UI 的可见性元素.

The issue being is that the change in the drop down should hide SOME of the inputs and show some other inputs as well - i.e. I'd like to handle the CHANGE event of the drop-down and control the visibility of the UI elements.

这甚至可能吗?

我走错路了吗?我该如何解决这个问题?

Am I on the wrong track? How can I approach this?

推荐答案

解决方案很简单，但目前还不明显.

The solution is simple, but it isn't obvious as of yet.

每个输入都有一个名为 visibleRule 的属性，它完全满足需要:控制它附加到的输入的可见性.所以在 task.json 文件中，在 inputs 数组中，你可以这样做:

There is a property to each input, called visibleRule which does exactly whats needed: control the visibility of of the input it is attached to. So in the task.json file, in the inputs array, one could do this:

定义下拉列表:

{
  "name": "selectedOption",
  "type": "pickList",
  "label": "Options",
  "options": {
    "o1": "Option 1",
    "o2": "Option 2",
    "o3": "Option 3"
  }
},

然后像这样定义一些字段:

Then define some fields like this:

{
  "name": "test1",
  "type": "string",
  "label": "Option 1 test",
  "visibleRule": "selectedOption = o1"
},
{
  "name": "test2",
  "type": "string",
  "label": "Option 2 test",
  "visibleRule": "selectedOption = o2"
},

现在，只有在 selectedOption 下拉列表中选择了 o1(选项 1)时，才会显示 test1 输入.test2 和 o2 也是如此.如果 selectedOption 是 o3，则 test1 和 test2 都不会显示.

Now the test1 input is diplayed ONLY if o1 (Option 1) is selected in the selectedOption drop-down. The same goes for test2 and o2. Neither test1 nor test2 is displayed if the selectedOption is o3.

这篇关于Azure DevOps 扩展自定义 UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！