Rozšíření formuláře pracovní položky
Azure DevOps Services | Azure DevOps Server 2022 – Azure DevOps Server 2019
Zjistěte, jak přizpůsobit způsob zobrazení formuláře pracovní položky uživatelům prostřednictvím příspěvků provedených prostřednictvím rozšíření.
- Přidání skupiny na hlavní stránku
- Přidání stránky (karta)
- Přidání akce do místní nabídky
- Přidání vlastního ovládacího prvku
- Naslouchání událostem ve formuláři
- Konfigurace příspěvků ve formuláři pracovní položky
Úplný zdroj najdete v příkladu uživatelského rozhraní v ukázkách rozšíření Azure DevOps na GitHubu.
Přidat skupinu
Pokud chcete přidat skupinu na hlavní stránku, přidejte do manifestu rozšíření příspěvek. Typ tohoto příspěvku by měl být ms.vss-work-web.work-item-form-group a měl by cílit na příspěvek ms.vss-work-web.work-item-form .
"contributions": [
{
"id": "sample-work-item-form-group",
"type": "ms.vss-work-web.work-item-form-group",
"description": "Custom work item form group",
"targets": [
"ms.vss-work-web.work-item-form"
],
"properties": {
"name": "My Group",
"uri": "workItemGroup.html",
"height": 600
}
}
]
Vlastnosti
| Vlastnost | Popis |
|---|---|
name |
Text, který se zobrazí ve skupině |
uri |
Identifikátor URI na stránku, která je hostitelem kódu HTML, který se zobrazuje ve formuláři pracovní položky a jeho skriptech. |
height |
(Volitelné) Definuje výšku skupiny. Pokud tento parametr vynecháte, je to 100 %. |
Ukázka JavaScriptu
Tento příklad ukazuje, jak zaregistrovat objekt, který se volá, když na formuláři pracovní položky dojde k událostem, které můžou mít vliv na vaši skupinu přispívání.
import { IWorkItemFormService, WorkItemTrackingServiceIds } from "azure-devops-extension-api/WorkItemTracking";
import * as SDK from "azure-devops-extension-sdk";
// Get the WorkItemFormService. This service allows you to get/set fields/links on the 'active' work item (the work item
// that currently is displayed in the UI).
async function getWorkItemFormService()
{
const workItemFormService = await SDK.getService<IWorkItemFormService>(WorkItemTrackingServiceIds.WorkItemFormService);
return workItemFormService;
}
// Register a listener for the work item group contribution after initializing the SDK.
SDK.register(SDK.getContributionId(), function () {
return {
// Called when the active work item is modified
onFieldChanged: function(args) {
$(".events").append($("<div/>").text("onFieldChanged - " + JSON.stringify(args)));
},
// Called when a new work item is being loaded in the UI
onLoaded: function (args) {
getWorkItemFormService().then(function(service) {
// Get the current values for a few of the common fields
service.getFieldValues(["System.Id", "System.Title", "System.State", "System.CreatedDate"]).then(
function (value) {
$(".events").append($("<div/>").text("onLoaded - " + JSON.stringify(value)));
});
});
},
// Called when the active work item is being unloaded in the UI
onUnloaded: function (args) {
$(".events").empty();
$(".events").append($("<div/>").text("onUnloaded - " + JSON.stringify(args)));
},
// Called after the work item has been saved
onSaved: function (args) {
$(".events").append($("<div/>").text("onSaved - " + JSON.stringify(args)));
},
// Called when the work item is reset to its unmodified state (undo)
onReset: function (args) {
$(".events").append($("<div/>").text("onReset - " + JSON.stringify(args)));
},
// Called when the work item has been refreshed from the server
onRefreshed: function (args) {
$(".events").append($("<div/>").text("onRefreshed - " + JSON.stringify(args)));
}
}
});
Události
| Událost | Popis události | Argument | Popis argumentu |
|---|---|---|---|
| onFieldChanged | Aktivuje se po změně pole. Pokud se změna pole spustila pravidla, která aktualizovala ostatní pole, jsou všechny tyto změny součástí jedné události. | ID | ID pracovní položky. |
| changedFields | Matice s odkazem na všechna změněná pole | ID | ID pracovní položky. |
| onLoaded | Aktivuje se po načtení dat ve formuláři pracovní položky, když uživatel otevře pracovní položku nebo když uživatel přejde do jiné pracovní položky v zobrazení třídění. | ID | ID pracovní položky. |
| onReset | Aktivuje se po vrácení změn pracovní položky zpět uživatelem. | ID | ID pracovní položky. |
| onRefreshed | Aktivuje se po ruční aktualizaci pracovní položky uživatelem. | ID | ID pracovní položky. |
| OnSaved | Aktivuje se po uložení pracovní položky. U pracovních položek v dialogovém okně byste měli cílit na typ "ms.vss-work-web.work-item-notifications", aby se zajistilo, že se událost aktivuje, protože po zavření dialogového okna se tento typ příspěvku uvolní. Další informace najdete v tématu Naslouchání událostem. | ID | ID pracovní položky. |
| onUnloaded | Aktivuje se před zavřením dialogového okna nebo před přesunutím uživatele do jiné pracovní položky v zobrazení třídění. | ID | ID pracovní položky. |
Přidání stránky
Nová stránka se vykreslí jako karta ve formuláři pracovní položky. Nové stránky se zobrazí vedle karty Podrobnosti.
Pokud chcete přidat stránku do formuláře pracovní položky, přidejte příspěvek do manifestu rozšíření. Typ tohoto příspěvku by měl být ms.vss-work-web.work-item-form-page a měl by cílit na příspěvek ms.vss-work-web.work-item-form .
"contributions": [
{
"id": "sample-work-item-form-page",
"type": "ms.vss-work-web.work-item-form-page",
"description": "Custom work item form page",
"targets": [
"ms.vss-work-web.work-item-form"
],
"properties": {
"name": "My Page",
"uri": "workItemPage.html"
}
}
]
Vlastnosti
| Vlastnost | Popis |
|---|---|
| name | Text, který se zobrazí na stránce karty |
| uri | Identifikátor URI na stránku, která je hostitelem kódu HTML, který se zobrazuje ve formuláři pracovní položky a jeho skriptech. |
Ukázka JavaScriptu
Podívejte se na ukázku JavaScriptu v části skupiny formulářů. Název registrovaného objektu by měl odpovídat id příspěvku.
Události
| Událost | Popis události | Argument | Popis argumentu |
|---|---|---|---|
| onFieldChanged | Aktivuje se po změně pole. Pokud se změna pole spustila pravidla, která aktualizovala ostatní pole, jsou všechny tyto změny součástí jedné události. | ID | ID pracovní položky. |
| changedFields | Matice s odkazem na všechna změněná pole | ID | ID pracovní položky. |
| onLoaded | Aktivuje se po načtení dat ve formuláři pracovní položky, když uživatel otevře pracovní položku nebo když uživatel přejde do jiné pracovní položky v zobrazení třídění. | ID | ID pracovní položky. |
| onReset | Aktivuje se po vrácení změn pracovní položky zpět uživatelem. | ID | ID pracovní položky. |
| onRefreshed | Aktivuje se po ruční aktualizaci pracovní položky uživatelem. | ID | ID pracovní položky. |
| OnSaved | Aktivuje se po uložení pracovní položky. U pracovních položek v dialogovém okně byste měli cílit na typ "ms.vss-work-web.work-item-notifications", aby se zajistilo, že se událost aktivuje, protože po zavření dialogového okna se tento typ příspěvku uvolní. Další informace najdete v tématu Naslouchání událostem. | ID | ID pracovní položky. |
| onUnloaded | Aktivuje se před zavřením dialogového okna nebo před přesunutím uživatele do jiné pracovní položky v zobrazení třídění. | ID | ID pracovní položky. |
Konfigurace příspěvků ve formuláři pracovní položky
Ve službě Azure DevOps Services se ve výchozím nastavení rozšíření skupin zobrazí na konci druhého sloupce formuláře a příspěvků na stránce za všemi stránkami formuláře pracovní položky jako karta. Příspěvky ovládacích prvků se ve výchozím nastavení ve formuláři nezobrazují, takže je uživatelé musí do formuláře přidat ručně. Pokud chcete v Azure DevOps Serveru zobrazit nebo skrýt nebo přesunout ovládací prvek, příspěvky skupin a stránek ve formuláři pracovní položky, přečtěte si téma Konfigurace rozšíření formuláře pracovní položky.
Akce nabídky Přidat
Pokud chcete přidat položku na panel nástrojů pracovní položky, přidejte tento příspěvek do manifestu rozšíření. Položka se zobrazí v ... rozevírací seznam v pravém horním rohu formuláře pracovní položky
"contributions": [
{
"id": "sample-work-item-menu",
"type": "ms.vss-web.action",
"description": "Sample toolbar item which updates the title of a work item",
"targets": [
"ms.vss-work-web.work-item-context-menu"
],
"properties": {
"text": "Try me!",
"title": "Updates the title of the work item from the extension",
"toolbarText": "Try me!",
"icon": "images/show-properties.png",
"uri": "menu-workItemToolbarButton.html"
}
}
]
Vlastnosti
| Vlastnost | Popis |
|---|---|
| text | Text, který se zobrazí na položce panelu nástrojů |
| title | Text popisu, který se zobrazí v položce nabídky |
| toolbarText | Text, který se zobrazí při najetí myší na položku |
| uri | Identifikátor URI na stránku, která zaregistruje obslužnou rutinu akce panelu nástrojů. |
| ikona | Adresa URL ikony, která se zobrazí v položce nabídky. Relativní adresy URL se překládají pomocí baseUri. |
| skupina | Určuje, kde se položka nabídky zobrazí, související s ostatními. Položky panelu nástrojů se stejným názvem skupiny jsou seskupené a rozdělené oddělovačem od ostatních položek. |
| registeredObjectId | (Volitelné) Název obslužné rutiny akce registrované nabídky Výchozí hodnota je ID příspěvku. |
Naslouchání událostem
Pokud chcete přidat pozorovatele do pracovní položky, která naslouchá událostem pracovní položky, přidejte tento příspěvek do manifestu rozšíření. Ve formuláři pracovní položky není žádná vizualizace pro pozorovatele. Toto je nejlepší způsob, jak naslouchat formuláři pracovní položky na událostiSaved, protože pozorovatel žije mimo formulář a při zavření formuláře se nezničí, což se může stát hned po uložení.
"contributions": [
{
"id": "sample-work-item-form-observer",
"type": "ms.vss-work-web.work-item-notifications",
"description": "Gets events about the current work item form for the 'Try Me!' toolbar button",
"targets": [
"ms.vss-work-web.work-item-form"
],
"properties": {
"uri": "myformobserver.html"
}
}
]
Vlastnosti
| Vlastnost | Popis |
|---|---|
| uri | Identifikátor URI na stránku, která hostuje skripty, které naslouchají událostem. |
Události
| Událost | Popis události | Argument | Popis argumentu |
|---|---|---|---|
| onFieldChanged | Aktivuje se po změně pole. Pokud se změna pole spustila pravidla, která aktualizovala ostatní pole, jsou všechny tyto změny součástí jedné události. | ID | ID pracovní položky. |
| changedFields | Matice s odkazem na všechna změněná pole | ID | ID pracovní položky. |
| onLoaded | Aktivuje se po načtení dat ve formuláři pracovní položky, když uživatel otevře pracovní položku nebo když uživatel přejde do jiné pracovní položky v zobrazení třídění. | ID | ID pracovní položky. |
| onReset | Aktivuje se po vrácení změn pracovní položky zpět uživatelem. | ID | ID pracovní položky. |
| onRefreshed | Aktivuje se po ruční aktualizaci pracovní položky uživatelem. | ID | ID pracovní položky. |
| OnSaved | Aktivuje se po uložení pracovní položky. U pracovních položek v dialogovém okně byste měli cílit na typ "ms.vss-work-web.work-item-notifications", aby se zajistilo, že se událost aktivuje, protože po zavření dialogového okna se tento typ příspěvku uvolní. Další informace najdete v tématu Naslouchání událostem. | ID | ID pracovní položky. |
| onUnloaded | Aktivuje se před zavřením dialogového okna nebo před přesunutím uživatele do jiné pracovní položky v zobrazení třídění. | ID | ID pracovní položky. |
Ukázka HTML/JavaScriptu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Work item extension page sample</title>
</head>
<body>
<script src="sdk/scripts/SDK.js"></script>
<script>
SDK.init({
usePlatformScripts: true
});
SDK.ready(function () {
// Register a listener for the work item page contribution.
SDK.register(SDK.getContributionId(), function () {
return {
// Called when the active work item is modified
onFieldChanged: function(args) {
},
// Called when a new work item is being loaded in the UI
onLoaded: function (args) {
},
// Called when the active work item is being unloaded in the UI
onUnloaded: function (args) {
},
// Called after the work item has been saved
onSaved: function (args) {
},
// Called when the work item is reset to its unmodified state (undo)
onReset: function (args) {
},
// Called when the work item has been refreshed from the server
onRefreshed: function (args) {
}
}
});
});
</script>
</body>
</html>
Změny s novým centrem Boards
Poznámka:
Nové centrum Boards je aktuálně ve verzi Preview, ale je na cestě dostupné pro všechny uživatele. Důrazně doporučujeme, abyste okamžitě povolili Centrum New Boards a otestování interních rozšíření.
Použití nejnovějších sad SDK
Ujistěte se, že vaše rozšíření používá nejnovější verzi sady azure-devops-extension-sdk.
Při použití nové sady SDK byste také měli používat balíček azure-devops-extension-api pro rozhraní REST API. Aktualizujeme metody a rozhraní každého sprintu, abychom zajistili, že obsahuje všechny nejnovější funkce.
Kdy použít akci nebo poskytovatele akcí
Používá ms.vss-web.action-provider se při dynamickém načítání položek nabídky pomocí getMenuItems obslužné rutiny nabídky. Vyhněte se použití ms.vss-web.action-provider , pokud jsou položky nabídky statické a definované v manifestu. Místo toho ms.vss-web.action byste měli použít.
Package require("VSS/Events/Document") se už nepodporuje.
require("VSS/Events/Document") Import se už v centru New Boards nepodporuje.