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.

DevLabs examples

Other open source examples that you might be interested in.

Sample Source Contributions Description
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.
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.
Retrospectives GitHub Hub First-class experience for retrospectives and general feedback board scenarios. Collect feedback on your project milestones, organize and prioritize, and create and track actionable tasks to help your team improve over time.
Estimate GitHub Hub, Work item action menu Play Planning Poker in Azure DevOps. Select work from an iteration, query, or your backlog, estimate the effort of those items with your team, and immediately update the work items.
Multivalue control GitHub Work item form A work item form control which allows selection of multiple values.
Azure DevOps Extension Tasks GitHub Build and release tasks Azure Pipelines tasks for packaging and publishing Azure Devops and Visual Studio extensions to the Visual Studio Marketplace.

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.