İş öğesi formunu genişlet

Azure DevOps Hizmetleri | Azure DevOps Server | Azure DevOps Server 2022

Gruplar, sayfalar, menü eylemleri, gözlemciler veya özel denetimler ekleyerek iş öğesi formunu özelleştirmek için uzantıları kullanın.

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:

Grup Ekle
Sayfa (sekme) ekle
Menü eylemi ekleme
Özel denetim ekleme
Olayları dinleme
Katkıları yapılandırma

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

Tavsiye

En son uzantı geliştirme kılavuzu için, tema oluşturma ve VSS.SDK'den geçiş dahil, Azure DevOps Uzantısı SDK geliştirici portalına 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ı bildiriminize, ms.vss-work-web.work-item-form-group türünü hedefleyen ms.vss-work-web.work-item-form ile bir girdisi ekleyin.

"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`	IFrame'de yüklenen HTML sayfasına URI.
`height`	(İsteğe bağlı) Grubun yüksekliği. Varsayılan değer 100%'dir.

JavaScript örneği

Bu örnek, iş öğesi formu olaylarına yanıt veren bir sağlayıcıyı kaydeder. İş öğesi yüklendiğinde alan değerlerini okumak için WorkItemFormService öğesini kullanır.

import { IWorkItemFormService, WorkItemTrackingServiceIds } from "azure-devops-extension-api/WorkItemTracking";
import * as SDK from "azure-devops-extension-sdk";

async function getWorkItemFormService(): Promise<IWorkItemFormService> {
    return await SDK.getService<IWorkItemFormService>(WorkItemTrackingServiceIds.WorkItemFormService);
}

SDK.init();

SDK.ready().then(() => {
    SDK.register(SDK.getContributionId(), () => {
        return {
            // Called when the active work item is modified
            onFieldChanged: (args) => {
                console.log("onFieldChanged", JSON.stringify(args));
            },

            // Called when a new work item is being loaded in the UI
            onLoaded: async (args) => {
                const service = await getWorkItemFormService();
                const values = await service.getFieldValues([
                    "System.Id", "System.Title", "System.State", "System.CreatedDate"
                ]);
                console.log("onLoaded", JSON.stringify(values));
            },

            // Called when the active work item is being unloaded in the UI
            onUnloaded: (args) => {
                console.log("onUnloaded", JSON.stringify(args));
            },

            // Called after the work item has been saved
            onSaved: (args) => {
                console.log("onSaved", JSON.stringify(args));
            },

            // Called when the work item is reset to its unmodified state (undo)
            onReset: (args) => {
                console.log("onReset", JSON.stringify(args));
            },

            // Called when the work item has been refreshed from the server
            onRefreshed: (args) => {
                console.log("onRefreshed", JSON.stringify(args));
            }
        };
    });
});

Etkinlikler

Etkinlik	Olay açıklaması	Tartışma	Argüman açıklaması
`onFieldChanged`	Bir alan değiştikten sonra kovuldu. Diğer alanları güncelleyen kurallar çalıştırıldığında, bu alan değişikliğiyle tetiklenen tüm değişiklikler tek bir olayın 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. İletişim kutusundaki iş öğeleri için, iletişim kutusu kapandıktan sonra bu katkı türünün yüklenmesinin durdurulduğu göz önüne alınarak olayın tetiklendiğinden emin olmak amacıyla `ms.vss-work-web.work-item-notifications` türünü hedeflemeniz 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 sayfa eklemek için, uzantı bildiriminize ms.vss-work-web.work-item-form-page türünde ve ms.vss-work-web.work-item-form hedefleyen bir katkı ekleyin.

"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
`name`	Sekme sayfasında görünen metin.
`uri`	IFrame'de yüklenen HTML sayfasına URI.

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	Argüman açıklaması
`onFieldChanged`	Bir alan değiştikten sonra kovuldu. Diğer alanları güncelleyen kurallar çalıştırıldığında, bu alan değişikliğiyle tetiklenen tüm değişiklikler tek bir olayın 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. İletişim kutusundaki iş öğeleri için, iletişim kutusu kapandıktan sonra bu katkı türünün yüklenmesinin durdurulduğu göz önüne alınarak olayın tetiklendiğinden emin olmak amacıyla `ms.vss-work-web.work-item-notifications` türünü hedeflemeniz 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ı yapılandırma

Azure DevOps Services'da grup uzantıları varsayılan olarak ikinci sütunun sonunda, sayfa katkıları ise son sekme olarak görünür. Denetim katkıları varsayılan olarak gösterilmez. Kullanıcıların bunları forma el ile eklemesi gerekir. Azure DevOps Server'da bkz. Katkıları göstermek, gizlemek veya taşımak için iş öğesi form uzantılarını yapılandırma .

İş öğ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. Öğe dikey üç nokta (...) açılan menüsünde görünür.

"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, `baseUri` kullanılarak çözülür.
`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

Gözlemciler, form üzerinde herhangi bir kullanıcı arabirimi olmaksızın iş öğesi olaylarını dinler. Formun dışında yaşadıkları ve form iletişim kutusu kapandığında yok edilmedikleri için, onSaved olayını dinlemek amacıyla gözlemcileri kullanın.

"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	Argüman açıklaması
`onFieldChanged`	Bir alan değiştikten sonra kovuldu. Diğer alanları güncelleyen kurallar çalıştırıldığında, bu alan değişikliğiyle tetiklenen tüm değişiklikler tek bir olayın 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. İletişim kutusundaki iş öğeleri için, iletişim kutusu kapandıktan sonra bu katkı türünün yüklenmesinin durdurulduğu göz önüne alınarak olayın tetiklendiğinden emin olmak amacıyla `ms.vss-work-web.work-item-notifications` türünü hedeflemeniz 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

JavaScript örneği

Aşağıdaki örnek, modern SDK kullanarak bir gözlemci kaydeder:

import * as SDK from "azure-devops-extension-sdk";

SDK.init();

SDK.ready().then(() => {
    SDK.register(SDK.getContributionId(), () => {
        return {
            onFieldChanged: (args) => {
                // Handle field changes
            },
            onLoaded: (args) => {
                // Handle work item loaded
            },
            onUnloaded: (args) => {
                // Handle work item unloaded
            },
            onSaved: (args) => {
                // Handle work item saved
            },
            onReset: (args) => {
                // Handle work item reset (undo)
            },
            onRefreshed: (args) => {
                // Handle work item refreshed
            }
        };
    });
});

Uyumluluk notları

Eylem ve eylem sağlayıcısı karşılaştırması

ms.vss-web.action-provider menü öğelerini dinamik olarak yüklerken menü işleyicisinde getMenuItems kullanın. Menü öğeleriniz statik olduğunda ve bildirimde tanımlandığında kullanın ms.vss-web.action .

Kullanım dışı desenler

Aşağıdaki desenler artık desteklenmiyor:

require("VSS/Events/Document") - mevcut Boards deneyiminde desteklenmiyor
SDK.js ile usePlatformScripts: true betik etiketi - bunun yerine npm paketini azure-devops-extension-sdk kullanın

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2026-04-03

İş öğesi formunu genişlet

Grup ekleme

Özellikler

JavaScript örneği

Etkinlikler

Sayfa ekleyin

Özellikler

JavaScript örneği

Etkinlikler

Katkıları yapılandırma

Menü eylemi ekle

Özellikler

Etkinlikleri dinleyin

Özellikler

Etkinlikler

JavaScript örneği

Uyumluluk notları

Eylem ve eylem sağlayıcısı karşılaştırması

Kullanım dışı desenler

İlgili içerik

Geri Bildirim

Ek kaynaklar