Partager via


Exemples d’extension

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

Commencez à développer votre extension en travaillant à partir d’un exemple.

Conseil

Consultez notre documentation la plus récente sur le développement d’extensions à l’aide du Kit de développement logiciel (SDK) d’extension Azure DevOps.

Les exemples Microsoft suivants montrent les fonctionnalités de l’infrastructure d’extension et comment contribuer à différents domaines. Chaque exemple illustre une ou plusieurs contributions. Nous limitons le nombre de contributions pour chaque échantillon afin d’améliorer la compréhension du framework d’extension. Pour plus d’informations sur la source, consultez le dépôt d’exemples d’extensions Azure DevOps.

Exemple Contributions Description
BreadcrumbService Service de navigation, Hub Ajoute un service de navigation, qui ajoute un « Exemple d’élément de navigation » au hub d’exemple. Pour afficher cet élément, accédez à l’exemple de hub dans le groupe hub Pipelines .
CodeEditorContribution Éditeur de code Ajoute une définition de langage et un schéma JSON pour l’éditeur de code.
Fonctionnalité Fonctionnalité, Hub, Fournisseur de propriétés Montre comment se connecter au panneau Fonctionnalités d’aperçu sous le menu profil utilisateur. Ajoute un hub simple qui s’affiche uniquement lorsque vous activez une fonctionnalité « ABC ». Vous pouvez activer et désactiver la fonctionnalité, par utilisateur ou par organisation.
Hub Hub Ajoute un hub nommé Sample Hub au groupe hub Pipelines . L’exemple hub se trouve sur une page au niveau du projet, sous l’élément de navigation Pipelines .
Menu Élément de menu Définition de build Ajoute un élément de menu Exemple de définition de build au hub Builds dans le menu actions de liste déroulante. Le gestionnaire de menus obtient la définition de build actuelle à partir du contexte passé, effectue un appel REST, puis affiche le résultat dans une boîte de message.
Panel Contenu du panneau, Hub Appliqué dans l’exemple Hub . Contient un bouton bascule avec des boutons OK et Annuler . Peut être utilisé comme panneau personnalisé ou contenu de boîte de dialogue.
Tableau croisé dynamique Onglet Web Ajoute un onglet De tableau croisé dynamique à la page d’accueil de l’organisation ou de la collection de projets, en regard des projets, des éléments de travail et mes demandes de tirage.
Pilules Fournisseur de pilules Ajoute des pilules au titre de la page Définition de pipeline (Exécutions).
QueryParamsHandler Abonnement à un événement Ajoute un service qui se charge sur une page chaque fois qu’un paramètre de requête apparaît dans l’URL lorsqu’une showMyPanel page est chargée. Le service de démarrage affiche le panneau personnalisé de l’exemple Panneau, en utilisant un paramètre de requête facultatif myPanelTitle comme titre du panneau.
RepositoryActions Élément de menu Ajoute un exemple d’élément de menu d’action du référentiel au sélecteur de référentiels dans l’en-tête des pages du hub de code. Si la href propriété s’affiche, sélectionnez l’action pour accéder à l’URL donnée. Si la uri propriété est fournie, ce code s’exécute lorsque vous sélectionnez l’action.
RepositoryServiceHub Hub Ajoute un hub d’informations de référentiel au groupe Du hub de code . Montre comment interagir avec le IVersionControlRepositoryService référentiel Git d’un utilisateur pour obtenir des informations de base.
WorkItemFormGroup Groupe de formulaires d’élément de travail Ajoute une extension de groupe de formulaires WorkItem exemple au formulaire d’élément de travail pour montrer comment interagir avec le IWorkItemFormService service et IWorkItemNotificationListener. Fournit une interface utilisateur pour montrer comment modifier les valeurs de champ à l’aide du service de formulaire et afficher les événements de notification de formulaire d’élément de travail.
WorkItemOpen Hub Ajoute un exemple de hub WorkItem Open au groupe du hub Boards pour montrer comment interagir avec le IWorkItemFormNavigationService service. Fournit une interface utilisateur pour vous permettre d’ouvrir un élément de travail existant par ID ou d’ouvrir le formulaire d’élément de travail pour un nouvel élément de travail par type d’élément de travail. L’une de ces options ouvre une boîte de dialogue dans le cadre hôte.

Exemples DevLabs

D’autres exemples code source ouvert qui vous intéressent peut-être.

Exemple Source Contributions Description
Calendrier d’équipe GitHub Hub, sources d’événements Suivez les événements importants pour votre équipe, affichez et gérez les jours de congé, voyez rapidement quand les sprints commencent et se terminent, et bien plus encore.
WSJF (Travail le plus court pondéré en premier) GitHub Notification (élément de travail), action de menu contextuel (élément de travail) Calcule automatiquement WSJF (travail le plus court pondéré en premier) par élément de travail et le stocke dans un champ d’élément de travail.
Listes en cascade GitHub Formulaire d’élément de travail Définissez le comportement en cascade pour les listes de sélection dans le formulaire d’élément de travail.
Rétrospectives GitHub Hub Expérience de première classe pour les rétrospectives et les scénarios généraux de tableau de commentaires. Collectez des commentaires sur les jalons de votre projet, organisez et hiérarchisez et créez et suivez les tâches actionnables, ce qui peut aider votre équipe à s’améliorer au fil du temps.
Estimer GitHub Menu d’action Hub, Élément de travail Jouer au poker de planification dans Azure DevOps. Sélectionnez le travail à partir d’une itération, d’une requête ou de votre backlog, estimez l’effort de ces éléments avec votre équipe et mettez immédiatement à jour les éléments de travail.
Contrôle à valeurs multiples GitHub Formulaire d'élément de travail Contrôle de formulaire d’élément de travail, qui permet la sélection de plusieurs valeurs.
Tâches d’extension Azure DevOps GitHub Tâches de génération et de mise en production Tâches Azure Pipelines pour l’empaquetage et la publication d’extensions Azure Devops et Visual Studio sur la Place de marché Visual Studio.

Démarrage

Pour commencer le plus rapidement possible, utilisez le projet de départ qui contient les fichiers nécessaires pour générer une extension à l’aide de TypeScript. Il existe un script grunt pour automatiser la génération, l’empaquetage et la publication de l’extension.