İş öğesi formunu genişletme

Azure DevOps Services | Azure DevOps Server 2020 | Azure DevOps Server 2019 | TFS 2018-TFS 2017

İş öğesi formunun, uzantı aracılığıyla yapılan katkılar aracılığıyla kullanıcılara nasıl sun sunlsa özelleştirebileceğinizi öğrenin.

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

Grup ekleme

İş öğesi formundaki araç çubuğu öğesi.

Ana sayfaya bir 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 hedeflemeli.

"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 betiklerde gösteren html'yi barındıran sayfanın URI'si
height (İsteğe bağlı) Grubun yüksekliğini tanımlar. Atlanırsa %100'dır

JavaScript örneği

Bu örnekte, iş öğesi formunda olaylar oluştuğunda, katkıda bulunan grubunızı etkileyene kadar çağrılacak bir nesnenin nasıl kaydedilebilecekleri açıklandı.

    VSS.require(["TFS/WorkItemTracking/Services"], function (_WorkItemServices) {
        // 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).
        function getWorkItemFormService()
        {
            return _WorkItemServices.WorkItemFormService.getService();
        }
    
        // Register a listener for the work item group contribution.
        VSS.register(VSS.getContribution().id, 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

Olay Olay açıklaması Bağımsız Değişken Bağımsız değişken tanımı
onFieldChanged Bir alan değiştirildikten sonra harekete geçirildi. Alan değişikliği, diğer alanları güncelleştiren kuralları çalıştırmışsa, tüm bu değişiklikler tek bir etkinliğin bir parçasıdır. ID İş öğesinin KIMLIĞI.
changedFields Tüm değiştirilen alanların başvuru adına sahip dizi. ID İş öğesinin KIMLIĞI.
onLoaded İş öğesi formuna veriler yüklendikten sonra, Kullanıcı bir iş öğesi açtığında ya da Kullanıcı önceliklendirme görünümünde başka bir iş öğesine gittiğinde harekete geçirilir. ID İş öğesinin KIMLIĞI.
onReset Kullanıcı iş öğesinde yapılan değişiklikleri geri aldıktan sonra harekete geçirildi. ID İş öğesinin KIMLIĞI.
Onyenilendi Kullanıcı iş öğesini el ile yeniledikten sonra harekete geçirildi. ID İş öğesinin KIMLIĞI.
onSaved Bir iş öğesi kaydedildikten sonra harekete geçirildi. İletişim kutusundaki iş öğeleri için, iletişim kutusu kapandıktan sonra olayın başlatıldığından emin olmak için "MS. VSS-Work-web.work-Item-Notifications" türünü hedeflemelidir, bu katkı türü de kaldırılır. Daha fazla bilgi için bkz. olayları dinleme. ID İş öğesinin KIMLIĞI.
Onyüklenmeyen Kullanıcı iletişim kutusunu kapatmadan veya Kullanıcı önceliklendirme görünümünde başka bir iş öğesine geçmeden önce tetiklenir. ID İş öğesinin KIMLIĞI.

Sayfa ekleme

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

İş öğesi formunda sekme olarak yeni sayfa.

İş öğ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 hedeflemeli.

"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
name Sekme sayfasında görüntülenen metin.
Urı İş öğesi formunda ve betiklerde gösteren html'yi barındıran bir sayfanın URI'si.

JavaScript örneği

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

Ekinlikler

Olay Olay açıklaması Bağımsız Değişken Bağımsız değişken tanımı
onFieldChanged Bir alan değiştirildikten sonra harekete geçirildi. Alan değişikliği, diğer alanları güncelleştiren kuralları çalıştırmışsa, tüm bu değişiklikler tek bir etkinliğin bir parçasıdır. ID İş öğesinin KIMLIĞI.
changedFields Tüm değiştirilen alanların başvuru adına sahip dizi. ID İş öğesinin KIMLIĞI.
onLoaded İş öğesi formuna veriler yüklendikten sonra, Kullanıcı bir iş öğesi açtığında ya da Kullanıcı önceliklendirme görünümünde başka bir iş öğesine gittiğinde harekete geçirilir. ID İş öğesinin KIMLIĞI.
onReset Kullanıcı iş öğesinde yapılan değişiklikleri geri aldıktan sonra harekete geçirildi. ID İş öğesinin KIMLIĞI.
Onyenilendi Kullanıcı iş öğesini el ile yeniledikten sonra harekete geçirildi. ID İş öğesinin KIMLIĞI.
onSaved Bir iş öğesi kaydedildikten sonra harekete geçirildi. İletişim kutusundaki iş öğeleri için, iletişim kutusu kapandıktan sonra olayın başlatıldığından emin olmak için "MS. VSS-Work-web.work-Item-Notifications" türünü hedeflemelidir, bu katkı türü de kaldırılır. Daha fazla bilgi için bkz. olayları dinleme. ID İş öğesinin KIMLIĞI.
Onyüklenmeyen Kullanıcı iletişim kutusunu kapatmadan veya Kullanıcı önceliklendirme görünümünde başka bir iş öğesine geçmeden önce tetiklenir. ID İş öğesinin KIMLIĞI.

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

Bu Azure DevOps Services grup uzantıları varsayılan olarak formun ikinci sütun sonunda görünür ve sayfa katkıları tüm iş öğesi form sayfalarından sonra sekme olarak görünür. Denetim katkıları formda varsayılan olarak gösterilmez, bu nedenle kullanıcıların bunları forma el ile eklemesi gerekir. Bu Azure DevOps Server, iş öğesi formunda denetimi, grubu ve sayfa katkılarını göstermek/gizlemek veya taşımak için bkz. İş öğesi formu uzantılarını yapılandırma.

Menü ekle eylemi

İş öğesi araç çubuğuna bir öğe ekleyin.

İş öğesi araç çubuğuna bir öğe eklemek için uzantı bildiriminize bu katkıyı ekleyin. Öğe... iş öğesi formunun sağ üst kısmında 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
metin Araç çubuğu öğesi üzerinde görünen metin.
başlık Menü öğesi üzerinde görünen araç ipucu metni.
toolbarText Öğenin üzerine gelindiğinde görüntülenen metin.
Urı Araç çubuğu eylem işleyicisini kaydeden sayfanın URI'si.
Simge Menü öğesinde görüntülenen bir simgenin URL'si. Göreli URL'ler baseUri kullanılarak çözümlenir.
group Menü öğesinin nerede görüntülendiğinden ve diğer kişilerle ilgili olarak belirler. Aynı grup adına sahip araç çubuğu öğeleri gruplandı ve geri kalan öğelerden ayırıcıyla bölündü.
registeredObjectId (İsteğe bağlı) Kayıtlı menü eylemi işleyicinin adı. Varsayılan olarak katkı kimliği kullanılı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. Bu, gözlemci formun dışında yaşadığı ve form kapanca yok edilemeyecek olan ve kaydetmeden hemen sonra meydana gelen iş öğesi formunu kaydetme olayında dinlemenin en iyi yolu.

"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
Urı Olayları dinleyen betikleri barındıran bir sayfanın URI'si

Ekinlikler

Olay Olay açıklaması Bağımsız Değişken Bağımsız değişken tanımı
onFieldChanged Bir alan değiştirildikten sonra harekete geçirildi. Alan değişikliği, diğer alanları güncelleştiren kuralları çalıştırmışsa, tüm bu değişiklikler tek bir etkinliğin bir parçasıdır. ID İş öğesinin KIMLIĞI.
changedFields Tüm değiştirilen alanların başvuru adına sahip dizi. ID İş öğesinin KIMLIĞI.
onLoaded İş öğesi formuna veriler yüklendikten sonra, Kullanıcı bir iş öğesi açtığında ya da Kullanıcı önceliklendirme görünümünde başka bir iş öğesine gittiğinde harekete geçirilir. ID İş öğesinin KIMLIĞI.
onReset Kullanıcı iş öğesinde yapılan değişiklikleri geri aldıktan sonra harekete geçirildi. ID İş öğesinin KIMLIĞI.
Onyenilendi Kullanıcı iş öğesini el ile yeniledikten sonra harekete geçirildi. ID İş öğesinin KIMLIĞI.
onSaved Bir iş öğesi kaydedildikten sonra harekete geçirildi. İletişim kutusundaki iş öğeleri için, iletişim kutusu kapandıktan sonra olayın başlatıldığından emin olmak için "MS. VSS-Work-web.work-Item-Notifications" türünü hedeflemelidir, bu katkı türü de kaldırılır. Daha fazla bilgi için bkz. olayları dinleme. ID İş öğesinin KIMLIĞI.
Onyüklenmeyen Kullanıcı iletişim kutusunu kapatmadan veya Kullanıcı önceliklendirme görünümünde başka bir iş öğesine geçmeden önce tetiklenir. ID İş öğ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/VSS.SDK.js"></script>

    <script>
        VSS.init({
            usePlatformScripts: true
        });
        
        VSS.ready(function () {
             // Register a listener for the work item page contribution.
            VSS.register(VSS.getContribution().id, 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>