Edit

Extension samples

  • Article

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

Get started 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've limited the number of contributions for each sample to increase understanding of the extension framework.

Sample Source Contributions Description
BreadcrumbService GitHub Breadcrumb Service, Hub It adds a breadcrumb service which adds a "Sample Breadcrumb Item" to the sample hub. Visit the "Sample Hub" in the Pipelines hub group to see this item.
CodeEditorContribution GitHub Code Editor It adds a language definition and a JSON schema for the code editor.
Feature GitHub Feature, Hub, Property Provider It shows how to hook into the Preview Features panel (under the user profile menu). It adds a simple hub that is only shown when an "ABC" feature is turned on. The feature can be toggled per-user or per-organization.
Hub GitHub Hub It adds a hub named "Sample Hub" into the Pipelines hub group. If you visit a project-level page, you will find Sample Hub under the Pipelines navigation element in the vertical navigation menu on the left of the page.
Menu GitHub Build Definition Menu Item It adds a "Sample build definition menu item" to the Builds hub in the dropdown actions menu in the top-right of the page. The menu handler gets the current build definition from the context that is passed to it, it makes a REST call, and shows the result in a message box.
Panel GitHub Panel Content, Hub It is leveraged within the Hub sample. It is content that contains a toggle button along with OK/Cancel buttons. It can be used as custom panel or dialog content.
Pivot GitHub Web Tab It adds a "Sample Pivot" pivot (tab) to the Organization (Project Collection) home page, next to "Projects", "My work items", and "My pull requests".
Pills GitHub Pill Provider It adds pills to the title of the Pipeline definition (Runs) page.
QueryParamsHandler GitHub Event Subscription It adds a service that gets loaded on any page whenever a "showMyPanel" query parameter is present in the URL when any page is 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 a href property is provided, clicking on the action will navigate to the given url. If a uri is provided, that code will be executed when the action is clicked.
RepositoryServiceHub GitHub Hub It adds a "Repository Information" hub to the Code hub group. It demonstrates how to interact with the IVersionControlRepositoryService to obtain basic information about a user's currently selected Git repository.
WorkItemFormGroup GitHub Work Item Form Group It adds a "Sample WorkItem Form Group" extension to workitem form to show how to interact with the IWorkItemFormService service and IWorkItemNotificationListener. It gives UI to show case how to change field values using the form service and displaying workitem form notification events.
WorkItemOpen GitHub Hub It adds a "Sample WorkItem Open" hub to the Boards hub group to show how to interact with the IWorkItemFormNavigationService service. It gives 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 Add color coding to the values in a dropdown.
Folder Management GitHub Context menu action (code explorer tree) Create 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. It 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 This widget shows the number of cards in each column of the Kanban board.
Sample Data Widget GitHub Dashboard Widget Create sample data in your Team Services project.
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 Enable users to 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.

How to get started

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