Ajouter des onglets sur les pages du backlog

Azure DevOps Services

Conseil / Astuce

Pour obtenir les dernières instructions de développement d’extension, notamment les thèmes et la migration à partir de VSS. Sdk, consultez le portail du kit de développement logiciel (SDK) d’extension Azure DevOps.

Si vous avez une page web qui peut être hébergée dans un iframe, elle peut également être hébergée dans Azure DevOps Services. Cette page serait un onglet sur les pages de backlog. Dans cet exemple, nous allons ajouter un onglet Hello World dans le backlog produit et le backlog d’itération.

Emplacement de l’onglet sur la page du backlog de produit des Services Azure DevOps

Emplacement de l’onglet sur la page Backlog d’itération d’Azure DevOps Services

Créer votre page web

  1. Installez le package azure-devops-extension-sdk et placez le SDK.js fichier dans home/sdk/scripts.

     npm install azure-devops-extension-sdk

  2. Créez la page web à afficher. L’exemple suivant ajoute une page simple hello-world.html au home répertoire.

  3. Dans votre page HTML, référencez le SDK et appelez SDK.init() suivis par SDK.notifyLoadSucceeded().

     <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 	<title>Hello World</title>
 	<script src="sdk/scripts/SDK.js"></script>
 </head>
 <body>
 	<script type="text/javascript">SDK.init();</script>
 	<h1>Hello World</h1>
 	<script type="text/javascript">SDK.notifyLoadSucceeded();</script>
 </body>
 </html>

Mettre à jour votre manifeste d’extension

Mettez à jour votre fichier manifeste d’extension avec le code suivant :

...

	"contributions": [
		{
	        "id": "Fabrikam.HelloWorld.Backlog.Tabs",
	        "type": "ms.vss-web.tab",
	        "description": "Adds a 'Hello' tab to the Product and Iteration backlog tabs.",
	        "targets": [
	            "ms.vss-work-web.product-backlog-tabs",
				"ms.vss-work-web.iteration-backlog-tabs"
	        ],
	        "properties": {
	            "name": "Hello",
	            "uri": "hello-world.html",
				"registeredObjectId": "backlogTabObject"
	        }
	    }
	],
	"scopes": [
		"vso.work"
	],
	"files": [
		{
			"path": "hello-world.html", "addressable": true
		},
		{
			"path": "scripts", "addressable": true
		},
		{
			"path": "sdk/scripts", "addressable": true
		},
		{
			"path": "images/logo.png", "addressable": true
		}
	]
...

Contributions

Les contributions contiennent des informations sur vos tâches.

Pour chaque contribution de votre extension, le manifeste définit

  • type de contribution (onglet dans ce cas),
  • la cible de contribution (onglets du backlog de produit ou d’itération dans ce cas),
  • et les propriétés propres à chaque type de contribution. Pour un onglet, nous avons
Propriété Descriptif
nom Nom du hub
URI Chemin (par rapport à l'URI de base de l'extension) de la page à afficher sous forme d'onglet
registeredObjectId ID de l’objet inscrit pour l’onglet. Incluez du code comme l’exemple ci-dessous dans le fichier html indiqué dans la propriété « uri » de la contribution indiquée précédemment.

Étendues

Elle inclut les étendues requises par votre extension. Dans ce cas, nous devons accéder aux éléments de travail via vso.work.

Fichiers

Incluez tous les fichiers que votre extension accède.
Pour vos fichiers, définissez addressable sur true à moins d'inclure d'autres fichiers qui n'ont pas besoin d'être accessibles via une URL.

Inscrire l’objet onglet

SDK.register("backlogTabObject", {
    pageTitle: function(state) {
        return "Hello Tab";
    },
	updateContext: function(tabContext) {							 
	},
    isInvisible: function(state) {
        return false;
    },
    isDisabled: function(state) {
        return false;
    }
});

Découvrez tous les emplacements où vous pouvez ajouter un hub dans les points d’extensibilité.

Étapes suivantes

Empaqueter, publier et installer ou

Test et débogage

  • Last updated on