Add panels on backlog pages

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 VSTS Stories backlog page

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

panel extension on the VSTS 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 VSTS 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": [
            "properties": {
                "title": "Hello Panel Pane",
                "name": "Hello Panel",
                "uri": "index.html",
                "registeredObjectId": "backlogPanelObject"
    "scopes": [ 


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 Tooltip text that will appear on the menu item
name What appears in the dropdown for panel selection
uri Path (relative to the extension's base URI) of the page to 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.


Include thescopes that your extension requires. In this case, we need 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