İş öğesi formunu genişlet

Azure DevOps Services | Azure DevOps Server | Azure DevOps Server 2022

Bu makalede, iş öğesi formunu özelleştirmek için uzantıların nasıl kullanılacağı açıklanmaktadır. Azure DevOps'taki iş öğesi formuna eylem, gözlemci, grup veya sayfa ekleyebilirsiniz.

Tavsiye

Yeni bir Azure DevOps uzantısı başlatıyorsanız, önce bu bakımlı örnek koleksiyonları deneyin; bunlar geçerli ürün derlemeleriyle çalışır ve modern senaryoları kapsar (örneğin, çekme isteği sayfalarına sekme ekleme).

Azure DevOps uzantısı örneği (GitHub)— yaygın uzantı desenlerini gösteren küçük bir başlangıç örneği: https://github.com/microsoft/azure-devops-extension-sample
Azure DevOps uzantı örnekleri (eski toplama ve katkı kılavuzu)— kullanıcı arabirimi hedeflerini incelemek veya kaynağı görüntülemek için yükleyin: https://marketplace.visualstudio.com/items/ms-samples.samples-contributions-guide ve https://github.com/Microsoft/vso-extension-samples/tree/master/contributions-guide
Microsoft Learn örnekleri (Azure DevOps örneklerine göz atın)—Microsoft belgelerinde seçilmiş, güncel örnekler: /samples/browse/?terms=azure%20devops%20extension

Kuruluşunuzda bir örnek çalışmıyorsa, bunu kişisel bir kuruluşa veya test kuruluşuna yükleyin ve uzantı bildiriminin hedef kimliklerini ve API sürümlerini geçerli belgelerle karşılaştırın. Başvuru ve API'ler için bkz:

Ana sayfaya bir grup ekleyin
Sayfa (sekme) ekleme
Bağlam menüsüne eylem ekleme
Özel denetim ekleme
Formdaki etkinlikleri dinleyin
Katkıları iş öğesi formunda yapılandırma

Tam kaynak kodu için GitHub'daki Azure DevOps uzantısı örneklerindeyer alan kullanıcı arabirimi örneğine bakın.

Grup ekleme

Araç çubuğu öğesini iş öğesi biçiminde gösteren ekran görüntüsü.

Ana sayfaya bir grup eklemek için uzantı manifest dosyanıza bir katkı ekleyin. Bu katkının türü olmalı ms.vss-work-web.work-item-form-group ve katkıyı ms.vss-work-web.work-item-form hedeflemelidir.

"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
       }
   }
]

Özellikler

Mülkiyet	Açıklama
`name`	Grupta görünen metin.
`uri`	İş öğesi formunda ve betiklerinde gösterilen html'yi barındıran bir sayfanın URI'si.
`height`	(İsteğe bağlı) Grubun yüksekliğini tanımlar. İhmal edildiğinde, 100%.

JavaScript örneği

Bu örnek, katkıda bulunan grubunuzu etkileyebilecek iş öğesi formunda olaylar meydana geldiğinde çağrılan bir nesnenin nasıl kaydedileceğini gösterir.

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)));
        }
    }
});

Etkinlikler

Etkinlik	Olay açıklaması	Tartışma	Bağımsız değişken açıklaması
`onFieldChanged`	Bir alan değiştikten sonra kovuldu. Alan değişikliği, diğer alanları güncelleştiren kuralları çalıştırdıysa, tüm bu değişiklikler tek bir etkinliğin parçasıdır.	Kimlik	İş öğesinin kimliği
`changedFields`	Değiştirilen tüm alanların başvuru adını içeren dizi.	Kimlik	İş öğesinin kimliği
`onLoaded`	Veriler iş öğesi formuna yüklendikten sonra, kullanıcı bir iş öğesini açtığında veya kullanıcı önceliklendirme görünümünde başka bir iş öğesine gittiğinde tetiklenir.	Kimlik	İş öğesinin kimliği
`onReset`	Kullanıcı iş öğesinde yapılan değişiklikleri geri aldıktan sonra tetiklenir.	Kimlik	İş öğesinin kimliği
`onRefreshed`	Kullanıcı iş öğesini el ile yeniledikten sonra tetiklenir.	Kimlik	İş öğesinin kimliği
`onSaved`	Bir iş öğesi kaydedildikten sonra tetiklenir. Bir iletişim kutusundaki iş öğeleri için, iletişim kutusu kapandıktan sonra bu katkı türü kaldırıldığından olayın tetiklendiğinden emin olmak için türü hedeflemeniz `ms.vss-work-web.work-item-notifications` gerekir. Daha fazla bilgi için, bkz: Olayları dinleme.	Kimlik	İş öğesinin kimliği
`onUnloaded`	Kullanıcı iletişim kutusunu kapatmadan önce veya kullanıcı önceliklendirme görünümünde başka bir iş öğesine geçmeden önce tetiklenir.	Kimlik	İş öğesinin kimliği

Sayfa ekleyin

Yeni bir sayfa, iş öğesi formunda bir sekme olarak işlenir. Ayrıntılar sekmesinin yanında yeni sayfalar görünür.

Yeni sayfayı iş öğesi formunda bir sekme olarak gösteren ekran görüntüsü.

İş öğesi formuna bir sayfa eklemek için, uzantı bildiriminize bir katkı ekleyin. Bu katkının türü olmalı ms.vss-work-web.work-item-form-page ve katkıyı ms.vss-work-web.work-item-form hedeflemelidir.

"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"
        } 
    }
]

Özellikler

Mülkiyet	Açıklama
isim	Sekme sayfasında görünen metin.
URI	İş öğesi formunda ve betiklerinde gösterilen html'yi barındıran bir sayfanın URI'si.

JavaScript örneği

Form grubu bölümündeki JavaScript örneğine bakın. Kayıtlı nesnenin adı, katkının adıyla eşleşmelidir id .

Etkinlikler

Etkinlik	Olay açıklaması	Tartışma	Bağımsız değişken açıklaması
`onFieldChanged`	Bir alan değiştikten sonra kovuldu. Alan değişikliği, diğer alanları güncelleştiren kuralları çalıştırdıysa, tüm bu değişiklikler tek bir etkinliğin parçasıdır.	Kimlik	İş öğesinin kimliği
`changedFields`	Değiştirilen tüm alanların başvuru adını içeren dizi.	Kimlik	İş öğesinin kimliği
`onLoaded`	Veriler iş öğesi formuna yüklendikten sonra, kullanıcı bir iş öğesini açtığında veya kullanıcı önceliklendirme görünümünde başka bir iş öğesine gittiğinde tetiklenir.	Kimlik	İş öğesinin kimliği
`onReset`	Kullanıcı iş öğesinde yapılan değişiklikleri geri aldıktan sonra tetiklenir.	Kimlik	İş öğesinin kimliği
`onRefreshed`	Kullanıcı iş öğesini el ile yeniledikten sonra tetiklenir.	Kimlik	İş öğesinin kimliği
`onSaved`	Bir iş öğesi kaydedildikten sonra tetiklenir. Bir iletişim kutusundaki iş öğeleri için, iletişim kutusu kapandıktan sonra bu katkı türü kaldırıldığından olayın tetiklendiğinden emin olmak için türü hedeflemeniz `ms.vss-work-web.work-item-notifications` gerekir. Daha fazla bilgi için, bkz: Olayları dinleme.	Kimlik	İş öğesinin kimliği
`onUnloaded`	Kullanıcı iletişim kutusunu kapatmadan önce veya kullanıcı önceliklendirme görünümünde başka bir iş öğesine geçmeden önce tetiklenir.	Kimlik	İş öğesinin kimliği

Katkıları iş öğesi formunda yapılandırma

Azure DevOps Services, varsayılan olarak, grup uzantıları formun ikinci sütununun sonunda görünür ve sayfa katkıları, tüm iş öğesi form sayfalarından sonra bir sekme olarak görünür. Denetim katkıları varsayılan olarak formda gösterilmez, bu nedenle kullanıcıların bunları forma el ile eklemesi gerekir. Azure DevOps Server'da, denetimi göstermek/gizlemek veya taşımak için, iş öğesi biçiminde grup ve sayfa katkılarını gruplandırma bölümüne bakın.

İş öğesi araç çubuğuna bir öğenin nasıl ekleneceğini gösteren ekran görüntüsü.

İş öğesi araç çubuğuna bir öğe eklemek için, bu katkıyı uzantı bildiriminize ekleyin. Açılan menüyü görmek için iş öğesi formundaki dikey üç noktayı seçin.

"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"  
      }  
   }
]

Özellikler

Mülkiyet	Açıklama
`text`	Araç çubuğu öğesinde görünen metin.
`title`	Menü öğesinde görüntülenen araç ipucu metni.
`toolbarText`	Öğenin üzerine gelindiğinde görünen metin.
`uri`	Araç çubuğu eylem işleyicisini kaydeden bir sayfanın URI'si.
`icon`	Menü öğesinde görünen simgenin URL'si. Göreli URL'ler kullanılarak çözümlenir `baseUri`.
`group`	Menü öğesinin diğerleriyle ilişkili olarak nerede görüneceğini belirler. Aynı grup adına sahip araç çubuğu öğeleri gruplandırılır ve diğer öğelerden bir ayırıcı ile ayrılır.
`registeredObjectId`	(İsteğe bağlı) Kayıtlı menü eylem işleyicisinin adı. Varsayılan olarak katkı kimliği kullanılır.

Etkinlikleri dinleyin

İş öğesi olaylarını dinleyen iş öğesine bir gözlemci eklemek için, bu katkıyı uzantı bildiriminize ekleyin. İş öğesi formunda gözlemciler için görselleştirme yoktur. Bu, gözlemci formun dışında yaşadığından ve form kapandığında yok edilmediğinden, kaydetme işleminden hemen sonra gerçekleşebileceğinden , Saved olayındaki iş öğesi formunu dinlemenin en iyi yoludur.

"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"
       }
   }
]

Özellikler

Mülkiyet	Açıklama
`uri`	Olayları dinleyen betikleri barındıran bir sayfanın URI'si.

Etkinlikler

Etkinlik	Olay açıklaması	Tartışma	Bağımsız değişken açıklaması
`onFieldChanged`	Bir alan değiştikten sonra kovuldu. Alan değişikliği, diğer alanları güncelleştiren kuralları çalıştırdıysa, tüm bu değişiklikler tek bir etkinliğin parçasıdır.	Kimlik	İş öğesinin kimliği
`changedFields`	Değiştirilen tüm alanların başvuru adını içeren dizi.	Kimlik	İş öğesinin kimliği
`onLoaded`	Veriler iş öğesi formuna yüklendikten sonra, kullanıcı bir iş öğesini açtığında veya kullanıcı önceliklendirme görünümünde başka bir iş öğesine gittiğinde tetiklenir.	Kimlik	İş öğesinin kimliği
`onReset`	Kullanıcı iş öğesinde yapılan değişiklikleri geri aldıktan sonra tetiklenir.	Kimlik	İş öğesinin kimliği
`onRefreshed`	Kullanıcı iş öğesini el ile yeniledikten sonra tetiklenir.	Kimlik	İş öğesinin kimliği
`onSaved`	Bir iş öğesi kaydedildikten sonra tetiklenir. Bir iletişim kutusundaki iş öğeleri için, iletişim kutusu kapandıktan sonra bu katkı türü kaldırıldığından olayın tetiklendiğinden emin olmak için türü hedeflemeniz `ms.vss-work-web.work-item-notifications` gerekir. Daha fazla bilgi için, bkz: Olayları dinleme.	Kimlik	İş öğesinin kimliği
`onUnloaded`	Kullanıcı iletişim kutusunu kapatmadan önce veya kullanıcı önceliklendirme görünümünde başka bir iş öğesine geçmeden önce tetiklenir.	Kimlik	İş öğesinin kimliği

HTML/JavaScript örneği

<!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>

Yeni Panolar Hub'ı ile Yapılan Değişiklikler

Uyarı

Yeni Boards Hub özelliği varsayılan olarak etkindir. Uyumluluğu sağlamak için dahili uzantılarınızı New Boards Hub ile test etmenizi kesinlikle öneririz.

En son SDK'ları kullanın

Uzantınızın azure-devops-extension-sdk'nın en son sürümünü kullandığından emin olun

Yeni SDK'yı kullanırken, REST API'leri için azure-devops-extension-api paketini de kullanıyor olmanız gerekir. En son özelliklerin tümünü içerdiğinden emin olmak için yöntemleri ve arayüzleri her sprint'te güncelliyoruz.

Eylem veya eylem sağlayıcı ne zaman kullanılır?

Menü işleyicisini kullanarak ms.vss-web.action-provider menü öğelerini dinamik olarak yüklerken kullanıngetMenuItems. Menü öğeleriniz statik olduğunda ve manifest dosyanızda tanımlandığında kullanmaktan ms.vss-web.action-provider kaçının. Bunun yerine ms.vss-web.action kullanılmalıdır.

Paket `require("VSS/Events/Document")` artık desteklenmiyor

require("VSS/Events/Document") içeri aktarma işlemi artık New Boards Hub ile desteklenmemektedir.

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-12-17

Aracılığıyla paylaş

İş öğesi formunu genişlet

Grup ekleme

Özellikler

JavaScript örneği

Etkinlikler

Sayfa ekleyin

Özellikler

JavaScript örneği

Etkinlikler

Katkıları iş öğesi formunda yapılandırma

Menü eylemi ekle

Özellikler

Etkinlikleri dinleyin

Özellikler

Etkinlikler

HTML/JavaScript örneği

Yeni Panolar Hub'ı ile Yapılan Değişiklikler

En son SDK'ları kullanın

Eylem veya eylem sağlayıcı ne zaman kullanılır?

Paket require("VSS/Events/Document") artık desteklenmiyor

Geri Bildirim

Ek kaynaklar

Paket `require("VSS/Events/Document")` artık desteklenmiyor