Extension samples
TFS 2018
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.