İş öğesi formunu genişletme

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

İş öğesi formunun kullanıcılara bir uzantı aracılığıyla yapılan katkılar aracılığıyla nasıl sunulduğunu özelleştirmeyi öğrenin.

• Ana sayfaya grup ekleme
• Sayfa ekleme (sekme)
• Bağlam menüsüne eylem ekleme
• Özel denetim ekleme
• Formdaki olayları dinleme
• İş öğesi formunda katkıları yapılandırma

Tam kaynak için GitHub'daki Azure DevOps Uzantı Örnekleri'ndeki kullanıcı arabirimi örneğine bakın.

Grup ekleme

Ana sayfaya grup eklemek için uzantı bildiriminize 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

Özellik	Açıklama
name	Grupta görüntülenen metin.
uri	İş öğesi formunda ve betiklerinde görüntülenen html'yi barındıran bir sayfaya URI.
height	(İsteğe bağlı) Grubun yüksekliğini tanımlar. Atlandığında %100 olur.

JavaScript örneği

Bu örnek, katkıda bulunan grubunuzu etkileyebilecek iş öğesi formunda olaylar gerçekleştiğinde çağrılan bir nesnenin nasıl kaydedildiğini gösterir. Daha fazla örnek için bkz . WorkItemFormGroup Örneği .

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

Ekinlikler

Etkinlik	Olay açıklaması	Bağımsız değişken	Bağımsız değişken tanımı
Onfieldchanged	Bir alan değiştikten sonra tetiklenir. Alan değişikliği diğer alanları güncelleştiren çalıştırılan kurallarsa, tüm bu değişiklikler tek bir olayın parçasıdır.	Kimlik	İş öğesinin kimliği.
changedFields	Tüm değiştirilen alanların başvuru adına sahip dizi.	Kimlik	İş öğesinin kimliği.
Onloaded	Veriler iş öğesi formunda yüklendiğinde, kullanıcı bir iş öğesini açtığında veya kullanıcı önceliklendirme görünümünde başka bir iş öğesine gittiğinde tetiklendi.	Kimlik	İş öğesinin kimliği.
onReset	Kullanıcı iş öğesindeki değişiklikleri geri aldıktan sonra tetiklenir.	Kimlik	İş öğesinin kimliği.
onRefreshed	Kullanıcı iş öğesini el ile yeniledikten sonra tetiklendi.	Kimlik	İş öğesinin kimliği.
onSaved	Bir iş öğesi kaydedildikten sonra tetiklenir. İletişim kutusundaki iş öğeleri için, iletişim kutusu kapandığında bu katkı türü kaldırıldığından olayın tetiklendiğinden emin olmak için "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 tetiklendi.	Kimlik	İş öğesinin kimliği.

Sayfa ekleyin

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

İş öğesi formuna 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

Özellik	Açıklama
Adı	Sekme sayfasında görüntülenen metin.
uri	İş öğesi formunda ve betiklerinde görüntülenen html'yi barındıran bir sayfaya 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 .

Ekinlikler

Etkinlik	Olay açıklaması	Bağımsız değişken	Bağımsız değişken tanımı
Onfieldchanged	Bir alan değiştikten sonra tetiklenir. Alan değişikliği diğer alanları güncelleştiren çalıştırılan kurallarsa, tüm bu değişiklikler tek bir olayın parçasıdır.	Kimlik	İş öğesinin kimliği.
changedFields	Tüm değiştirilen alanların başvuru adına sahip dizi.	Kimlik	İş öğesinin kimliği.
Onloaded	Veriler iş öğesi formunda yüklendiğinde, kullanıcı bir iş öğesini açtığında veya kullanıcı önceliklendirme görünümünde başka bir iş öğesine gittiğinde tetiklendi.	Kimlik	İş öğesinin kimliği.
onReset	Kullanıcı iş öğesindeki değişiklikleri geri aldıktan sonra tetiklenir.	Kimlik	İş öğesinin kimliği.
onRefreshed	Kullanıcı iş öğesini el ile yeniledikten sonra tetiklendi.	Kimlik	İş öğesinin kimliği.
onSaved	Bir iş öğesi kaydedildikten sonra tetiklenir. İletişim kutusundaki iş öğeleri için, iletişim kutusu kapandığında bu katkı türü kaldırıldığından olayın tetiklendiğinden emin olmak için "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 tetiklendi.	Kimlik	İş öğesinin kimliği.

İş öğesi formunda katkıları yapılandırma

Azure DevOps Services'da grup uzantıları varsayılan olarak formun ikinci sütununun sonunda, sayfa katkıları ise tüm iş öğesi form sayfalarından sonra 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 denetim, grup ve sayfa katkılarını iş öğesi biçiminde göstermek/gizlemek veya taşımak için bkz . İş öğesi form uzantılarını yapılandırma.

Menü ekle eylemi

İş öğesi araç çubuğuna bir öğe eklemek için uzantı bildiriminize bu katkıyı ekleyin. Öğe,... iş öğesi formunun sağ üst kısmındaki açılan menü.

"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

Özellik	Açıklama
text	Araç çubuğu öğesinde görüntülenen metin.
Başlık	Menü öğesinde görüntülenen araç ipucu metni.
toolbarText	Öğe üzerine gelindiğinde görüntülenen metin.
uri	Araç çubuğu eylem işleyicisini kaydeden bir sayfaya URI.
Simge	Menü öğesinde görünen simgenin URL'si. Göreli URL'ler baseUri kullanılarak çözümlenir.
group	Diğerleriyle ilgili olarak menü öğesinin nerede görüneceğini belirler. Aynı grup adına sahip araç çubuğu öğeleri gruplandırılır ve öğelerin geri kalanından bir ayırıcıya bölünür.
registeredObjectId	(İsteğe bağlı) Kayıtlı menü eylem işleyicisinin adı. Varsayılan olarak katkı kimliğini kullanır.

Olayları dinleme

İş öğesi olaylarını dinleyen iş öğesine gözlemci eklemek için uzantı bildiriminize bu katkıyı ekleyin. İş öğesi formunda gözlemciler için görselleştirme yoktur. Gözlemci formun dışında yaşadığından ve form kapandığında yok edilmediğinden, kaydedilen olayda iş öğesi formunu dinlemenin en iyi yolu budur. Bu, kaydetmeden hemen sonra gerçekleşebilir.

"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

Özellik	Açıklama
uri	Olayları dinleyen betikleri barındıran bir sayfaya URI.

Ekinlikler

Etkinlik	Olay açıklaması	Bağımsız değişken	Bağımsız değişken tanımı
Onfieldchanged	Bir alan değiştikten sonra tetiklenir. Alan değişikliği diğer alanları güncelleştiren çalıştırılan kurallarsa, tüm bu değişiklikler tek bir olayın parçasıdır.	Kimlik	İş öğesinin kimliği.
changedFields	Tüm değiştirilen alanların başvuru adına sahip dizi.	Kimlik	İş öğesinin kimliği.
Onloaded	Veriler iş öğesi formunda yüklendiğinde, kullanıcı bir iş öğesini açtığında veya kullanıcı önceliklendirme görünümünde başka bir iş öğesine gittiğinde tetiklendi.	Kimlik	İş öğesinin kimliği.
onReset	Kullanıcı iş öğesindeki değişiklikleri geri aldıktan sonra tetiklenir.	Kimlik	İş öğesinin kimliği.
onRefreshed	Kullanıcı iş öğesini el ile yeniledikten sonra tetiklendi.	Kimlik	İş öğesinin kimliği.
onSaved	Bir iş öğesi kaydedildikten sonra tetiklenir. İletişim kutusundaki iş öğeleri için, iletişim kutusu kapandığında bu katkı türü kaldırıldığından olayın tetiklendiğinden emin olmak için "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 tetiklendi.	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 Boards Hub ile değişiklikler

Not

Yeni Boards Hub şu anda önizleme aşamasındadır ancak 2024'te herkes tarafından kullanılabilir durumdadır. New Boards Hub'ı hemen etkinleştirmenizi ve dahili uzantılarınızı test etmenizi kesinlikle öneririz.

En son SDK'ları kullanma

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 her sprint'te yöntemleri ve arabirimleri güncelleştiriyoruz.

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

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

Paket gereksinimi("VSS/Olaylar/Belge") artık desteklenmiyor

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