Menambahkan kontrol kustom ke formulir item kerja

Layanan Azure DevOps | Azure DevOps Server | Azure DevOps Server 2022

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

Tips

Untuk panduan pengembangan ekstensi terbaru, termasuk tema dan migrasi dari VSS. SDK, lihat portal pengembang 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();

Tambahkan kontribusi pengendalian

Tambahkan kontribusi ke manifes ekstensi Anda dengan jenis ms.vss-work-web.work-item-form-control yang menargetkan ms.vss-work-web.work-item-form:

"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 memuat kontrol kustom dalam IFrame.

Properti kontrol

Properti Deskripsi
name Teks yang muncul di grup.
uri URI ke halaman HTML yang dimuat di IFrame.
height (Opsional) Tinggi IFrame dalam piksel. Nilai baku adalah 50.
inputs Nilai yang disediakan pengguna saat menambahkan kontrol ke formulir.

Untuk mengubah ukuran IFrame secara dinamis, gunakan resize metode di SDK.

Kontrol kustom adalah jenis kontribusi yang mirip dengan kontribusi grup dan halaman. Perbedaan utamanya adalah bahwa kontribusi kontrol menerima input pengguna, sementara kontribusi grup dan halaman tidak.

Pengontrolan terhadap kontribusi masukan

inputs Gunakan properti dalam objek kontribusi untuk menentukan input yang dapat dikonfigurasi untuk kontrol Anda.

Contoh berikut mendefinisikan dua input: FieldName menentukan bidang item kerja mana yang dikaitkan dengan kontrol, dan Colors mengonfigurasi warna mana yang dipetakan ke nilai bidang mana. Pengguna menyediakan nilai-nilai ini ketika mereka menambahkan kontrol ke formulir, dan nilai diteruskan ke kontrol pada waktu pemuatan.

"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 input

Properti berikut menentukan input pengguna:

Properti Deskripsi
Id ID unik untuk masukan.
deskripsi Deskripsi singkat input.
type (Opsional) Jenis input. Gunakan WorkItemField untuk menunjukkan nilai harus berupa nama referensi bidang item kerja.
Properti (Opsional) Properti kustomisasi. Gunakan workItemFieldTypes untuk membatasi jenis bidang mana yang valid (misalnya, , String, IntegerDateTime, Boolean).
Validasi Aturan validasi. Atur dataType (String, Number, Boolean, atau Field) dan isRequired (true atau false).

Nilai yang didukung workItemFieldTypes: String, Integer, DateTime, PlainText, HTML, TreePath, History, Double, Guid, Boolean, Identity, PicklistString, PicklistInteger, PicklistDouble.

Sampel JavaScript

Ekstensi kontrol kustom berfungsi seperti grup atau ekstensi halaman, dengan penambahan bahwa ekstensi tersebut membaca nilai input pengguna melalui SDK.getConfiguration().witInputs. Sampel berikut mendaftarkan penyedia yang merespons peristiwa formulir item kerja:

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 .

Cuplikan layar kontrol kustom dalam formulir item kerja.

Konten terkait

  • Last updated on