How to publish custom dropdown with values to Devops workitem form using ADO Extension

Question

I have developed a group extension and able to publish it to Devops but I want to publish a custom dropdown to Devops workitem form. I have followed the below document but not able to publish the custom control.

https://learn.microsoft.com/en-us/azure/devops/extend/develop/custom-control?view=azure-devops

The attached picture shows custom group, where a html page is getting loaded as iframe , I want to save the state of the dropdown value when the workitem gets saved but in my case whenever the workitem is opened my custom group is loading as iframe from initial state

Can someone please help me with ,how to publish a custom dropdown to Devops org using ADO Extension.

Thanks in advance. Manifest Devops form

Answer 1

We could use the Cross-platform CLI for Azure DevOps (tfx-cli) to publish your extension to the Visual Studio Marketplace.

1. Create PAT, we need ensure the PAT have Account: 'All accessible organizations'.

2. Install TFX CLI, you could open a Command Prompt and enter npm i -g tfx-cli.

3. Create a publisher via the cmd tfx extension publisher create

4. Publish the extension via the command line tfx extension publish, if your extension has already been published, we can add the --rev-version command line option to automatically increment the patch version of your extension.

We could refer to this doc for more details. Also, we could refer to this doc to package and publish extension.

Update1

If you want add dropdown in your extension, we should use pickList, you could refer to Azure DevOps task, these tasks are open source on GitHub, we could refer the task Azure Power Shell to add dropdown.

In the vss-extension.json file, it should looks like this

{
            "name": "{dropdown field name}",
            "type": "pickList",
            "label": "{label}",
            "required": false,
            "defaultValue": "{default Value}",
            "options": {
                {dropdown content}
            },
            "helpMarkDown": "{helpMarkDown link}"
        }

Result: