Azure DevOps extension custom UI









up vote
0
down vote

favorite












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?










share|improve this question























  • Have you tried to maybe use a Task Group for creating bundled build task. You could also link selections into build variables?
    – Panu Oksala
    Nov 12 at 16:53














up vote
0
down vote

favorite












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?










share|improve this question























  • Have you tried to maybe use a Task Group for creating bundled build task. You could also link selections into build variables?
    – Panu Oksala
    Nov 12 at 16:53












up vote
0
down vote

favorite









up vote
0
down vote

favorite











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?










share|improve this 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?







azure-devops azure-pipelines-build-task






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 10 at 16:31

























asked Nov 10 at 15:54









Bozhidar Stoyneff

2,9181521




2,9181521











  • Have you tried to maybe use a Task Group for creating bundled build task. You could also link selections into build variables?
    – Panu Oksala
    Nov 12 at 16:53
















  • Have you tried to maybe use a Task Group for creating bundled build task. You could also link selections into build variables?
    – Panu Oksala
    Nov 12 at 16:53















Have you tried to maybe use a Task Group for creating bundled build task. You could also link selections into build variables?
– Panu Oksala
Nov 12 at 16:53




Have you tried to maybe use a Task Group for creating bundled build task. You could also link selections into build variables?
– Panu Oksala
Nov 12 at 16:53












1 Answer
1






active

oldest

votes

















up vote
0
down vote



accepted










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.






share|improve this answer




















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













     

    draft saved


    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53240667%2fazure-devops-extension-custom-ui%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote



    accepted










    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.






    share|improve this answer
























      up vote
      0
      down vote



      accepted










      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.






      share|improve this answer






















        up vote
        0
        down vote



        accepted







        up vote
        0
        down vote



        accepted






        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.






        share|improve this answer












        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.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 12 at 18:42









        Bozhidar Stoyneff

        2,9181521




        2,9181521



























             

            draft saved


            draft discarded















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53240667%2fazure-devops-extension-custom-ui%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Top Tejano songwriter Luis Silva dead of heart attack at 64

            政党

            天津地下鉄3号線