Sdílet prostřednictvím


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í.

Úplný zdroj najdete v příkladu uživatelského rozhraní v ukázkách rozšíření Azure DevOps na GitHubu.

Přidat skupinu

Položka panelu nástrojů ve formuláři pracovní položky

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.

Nová stránka jako karta ve formuláři pracovní položky

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

Umožňuje přidat položku na panel nástrojů pracovní položky.

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.