Add panels on backlog pages

Last Update: 12/3/2016

In this example, we'll add a simple Hello World extension as a panel on the Portfolio backlog, Product backlog, and Iteration backlog.

Open panel extension on the Visual Studio Team Services Stories backlog page

The custom panel opens in the same space that the mapping panel opens if it were selected.

panel extension on the Visual Studio Team Services Portfolio backlog page

There are three types of backlogs that can be targets for panel extensions: Portfolio backlogs, Product backlogs, and Iteration backlogs. For the Agile template, this breakdown is as below. This is representitive of Scrum and CMMI as well. For custom templates, please consult your process to see which backlogs are requirement or portfolio category.

backlog panel contribution point breakdown

See the Team Services Extension Samples on GitHub for the full source of an example extension.

Update your extension manifest

Update your extension manifest file with the following code:

...
    "contributions": [
        {
            "id": "Fabrikam.HelloWorld.Backlogs.Panel",
            "type": "ms.vss-work-web.backlog-panel",
            "description": "Adds a 'Hello' panel to Product and Iteration backlog pages.",
            "targets": [
                "ms.vss-work-web.requirement-backlog-toolpane",
                "ms.vss-work-web.portfolio-backlog-toolpane",
                "ms.vss-work-web.iteration-backlog-toolpane"
            ],
            "properties": {
                "title": "Hello Panel Pane",
                "name": "Hello Panel",
                "uri": "index.html",
                "registeredObjectId": "backlogPanelObject"
            }
        }
    ],
    "scopes": [ 
        "vso.work" 
    ]
... 

Contribution

For each contribution in your extension, the manifest defines

  • the type of contribution (backlog pannel in this case),
  • the contribution target (the requirements, portfolio, and iteration backlogs in this case),
  • and the properties that are specific to each type of contribution. For panels, we have
Property Description
title Title attribute (tooltip)
name What appears in the dropdown for panel selection
uri Path (relative to the extenion's base URI) of the page to the surface as the panel
registeredObjectId Id of the object registered for the panel

Learn about all of the places where you can add an extension in the contributions reference.

Scopes

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

Get selection events

To get selection events (information about what work items are selected) implement this interface on your registered object.

...
    IContributedPanel {
        workItemSelectionChanged: (selectedWorkItems) => void;
    }
...

Next Steps