Erweiterungsbeispiele
Azure DevOps Services | Azure DevOps Server 2022 | Azure DevOps Server 2019
Beginnen Sie mit der Entwicklung Ihrer Erweiterung, indem Sie aus einem Beispiel arbeiten.
Tipp
Sehen Sie sich unsere neueste Dokumentation zur Erweiterungsentwicklung mithilfe des Azure DevOps-Erweiterungs-SDK an.
Die folgenden Microsoft-Beispiele zeigen die Funktionen des Erweiterungsframeworks und zeigen, wie Sie zu verschiedenen Bereichen beitragen. Jedes Beispiel veranschaulicht einen oder mehrere Beiträge. Wir beschränken die Anzahl der Beiträge für jede Stichprobe, um das Verständnis des Erweiterungsrahmens zu erhöhen. Quellinformationen finden Sie im Repository der Azure DevOps-Erweiterung.
| Beispiel | Beiträge | Beschreibung |
|---|---|---|
| BreadcrumbService | Breadcrumb Service, Hub | Fügt einen Breadcrumb-Dienst hinzu, der dem Beispielhub ein "Sample Breadcrumb Item" hinzufügt. Um dieses Element anzuzeigen, wechseln Sie in der Pipelines-Hubgruppe zum Beispielhub. |
| CodeEditorContribution | Code-Editor | Fügt eine Sprachdefinition und ein JSON-Schema für den Code-Editor hinzu. |
| Feature | Feature, Hub, Eigenschaftenanbieter | Zeigt, wie Sie im Benutzerprofilmenü in den Bereich "Vorschaufeatures " eingebunden werden. Fügt einen einfachen Hub hinzu, der nur angezeigt wird, wenn Sie ein "ABC"-Feature aktivieren. Sie können das Feature ein- und ausschalten, pro Benutzer oder pro Organisation. |
| Hub | Hub | Fügt der Pipelines-Hubgruppe einen Hub mit dem Namen "Sample Hub" hinzu. Der Beispielhub befindet sich auf einer Seite auf Projektebene unter dem Navigationselement "Pipelines ". |
| Menü | Menüelement "Builddefinition" | Fügt dem Builds-Hub im Dropdownaktionenmenü ein Menüelement "Beispielbuilddefinition" hinzu. Der Menühandler ruft die aktuelle Builddefinition aus dem übergebenen Kontext ab, führt einen REST-Aufruf aus und zeigt dann das Ergebnis in einem Meldungsfeld an. |
| Panel | Panelinhalt, Hub | Im Hub-Beispiel angewendet. Enthält eine Umschaltfläche zusammen mit den Schaltflächen "OK " und "Abbrechen ". Kann als benutzerdefinierter Bereichs- oder Dialoginhalt verwendet werden. |
| Pivotieren | Webregisterkarte | Fügt der Startseite der Organisation oder Projektsammlung neben "Projekte", "Meine Arbeitsaufgaben" und "Meine Pullanforderungen" eine Pivot-Registerkarte "Beispiel" hinzu. |
| Ovale Steuerelemente | Pillenanbieter | Fügt Dem Titel der Pipelinedefinitionsseite (Runs) Pillen hinzu. |
| QueryParamsHandler | Ereignisabonnement | Fügt einen Dienst hinzu, der auf jeder Seite geladen wird, wenn ein showMyPanel Abfrageparameter in der URL angezeigt wird, wenn eine Seite geladen wird. Der Startdienst zeigt den benutzerdefinierten Bereich aus dem Panelbeispiel unter Verwendung eines optionalen myPanelTitle Abfrageparameters als Paneltitel an. |
| RepositoryActions | Menübefehl | Fügt der Repositoryauswahl im Header der Codehubseiten ein Aktionsmenüelement für ein Beispiel-Repository hinzu. Wenn die href Eigenschaft angezeigt wird, wählen Sie die Aktion aus, um zur angegebenen URL zu wechseln. Wenn die Eigenschaft bereitgestellt wird, wird dieser uri Code ausgeführt, wenn Sie die Aktion auswählen. |
| RepositoryServiceHub | Hub | Fügt der Code-Hubgruppe einen Repositoryinformationshub hinzu. Veranschaulicht, wie Sie mit dem IVersionControlRepositoryService Repository eines Benutzers interagieren, um grundlegende Informationen zum Git-Repository eines Benutzers zu erhalten. |
| WorkItemFormGroup | Arbeitsaufgabenformulargruppe | Fügt dem Arbeitselementformular eine Erweiterung der WorkItem-Formulargruppe hinzu, um zu zeigen, wie mit dem IWorkItemFormService Dienst und IWorkItemNotificationListenerdem Dienst interagieren. Stellt eine Benutzeroberfläche bereit, um zu zeigen, wie Feldwerte mithilfe des Formulardiensts geändert und Arbeitsaufgabenformularbenachrichtigungsereignisse angezeigt werden. |
| WorkItemOpen | Hub | Fügt der Boards-Hubgruppe einen "Sample WorkItem Open"-Hub hinzu, um die Interaktion mit dem IWorkItemFormNavigationService Dienst zu zeigen. Stellt eine Benutzeroberfläche bereit, mit der Sie eine vorhandene Arbeitsaufgabe nach ID öffnen oder das Arbeitsaufgabenformular für eine neue Arbeitsaufgabe nach Arbeitsaufgabentyp öffnen können. Eine dieser Optionen öffnet ein Dialogfeld im Hostframe. |
DevLabs-Beispiele
Andere Open Source-Beispiele, an denen Sie möglicherweise interessiert sind.
| Beispiel | Quelle | Beiträge | Beschreibung |
|---|---|---|---|
| Teamkalender | GitHub | Hub, Ereignisquellen | Verfolgen Sie ereignisse, die für Ihr Team wichtig sind, anzeigen und verwalten Sie Tage, sehen Sie schnell, wann Sprints beginnen und enden, und vieles mehr. |
| WSJF (gewichteter kürzester Auftrag zuerst) | GitHub | Benachrichtigung (Arbeitsaufgabe), Kontextmenüaktion (Arbeitsaufgabe) | Automatisch berechnet WSJF (gewichtet kürzester Auftrag zuerst) pro Arbeitsaufgabe und speichert ihn in einem Arbeitsaufgabenfeld. |
| Kaskadierende Listen | GitHub | Arbeitselementformular | Definieren Sie kaskadierendes Verhalten für Auswahllisten im Arbeitsaufgabenformular. |
| Retrospektiven | GitHub | Hub | Erstklassige Erfahrung für Retrospektiven und allgemeine Feedbackboardszenarien. Sammeln Sie Feedback zu Ihren Projektmeilensteinen, organisieren und priorisieren Sie, und erstellen Und verfolgen Sie Aktionen erfordernde Vorgänge, die Ihrem Team helfen können, im Laufe der Zeit zu verbessern. |
| Schätzen | GitHub | Aktionsmenü "Hub", "Arbeitselement" | Spielen Sie Planning Poker in Azure DevOps. Wählen Sie Arbeit aus einer Iteration, Abfrage oder Ihrem Backlog aus, schätzen Sie den Aufwand dieser Elemente mit Ihrem Team, und aktualisieren Sie sofort die Arbeitsaufgaben. |
| Steuerelement für mehrere Werte | GitHub | Arbeitselementformular | Ein Formularsteuerelement für Arbeitsaufgaben, das die Auswahl mehrerer Werte ermöglicht. |
| Azure DevOps-Erweiterungsaufgaben | GitHub | Entwickeln und Veröffentlichen von Tasks | Azure Pipelines-Aufgaben zum Packen und Veröffentlichen von Azure Devops- und Visual Studio-Erweiterungen im Visual Studio Marketplace. |
Erste Schritte
Um so schnell wie möglich zu beginnen, verwenden Sie das Seedprojekt , das die zum Erstellen einer Erweiterung erforderlichen Dateien mit TypeScript enthält. Es gibt ein grunt skript zum Automatisieren des Erstellens, Verpackens und Veröffentlichens der Erweiterung.