Menambahkan kontrol kustom ke formulir item kerja

Layanan Azure DevOps | Azure DevOps Server 2022 - Azure DevOps Server 2019

Kontrol kustom memungkinkan Anda mengubah cara pengguna melihat dan berinteraksi dengan bidang pada formulir item kerja. Artikel berikut memandikan Anda melalui bagaimana kontrol kustom sampel ini dibuat. Artikel ini memperlihatkan kepada Anda cara membangun kontrol kustom Anda sendiri.

Tip

Lihat dokumentasi terbaru kami tentang pengembangan ekstensi menggunakan Azure DevOps Extension SDK.

Prasyarat

Sertakan azure-devops-extension-sdk dalam proyek Anda:

1. Instal SDK melalui npm: npm install azure-devops-extension-sdk.

2. Inisialisasi dalam kode JavaScript Anda:

   import * as SDK from "azure-devops-extension-sdk";
   SDK.init();
   

Menambahkan kontrol kustom

Untuk menambahkan kontrol ke halaman utama, tambahkan kontribusi ke manifes ekstensi Anda. Jenis kontribusi harus ms.vss-work-web.work-item-form-control dan harus menargetkan ms.vss-work-web.work-item-form kontribusi.

"contributions": [
    {  
        "id": "sample-work-item-form-control",
        "type": "ms.vss-work-web.work-item-form-control",
        "description": "Custom work item form control",
        "targets": [
            "ms.vss-work-web.work-item-form"
        ],
        "properties": {
            "name": "My Control",
            "uri": "workItemControl.html",
            "height": 600
        }
    }
],
"manifestVersion": 1.0,
    "scopes": [
        "vso.work"
    ]

Formulir item kerja menambahkan IFrame untuk menghosting kontrol kustom.

Properti

Properti	Deskripsi
name	Teks yang muncul di grup.
uri	URI ke halaman yang menghosting html yang dimuat oleh IFrame.
height	(Opsional) Mendefinisikan tinggi IFrame. Saat dihilangkan, 50 piksel.
inputs	Nilai yang disediakan pengguna dalam formulir.

Jika Anda ingin mengubah ukuran IFrame secara dinamis, Anda dapat menggunakan yang resize method tersedia di SDK klien.

Kontrol kustom pada formulir item kerja adalah jenis kontribusi lain, seperti kontribusi grup & halaman. Perbedaan utamanya adalah kontribusi kontrol dapat mengambil serangkaian input pengguna sementara kontribusi grup dan halaman tidak dapat dilakukan.

Mengontrol input kontribusi

Untuk menentukan input untuk kontribusi kontrol Anda, gunakan inputs properti di objek kontribusi dalam manifes.

Dalam sampel berikut, Anda akan melihat dua input: FieldName dan Colors. FieldName menentukan bidang mana yang terkait dengan kontrol. Colors mengonfigurasi peta warna mana yang nilainya berada dalam kontrol.

Nilai untuk input disediakan oleh pengguna saat mereka menambahkan ke formulir item kerja. Nilai-nilai ini diteruskan ke kontribusi kontrol saat dimuat pada formulir.

"inputs": [
    {
        "id": "FieldName",
        "description": "The field associated with the control.",
        "type": "WorkItemField",
        "properties": {
            "workItemFieldTypes": ["String"]
        },
        "validation": {
            "dataType": "String",
            "isRequired": true
        }
    },
    {
        "id": "Colors",
        "description": "The colors that match the values in the control.",
        "type": "string",
        "validation": {
            "dataType": "String",
            "isRequired": false
        }
    }
]

Properti berikut menentukan input pengguna yang dapat digunakan kontribusi:

• id - ID unik untuk input.
• description - Beberapa kalimat yang menjelaskan input.
• jenis (opsional) - Jenis input.
  • Nilai yang valid:
    • WorkItemField - Menunjukkan bahwa input adalah bidang Item Kerja. Nilai yang disediakan oleh pengguna untuk input ini harus menjadi nama referensi untuk bidang item kerja yang valid.
• properti (opsional) - Properti kustom untuk input.
  • Kunci yang valid:
    • workItemFieldTypes - Menentukan array jenis bidang yang didukung input ini. Nilai yang valid:
      • String
      • Integer
      • DateTime
      • PlainText
      • HTML
      • TreePath
      • History
      • Double
      • Guid
      • Boolean
      • Identity
      • PicklistString
      • PicklistInteger
      • PicklistDouble
• validasi - Sekumpulan properti yang menentukan nilai mana yang dianggap valid untuk input.
  • Kunci yang valid:
    • dataType - Mendefinisikan jenis data dari nilai input. Nilai yang valid untuk properti ini:
      • String
      • Number
      • Boolean
      • Field
    • isRequired - Nilai boolean, yang menunjukkan apakah input diperlukan untuk memiliki nilai.

Sampel JavaScript

Ekstensi kontrol berfungsi seperti ekstensi grup atau halaman dengan satu perbedaan yang dapat mengambil input pengguna tertentu. Untuk membaca nilai input pengguna, gunakan VSS.getConfiguration().witInputs. Sampel berikut menunjukkan cara mendaftarkan objek yang dipanggil saat peristiwa terjadi pada formulir item kerja yang dapat memengaruhi kontrol yang Anda kontribusikan. Ini juga menunjukkan cara membaca nilai input yang disediakan oleh pengguna untuk kontrol ini.

import { Control } from "control";
import * as SDK from "azure-devops-extension-sdk";
import * as ExtensionContracts from "azure-devops-extension-api/WorkItemTracking/WorkItemTracking";

let control;

const provider = () => {
    return {
        onLoaded: (workItemLoadedArgs) => {
            // create the control
            const config = SDK.getConfiguration();
            const fieldName = config.witInputs["FieldName"];
            const colors = config.witInputs["Colors"];
            control = new Control(fieldName, colors);
        },
        onFieldChanged: (fieldChangedArgs) => {
            const changedValue = fieldChangedArgs.changedFields[control.getFieldName()];
            if (changedValue !== undefined) {
                control.updateExternal(changedValue);
            }
        }
    };
};

SDK.init();
SDK.ready().then(() => {
    SDK.register(SDK.getContributionId(), provider);
});

Cuplikan layar berikut menunjukkan contoh kontrol item kerja kustom untuk bidang Prioritas .