Azure DevOps extension custom UI

Question

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.

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.

Is this even possible?

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

Have you tried to maybe use a Task Group for creating bundled build task. You could also link selections into build variables? — Panu Oksala

Bozhidar Stoyneff Bozhidar Stoyneff · Accepted Answer · 2018-11-12T18:42:23

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

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:

Define the drop-down:

{
  "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"
},

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 extension custom UI

1 Answers