Extension samples
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.
Related articles
Feedback
https://aka.ms/ContentUserFeedback.
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see:Submit and view feedback for