Edit

Extension samples

  • Article

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

Start developing your extension by working from a sample.

Tip

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

The following Microsoft samples show the capabilities of the extension framework and how to contribute to various areas. Each sample illustrates one or more contributions. We limit the number of contributions for each sample to increase understanding of the extension framework.

Sample Source Contributions Description
BreadcrumbService GitHub Breadcrumb Service, Hub Adds a breadcrumb service, which adds a "Sample Breadcrumb Item" to the sample hub. To see this item, go to the Sample Hub in the Pipelines hub group.
CodeEditorContribution GitHub Code Editor Adds a language definition and a JSON schema for the code editor.
Feature GitHub Feature, Hub, Property Provider Shows how to hook into the Preview Features panel under the user profile menu. Adds a simple hub that only shows when you turn on an "ABC" feature. You can toggle the feature on and off, per user or per organization.
Hub GitHub Hub Adds a hub named Sample Hub into the Pipelines hub group. The Sample Hub is on a project-level page, under the Pipelines navigation element.
Menu GitHub Build Definition Menu Item Adds a Sample build definition menu item to the Builds hub in the dropdown actions menu. The menu handler gets the current build definition from the context passed, makes a REST call, and then shows the result in a message box.
Panel GitHub Panel Content, Hub Applied within the Hub sample. Contains a toggle button along with OK and Cancel buttons. Can be used as a custom panel or dialog content.
Pivot GitHub Web Tab Adds a Sample Pivot tab to the organization or project collection home page, next to Projects, My work items, and My pull requests.
Pills GitHub Pill Provider Adds pills to the title of the Pipeline definition (Runs) page.
QueryParamsHandler GitHub Event Subscription Adds a service that loads on any page whenever a showMyPanel query parameter presents in the URL when any page gets loaded. The startup service shows the custom panel from the Panel sample, using an optional myPanelTitle query parameter as the panel title.
RepositoryActions GitHub Menu Item It adds a Sample repository action menu item to the repository picker in the header of code hub pages. If the href property shows, select the action to go to the given URL. If the uri property is provided, that code executes when you select the action.
RepositoryServiceHub GitHub Hub Adds a Repository Information hub to the Code hub group. Demonstrates how to interact with the IVersionControlRepositoryService to obtain basic information about a user's Git repository.
WorkItemFormGroup GitHub Work Item Form Group Adds a Sample WorkItem Form Group extension to the work item form to show how to interact with the IWorkItemFormService service and IWorkItemNotificationListener. Provides a UI to show case how to change field values using the form service and displaying work item form notification events.
WorkItemOpen GitHub Hub Adds a Sample WorkItem Open hub to the Boards hub group to show how to interact with the IWorkItemFormNavigationService service. Provides a UI for you to open an existing work item by ID, or open the work item form for a new work item by work item type. Either of these options open a dialog in the host frame.
Color Scale Work Item Form Custom Control GitHub Work Item Form Control Adds color coding to the values in a dropdown.
Folder Management GitHub Context menu action (code explorer tree) Creates a folder in your source repositories from the code explorer tree. No need to clone the repository or install extra tools.
Offline Test Execution GitHub Test plan tab Allows the tester to perform the test steps even if disconnected from Azure DevOps. Can be done using the exported Excel spreadsheet.
Release Management Utility tasks GitHub Release Management tasks Utility tasks for Release Management.
Roll-up Board GitHub Dashboard Widget Shows the number of cards in each column of the Kanban board.
State Model Visualization GitHub Toolbar action (work item), Hub Visualize the state model for a selected work item type.
Team Calendar GitHub Hub, Event sources Track events important to your team, view and manage days off, quickly see when sprints start and end, and more.
Team Project Health GitHub Dashboard Widget Lets users visualize the overall health of builds, delivering a visual cue similar to the Codify Build Light.
WSJF (Weighted Shortest Job First) GitHub Notification (work item), Context menu action (work item) Auto calculates WSJF (weighted shortest job first) per work item and stores it in a work item field.
Cascading Lists GitHub Work Item Form Define cascading behavior for picklists in work item form.

Get started

To get started as quickly as possible, use the seed project that contains the files required to build an extension using TypeScript. There's a grunt script to automate building, packaging, and publishing the extension.