Memperluas formulir item kerja
Layanan Azure DevOps | Azure DevOps Server 2022 - Azure DevOps Server 2019
Pelajari cara mengkustomisasi bagaimana formulir item kerja disajikan kepada pengguna melalui kontribusi yang dibuat melalui ekstensi.
- Menambahkan grup ke halaman utama
- Menambahkan halaman (tab)
- Menambahkan tindakan ke menu konteks
- Menambahkan kontrol kustom
- Mendengarkan peristiwa di formulir
- Mengonfigurasi kontribusi dalam formulir item kerja
Lihat contoh UI di Sampel Ekstensi Azure DevOps di GitHub untuk sumber lengkapnya.
Menambahkan grup
Untuk menambahkan grup ke halaman utama, tambahkan kontribusi ke manifes ekstensi Anda. Jenis kontribusi ini harus ms.vss-work-web.work-item-form-group dan harus menargetkan ms.vss-work-web.work-item-form kontribusi.
"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
}
}
]
Properti
| Properti | Deskripsi |
|---|---|
name |
Teks yang muncul di grup. |
uri |
URI ke halaman yang menghosting html yang ditampilkan pada formulir item kerja dan skripnya. |
height |
(Opsional) Menentukan tinggi grup. Ketika dihilangkan, itu adalah 100%. |
Sampel JavaScript
Contoh ini menunjukkan cara mendaftarkan objek yang dipanggil saat peristiwa terjadi pada formulir item kerja yang dapat memengaruhi grup yang Anda kontribusikan.
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)));
}
}
});
Acara
| Kejadian | Deskripsi kejadian | Argumen | Deskripsi argumen |
|---|---|---|---|
| onFieldChanged | Diaktifkan setelah bidang berubah. Jika bidang mengubah aturan eksekusi yang memperbarui bidang lain, semua perubahan ini adalah bagian dari satu peristiwa. | ID | ID item kerja. |
| changedFields | Array dengan nama referensi semua bidang yang diubah. | ID | ID item kerja. |
| onLoaded | Diaktifkan setelah ketika data dimuat dalam formulir item kerja, saat pengguna membuka item kerja, atau ketika pengguna menavigasi ke item kerja lain dalam tampilan triase. | ID | ID item kerja. |
| onReset | Diaktifkan setelah pengguna membatalkan perubahan pada item kerja. | ID | ID item kerja. |
| onRefreshed | Diaktifkan setelah pengguna me-refresh item kerja secara manual. | ID | ID item kerja. |
| onSaved | Diaktifkan setelah item kerja disimpan. Untuk item kerja dalam dialog, Anda harus menargetkan jenis "ms.vss-work-web.work-item-notifications" untuk memastikan peristiwa diaktifkan sejak setelah dialog ditutup, jenis kontribusi ini akan dibongkar. Untuk informasi selengkapnya, lihat Mendengarkan peristiwa. | ID | ID item kerja. |
| onUnloaded | Diaktifkan sebelum pengguna menutup dialog, atau sebelum pengguna berpindah ke item kerja lain dalam tampilan triase. | ID | ID item kerja. |
Menambahkan halaman
Halaman baru dirender sebagai tab pada formulir item kerja. Halaman baru muncul di samping tab Detail.
Untuk menambahkan halaman ke formulir item kerja, tambahkan kontribusi ke manifes ekstensi Anda. Jenis kontribusi ini harus ms.vss-work-web.work-item-form-page dan harus menargetkan ms.vss-work-web.work-item-form kontribusi.
"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"
}
}
]
Properti
| Properti | Deskripsi |
|---|---|
| nama | Teks yang muncul di halaman tab. |
| uri | URI ke halaman yang menghosting html yang ditampilkan pada formulir item kerja dan skripnya. |
Sampel JavaScript
Lihat sampel JavaScript di bagian grup formulir. Nama objek terdaftar harus cocok dengan id kontribusi.
Acara
| Kejadian | Deskripsi kejadian | Argumen | Deskripsi argumen |
|---|---|---|---|
| onFieldChanged | Diaktifkan setelah bidang berubah. Jika bidang mengubah aturan eksekusi yang memperbarui bidang lain, semua perubahan ini adalah bagian dari satu peristiwa. | ID | ID item kerja. |
| changedFields | Array dengan nama referensi semua bidang yang diubah. | ID | ID item kerja. |
| onLoaded | Diaktifkan setelah ketika data dimuat dalam formulir item kerja, saat pengguna membuka item kerja, atau ketika pengguna menavigasi ke item kerja lain dalam tampilan triase. | ID | ID item kerja. |
| onReset | Diaktifkan setelah pengguna membatalkan perubahan pada item kerja. | ID | ID item kerja. |
| onRefreshed | Diaktifkan setelah pengguna me-refresh item kerja secara manual. | ID | ID item kerja. |
| onSaved | Diaktifkan setelah item kerja disimpan. Untuk item kerja dalam dialog, Anda harus menargetkan jenis "ms.vss-work-web.work-item-notifications" untuk memastikan peristiwa diaktifkan sejak setelah dialog ditutup, jenis kontribusi ini akan dibongkar. Untuk informasi selengkapnya, lihat Mendengarkan peristiwa. | ID | ID item kerja. |
| onUnloaded | Diaktifkan sebelum pengguna menutup dialog, atau sebelum pengguna berpindah ke item kerja lain dalam tampilan triase. | ID | ID item kerja. |
Mengonfigurasi kontribusi dalam formulir item kerja
Di Azure DevOps Services, secara default ekstensi grup muncul di akhir kolom kedua kontribusi formulir dan halaman muncul setelah semua halaman formulir item kerja sebagai tab. Kontribusi kontrol tidak ditampilkan dalam formulir secara default sehingga pengguna harus menambahkannya secara manual ke formulir. Di Azure DevOps Server, untuk menampilkan/menyembunyikan atau memindahkan kontribusi kontrol, grup, dan halaman dalam formulir item kerja, lihat Mengonfigurasi ekstensi formulir item kerja.
Tambahkan tindakan menu
Untuk menambahkan item ke toolbar item kerja, tambahkan kontribusi ini ke manifes ekstensi Anda. Item muncul di ... dropdown di kanan atas formulir item kerja.
"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"
}
}
]
Properti
| Properti | Deskripsi |
|---|---|
| text | Teks yang muncul pada item toolbar. |
| title | Teks tipsalat yang muncul pada item menu. |
| toolbarText | Teks yang muncul saat item sedang diarahkan ke atas. |
| uri | URI ke halaman yang mendaftarkan penanganan tindakan toolbar. |
| ikon | URL ke ikon yang muncul pada item menu. URL relatif diselesaikan menggunakan baseUri. |
| grup | Menentukan tempat item menu muncul, terkait dengan orang lain. Item toolbar dengan nama grup yang sama dikelompokkan dan dibagi dengan pemisah dari item lainnya. |
| registeredObjectId | (Opsional) Nama penangan tindakan menu terdaftar. Default ke ID kontribusi. |
Mendengarkan peristiwa
Untuk menambahkan pengamat ke item kerja, yang mendengarkan peristiwa item kerja, tambahkan kontribusi ini ke manifes ekstensi Anda. Tidak ada visualisasi untuk pengamat pada formulir item kerja. Ini adalah cara terbaik untuk mendengarkan formulir item kerja pada peristiwa Disimpan karena pengamat tinggal di luar formulir dan tidak dihancurkan ketika formulir ditutup, yang mungkin terjadi tepat setelah disimpan.
"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"
}
}
]
Properti
| Properti | Deskripsi |
|---|---|
| uri | URI ke halaman yang menghosting skrip yang mendengarkan peristiwa. |
Acara
| Kejadian | Deskripsi kejadian | Argumen | Deskripsi argumen |
|---|---|---|---|
| onFieldChanged | Diaktifkan setelah bidang berubah. Jika bidang mengubah aturan eksekusi yang memperbarui bidang lain, semua perubahan ini adalah bagian dari satu peristiwa. | ID | ID item kerja. |
| changedFields | Array dengan nama referensi semua bidang yang diubah. | ID | ID item kerja. |
| onLoaded | Diaktifkan setelah ketika data dimuat dalam formulir item kerja, saat pengguna membuka item kerja, atau ketika pengguna menavigasi ke item kerja lain dalam tampilan triase. | ID | ID item kerja. |
| onReset | Diaktifkan setelah pengguna membatalkan perubahan pada item kerja. | ID | ID item kerja. |
| onRefreshed | Diaktifkan setelah pengguna me-refresh item kerja secara manual. | ID | ID item kerja. |
| onSaved | Diaktifkan setelah item kerja disimpan. Untuk item kerja dalam dialog, Anda harus menargetkan jenis "ms.vss-work-web.work-item-notifications" untuk memastikan peristiwa diaktifkan sejak setelah dialog ditutup, jenis kontribusi ini akan dibongkar. Untuk informasi selengkapnya, lihat Mendengarkan peristiwa. | ID | ID item kerja. |
| onUnloaded | Diaktifkan sebelum pengguna menutup dialog, atau sebelum pengguna berpindah ke item kerja lain dalam tampilan triase. | ID | ID item kerja. |
Sampel HTML/JavaScript
<!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>
Perubahan dengan Hub Papan Baru
Catatan
Hub Papan Baru saat ini dalam pratinjau tetapi berada di jalur tersedia untuk semua orang. Kami sangat menyarankan agar Anda segera mengaktifkan New Boards Hub dan menguji ekstensi internal Anda.
Menggunakan SDK terbaru
Pastikan ekstensi Anda menggunakan versi terbaru azure-devops-extension-sdk
Saat menggunakan SDK baru, Anda juga harus menggunakan paket azure-devops-extension-api untuk REST API. Kami memperbarui metode dan antarmuka setiap sprint untuk memastikannya mencakup semua fitur terbaru.
Kapan menggunakan tindakan atau penyedia tindakan
Gunakan ms.vss-web.action-provider saat memuat item menu secara dinamis menggunakan getMenuItems pada penangan menu. Hindari menggunakan ms.vss-web.action-provider saat item menu Anda statis dan ditentukan dalam manifes Anda. Sebagai gantinya ms.vss-web.action harus digunakan.
Persyaratan paket("VSS/Events/Document") tidak lagi didukung
require("VSS/Events/Document") impor tidak lagi didukung dengan New Boards Hub.