Add tabs on query result pages

Article
05/31/2023

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

If you have a web page that can be hosted in an iframe, it can be hosted in Azure DevOps as a tab on the query result pages. In this example, we'll add a simple Hello World tab on query results.

Tab location on the Azure DevOps Query Results.

Tip

Check out our newest documentation on extension development using the Azure DevOps Extension SDK.

Create your web page

Get the Client SDK SDK.js file and add it to your web app. Place it in the home/sdk/scripts folder.
1. Use the 'npm install' command to retrieve the SDK: npm install azure-devops-extension-sdk.
2. To learn more about the SDK, visit the Client SDK GitHub Page.
Add the web page that you want to display as a hub. We're doing a simple hello-world.html page here, added to the home directory.

In your HTML page, add a reference to the SDK, and call init() and notifyLoadSucceeded().

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 	<title>Hello World</title>
 	<script src="sdk/scripts/SDK.js"></script>
 </head>
 <body>
 	<script type="text/javascript">SDK.init();</script>
 	<h1>Hello World</h1>
 	<script type="text/javascript">SDK.notifyLoadSucceeded();</script>
 </body>
 </html>

Update your extension manifest

Update your extension manifest file with the following code:

...

	"contributions": [
		{
            "id": "Fabrikam.HelloTab.Query.Tabs",
            "type": "ms.vss-web.tab",
            "description": "Adds a 'Hello' tab to the query results",
            "targets": [
                "ms.vss-work-web.query-tabs"
            ],
            "properties": {
                "uri": "hello-query-tab.html",
                "title": "Hello",
                "name": "Hello"
            }
        }
	],
	"scopes": [
		"vso.work"
	],
	"files": [
		{
			"path": "hello-query-tab.html", "addressable": true
		},
		{
			"path": "scripts", "addressable": true
		},
		{
			"path": "sdk/scripts", "addressable": true
		},
		{
			"path": "images/logo.png", "addressable": true
		}
	]
...

Contributions

The contributions stanza contains information about your tasks.

For each contribution in your extension, the manifest defines

the type of contribution (tab in this case),
the contribution target (the query tabs in this case),
and the properties that are specific to each type of contribution. For a tab, we have

Property	Description
name	Name of the tab
uri	Path (relative to the extension's base URI) of the page to surface as the tab
title	Title of the tab to display

Scopes

It includes the scopes that your extension requires. In this case, we need vso.work to access work items.

Files

Include all of the files your extension accesses.
For your files, set addressable to true unless you include other files that don't need to be URL-addressable.

Example

SDK.register(SDK.getContributionId(), {
    pageTitle: function(state) {
        return "Hello";
    },
    updateContext: function(tabContext) {
    },
    isInvisible: function(state) {
        return false;
    },
    isDisabled: function(state) {
        return false;
    }
});

Learn about all of the places where you can add a hub in Extensibility points.

Next steps

Package, Publish, and Install or

Test and Debug

Share via