Add a hub group

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

We'll create a hub group and add a hub to it. If you haven't already, create the Hello hub first, and then follow these steps to create the hub group.

1. Add a hub group to your app's manifest file in contributions, like this.

   "contributions": [
       {
           "id": "sample-hub-group",
           "type": "ms.vss-web.hub-group",
           "description": "Adds a 'Samples' hub group at the project/team-level",
           "targets": [
               "ms.vss-web.project-hub-groups-collection"
           ],
           "properties": {
               "name": "Samples",
               "order": 100
           }
       },
    ]
   

   Look at the contribution targets reference to see the available hub groups that can be contributed to.

2. Change the hub contribution so that it's in the samples hub group that you just created. Just update the targets to the relative contribution ID of the hub group you just added.

       {
           "id": "Fabrikam.HelloWorld",
           "type": "ms.vss-web.hub",
           "description": "Adds a 'Hello' hub to the Work hub group.",
           "targets": [
               ".sample-hub-group"
           ],
           "properties": {
               "name": "Hello",
               "order": 99,
               "uri": "hello-world.html"
           }
       }
   

3. Install your extension.

   Now your hub appears under your Samples hub group.

   

Here's the complete extension manifest with Hello in the samples hub group.

{
	"namespace": "Fabrikam.myextension",
	"name": "My Extension",
	"description": "This is my first extension",
	"version": "1.0",
	"provider": {
		"name": "Fabrikam Fiber Inc"
	},
	"baseUri": "https://localhost:port",
	"icon": "images/logo.png",
	"links": {
		"info": "info.html",
		"support": "support.html",
		"termsOfService": "terms-of-service.html"
	},
	"contributions": {
		"vss.web#hubGroups.project": [
			{
				"id": "samples",
				"name": "Samples",
				"order":  30
			}
		],
		"vss.web#hubs": [
			{
				"id": "myhub",
				"name": "Hello",
				"groupId": "samples",
				"uri": "hello-world.html"
			}
		]
	}
}

Tip

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