Menüművelet hozzáadása
Azure DevOps Services | Azure DevOps Server 2022 – Azure DevOps Server 2019
Ebben a példában egy műveletet adunk hozzá a lekérdezés helyi menüjéhez a munkaelem lekérdezési központjában.
Tipp.
Tekintse meg a bővítményfejlesztéssel kapcsolatos legújabb dokumentációnkat az Azure DevOps Extension SDK használatával.
A cikk előfeltételei
- Létre kell hoznia egy webalkalmazást a művelethez, amely a hub példájában található.
- Ha még nem tette meg, tekintse meg az első bővítmény oktatóanyagának írását az alapok megismeréséhez.
Bővítményjegyzékfájl frissítése
Az alábbiakban látható a kódrészlet, amely hozzáadja a műveletet a bővítményjegyzék hozzájárulási szakaszához.
...
"contributions": [
{
"id": "myAction",
"type": "ms.vss-web.action",
"description": "Run in Hello hub action",
"targets": [
"ms.vss-work-web.work-item-query-menu"
],
"properties": {
"text": "Run in Hello hub",
"title": "Run in Hello hub",
"icon": "images/icon.png",
"groupId": "actions",
"uri": "action.html"
}
}
]
...
Tulajdonságok
Tulajdonság | Leírás |
---|---|
text | A menüelemen megjelenő szöveg. |
Cím | Elemleírás szöveg, amely a menüelemen jelenik meg. |
Ikon | A menüelemen megjelenő ikon URL-címe. A relatív URL-címek feloldása a baseUri használatával történik. |
groupId | Meghatározza, hogy hol jelenik meg ez a menüelem a többihez képest. |
Uri | URI a menüművelet-kezelőt regisztráló lapra (lásd alább). |
registeredObjectId | (Nem kötelező) A regisztrált menü műveletkezelőjének neve. A közreműködői azonosító alapértelmezett értéke. |
Megismerheti azokat a helyeket, ahol műveleteket adhat hozzá a bővíthetőségi pontokhoz.
A HTML-lap
A menüműveletet egy HTML-fájlba beágyazott JavaScript-szkript képviseli. Mentse a következő tartalmat egy fájlba és helyre, amely megfelel a bővítmény jegyzékfájljában rá mutató hivatkozásnak.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Action Sample</title>
</head>
<body>
<div>
The end user doesn't see the content on this page.
It is only in the background to handle the contributed menu item being selected.
</div>
</body>
</html>
A JavaScript
Az alábbi szkript regisztrálja a kezelőobjektumot a művelet kezeléséhez, és az head
előző HTML-oldal szakaszában helyezi el.
Úgy aliasoltuk
lib
, hogy szerepeljennode_modules/azure-devops-extension-sdk/lib
a jegyzékfájlbansdk-extension.json
.
<script src="lib/SDK.min.js"></script>
<script>
SDK.init();
// Use an IIFE to create an object that satisfies the IContributedMenuSource contract
var menuContributionHandler = (function () {
"use strict";
return {
// This is a callback that gets invoked when a user selects the newly contributed menu item
// The actionContext parameter contains context data surrounding the circumstances of this
// action getting invoked.
execute: function (actionContext) {
alert("Hello, world");
}
};
}());
// Associate the menuContributionHandler object with the "myAction" menu contribution from the manifest.
SDK.register(SDK.getContributionId(), menuContributionHandler);
</script>
Tipp.
További információ: Bővíthetőségi pontok, menük és eszköztárak, a Képlettervező rendszer hozzájárulási modellje, REST API-referencia, bővítményminták és erőforrások a fejlesztői közösségben.
Következő lépések
Most, hogy megírta a bővítményt, a következő lépések a bővítmény csomagolása, közzététele és telepítése. A bővítmény tesztelésére és hibakeresésére vonatkozó dokumentációt is megtekintheti.