Add a hub group

Last Update: 9/26/2016

We'll create a hub group and add hub to it. If you haven't already, create the Hello hub first, 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.

    Hello hub in the 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"
            }
        ]
    }
}
```