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