Het werkitemformulier uitbreiden
Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019
Meer informatie over het aanpassen van hoe het werkitemformulier aan gebruikers wordt gepresenteerd via bijdragen die via een extensie worden gemaakt.
- Een groep toevoegen aan de hoofdpagina
- Een pagina toevoegen (tabblad)
- Een actie toevoegen aan het contextmenu
- Een aangepast besturingselement toevoegen
- Luisteren naar gebeurtenissen in het formulier
- Bijdragen configureren in werkitemformulier
Zie het voorbeeld van de gebruikersinterface in de Voorbeelden van de Azure DevOps-extensie op GitHub voor de volledige bron.
Een groep toevoegen
Als u een groep wilt toevoegen aan de hoofdpagina, voegt u een bijdrage toe aan het uitbreidingsmanifest. Het type van deze bijdrage moet zijn ms.vss-work-web.work-item-form-group en moet gericht zijn op de ms.vss-work-web.work-item-form bijdrage.
"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
}
}
]
Eigenschappen
| Eigenschappen | Beschrijving |
|---|---|
name |
Tekst die wordt weergegeven in de groep. |
uri |
URI naar een pagina die als host fungeert voor de HTML die wordt weergegeven in het werkitemformulier en de bijbehorende scripts. |
height |
(Optioneel) Hiermee definieert u de hoogte van de groep. Als u dit weglaat, is dit 100%. |
JavaScript-voorbeeld
In dit voorbeeld ziet u hoe u een object registreert dat wordt aangeroepen wanneer gebeurtenissen plaatsvinden in het werkitemformulier dat van invloed kan zijn op uw bijgedragen groep.
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)));
}
}
});
gebeurtenis
| Gebeurtenis | Gebeurtenisbeschrijving | Argument | Beschrijving van argument |
|---|---|---|---|
| onFieldChanged | Geactiveerd nadat een veld is gewijzigd. Als de veldwijziging regels heeft uitgevoerd die andere velden hebben bijgewerkt, maken al deze wijzigingen deel uit van één gebeurtenis. | Id | De id van het werkitem. |
| changedFields | Matrix met de verwijzingsnaam van alle gewijzigde velden. | Id | De id van het werkitem. |
| onLoaded | Wordt geactiveerd nadat de gegevens in het werkitemformulier worden geladen, wanneer de gebruiker een werkitem opent of wanneer de gebruiker naar een ander werkitem navigeert in de sorteerweergave. | Id | De id van het werkitem. |
| onReset | Wordt geactiveerd nadat de gebruiker de wijzigingen in het werkitem ongedaan heeft genomen. | Id | De id van het werkitem. |
| onRefreshed | Wordt geactiveerd nadat de gebruiker het werkitem handmatig heeft vernieuwd. | Id | De id van het werkitem. |
| onSaved | Wordt geactiveerd nadat een werkitem is opgeslagen. Voor werkitems in een dialoogvenster moet u het type ms.vss-work-web.work-item-notifications instellen om ervoor te zorgen dat de gebeurtenis wordt geactiveerd nadat het dialoogvenster is gesloten, dit bijdragetype wordt verwijderd. Zie Luisteren naar gebeurtenissen voor meer informatie. | Id | De id van het werkitem. |
| onUnloaded | Geactiveerd voordat de gebruiker het dialoogvenster sluit of voordat de gebruiker naar een ander werkitem in de sorteerweergave gaat. | Id | De id van het werkitem. |
Een pagina toevoegen
Een nieuwe pagina wordt weergegeven als een tabblad in het werkitemformulier. Nieuwe pagina's worden weergegeven naast het tabblad Details.
Als u een pagina wilt toevoegen aan het werkitemformulier, voegt u een bijdrage toe aan het uitbreidingsmanifest. Het type van deze bijdrage moet zijn ms.vss-work-web.work-item-form-page en moet gericht zijn op de ms.vss-work-web.work-item-form bijdrage.
"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"
}
}
]
Eigenschappen
| Eigenschappen | Beschrijving |
|---|---|
| naam | Tekst die wordt weergegeven op de tabbladpagina. |
| uri | URI naar een pagina die als host fungeert voor de HTML die wordt weergegeven in het werkitemformulier en de bijbehorende scripts. |
JavaScript-voorbeeld
Zie het JavaScript-voorbeeld in de sectie formuliergroep. De naam van het geregistreerde object moet overeenkomen met de id bijdrage.
gebeurtenis
| Gebeurtenis | Gebeurtenisbeschrijving | Argument | Beschrijving van argument |
|---|---|---|---|
| onFieldChanged | Geactiveerd nadat een veld is gewijzigd. Als de veldwijziging regels heeft uitgevoerd die andere velden hebben bijgewerkt, maken al deze wijzigingen deel uit van één gebeurtenis. | Id | De id van het werkitem. |
| changedFields | Matrix met de verwijzingsnaam van alle gewijzigde velden. | Id | De id van het werkitem. |
| onLoaded | Wordt geactiveerd nadat de gegevens in het werkitemformulier worden geladen, wanneer de gebruiker een werkitem opent of wanneer de gebruiker naar een ander werkitem navigeert in de sorteerweergave. | Id | De id van het werkitem. |
| onReset | Wordt geactiveerd nadat de gebruiker de wijzigingen in het werkitem ongedaan heeft genomen. | Id | De id van het werkitem. |
| onRefreshed | Wordt geactiveerd nadat de gebruiker het werkitem handmatig heeft vernieuwd. | Id | De id van het werkitem. |
| onSaved | Wordt geactiveerd nadat een werkitem is opgeslagen. Voor werkitems in een dialoogvenster moet u het type ms.vss-work-web.work-item-notifications instellen om ervoor te zorgen dat de gebeurtenis wordt geactiveerd nadat het dialoogvenster is gesloten, dit bijdragetype wordt verwijderd. Zie Luisteren naar gebeurtenissen voor meer informatie. | Id | De id van het werkitem. |
| onUnloaded | Geactiveerd voordat de gebruiker het dialoogvenster sluit of voordat de gebruiker naar een ander werkitem in de sorteerweergave gaat. | Id | De id van het werkitem. |
Bijdragen configureren in werkitemformulier
In Azure DevOps Services worden standaard de groepsextensies weergegeven aan het einde van de tweede kolom van het formulier en paginabijdragen nadat alle formulierpagina's van het werkitem als tabblad worden weergegeven. Bijdragen van besturingselementen worden standaard niet in het formulier weergegeven, zodat gebruikers ze handmatig aan het formulier moeten toevoegen. Als u in Azure DevOps Server het besturingselement, de groeps- en paginabijdragen in het werkitemformulier wilt weergeven of verbergen of verplaatsen, raadpleegt u Formulierextensies voor werkitems configureren.
Menuactie Toevoegen
Als u een item wilt toevoegen aan de werkbalk van het werkitem, voegt u deze bijdrage toe aan het uitbreidingsmanifest. Het item wordt weergegeven in de ... vervolgkeuzelijst in de rechterbovenhoek van het werkitemformulier.
"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"
}
}
]
Eigenschappen
| Eigenschappen | Beschrijving |
|---|---|
| sms verzenden | Tekst die wordt weergegeven op het werkbalkitem. |
| title | Knopinfotekst die wordt weergegeven in het menu-item. |
| werkbalkTekst | Tekst die wordt weergegeven wanneer het item wordt aanwijzer. |
| uri | URI naar een pagina die de handler van de werkbalkactie registreert. |
| Menu | URL naar een pictogram dat wordt weergegeven in het menu-item. Relatieve URL's worden omgezet met behulp van baseUri. |
| groeperen | Bepaalt waar het menu-item wordt weergegeven, gerelateerd aan anderen. Werkbalkitems met dezelfde groepsnaam worden gegroepeerd en gedeeld door een scheidingsteken van de rest van de items. |
| registeredObjectId | (Optioneel) Naam van de geregistreerde menuactiehandler. Standaard ingesteld op de bijdrage-id. |
Luisteren naar gebeurtenissen
Als u een waarnemer wilt toevoegen aan het werkitem, dat luistert naar de gebeurtenissen van het werkitem, voegt u deze bijdrage toe aan uw uitbreidingsmanifest. Er is geen visualisatie voor waarnemers op het werkitemformulier. Dit is de beste manier om te luisteren naar het werkitemformulier op de gebeurtenisSaved, omdat de waarnemer buiten het formulier woont en niet wordt vernietigd wanneer het formulier wordt gesloten, wat kan gebeuren direct na het opslaan.
"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"
}
}
]
Eigenschappen
| Eigenschappen | Beschrijving |
|---|---|
| uri | URI naar een pagina waarop de scripts worden gehost die naar gebeurtenissen luisteren. |
gebeurtenis
| Gebeurtenis | Gebeurtenisbeschrijving | Argument | Beschrijving van argument |
|---|---|---|---|
| onFieldChanged | Geactiveerd nadat een veld is gewijzigd. Als de veldwijziging regels heeft uitgevoerd die andere velden hebben bijgewerkt, maken al deze wijzigingen deel uit van één gebeurtenis. | Id | De id van het werkitem. |
| changedFields | Matrix met de verwijzingsnaam van alle gewijzigde velden. | Id | De id van het werkitem. |
| onLoaded | Wordt geactiveerd nadat de gegevens in het werkitemformulier worden geladen, wanneer de gebruiker een werkitem opent of wanneer de gebruiker naar een ander werkitem navigeert in de sorteerweergave. | Id | De id van het werkitem. |
| onReset | Wordt geactiveerd nadat de gebruiker de wijzigingen in het werkitem ongedaan heeft genomen. | Id | De id van het werkitem. |
| onRefreshed | Wordt geactiveerd nadat de gebruiker het werkitem handmatig heeft vernieuwd. | Id | De id van het werkitem. |
| onSaved | Wordt geactiveerd nadat een werkitem is opgeslagen. Voor werkitems in een dialoogvenster moet u het type ms.vss-work-web.work-item-notifications instellen om ervoor te zorgen dat de gebeurtenis wordt geactiveerd nadat het dialoogvenster is gesloten, dit bijdragetype wordt verwijderd. Zie Luisteren naar gebeurtenissen voor meer informatie. | Id | De id van het werkitem. |
| onUnloaded | Geactiveerd voordat de gebruiker het dialoogvenster sluit of voordat de gebruiker naar een ander werkitem in de sorteerweergave gaat. | Id | De id van het werkitem. |
HTML-/JavaScript-voorbeeld
<!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>
Wijzigingen met Nieuwe Boards Hub
Notitie
New Boards Hub is momenteel in preview, maar is op schema voor iedereen beschikbaar. We raden u sterk aan om New Boards Hub onmiddellijk in te schakelen en uw interne extensies te testen.
De nieuwste SDK's gebruiken
Zorg ervoor dat uw extensie de nieuwste versie van azure-devops-extension-sdk gebruikt
Wanneer u de nieuwe SDK gebruikt, moet u ook het azure-devops-extension-api-pakket voor REST API's gebruiken. We werken de methoden en interfaces bij elke sprint om ervoor te zorgen dat deze alle nieuwste functies bevat.
Wanneer moet u actie of actieprovider gebruiken
Gebruik ms.vss-web.action-provider deze optie wanneer u menu-items dynamisch laadt met behulp van getMenuItems de menuhandler. Vermijd het gebruik wanneer ms.vss-web.action-provider uw menu-items statisch zijn en zijn gedefinieerd in uw manifest. In plaats daarvan ms.vss-web.action moet worden gebruikt.
Pakket vereist("VSS/Events/Document") wordt niet meer ondersteund
require("VSS/Events/Document") importeren wordt niet meer ondersteund met New Boards Hub.