İş öğesi formuna özel denetim ekleme

Azure DevOps Services | Azure DevOps Server | Azure DevOps Server 2022

Özel denetimler, kullanıcıların iş öğesi formundaki bir alanı görüntüleme ve alanla etkileşim kurma şeklini değiştirmenizi sağlar. Aşağıdaki makale, bu örnek özel denetimin nasıl oluşturulduğu konusunda size yol gösterir. Bu makalede, kendi özel denetiminizi nasıl oluşturabileceğiniz gösterilmektedir.

İpucu

En son uzantı geliştirme kılavuzu için, tema oluşturma ve VSS.SDK'den geçiş dahil, Azure DevOps Uzantısı SDK geliştirici portalına bakın.

Önkoşullar

Projenize azure-devops-extension-sdk'sını ekleyin:

  1. SDK'yi npm aracılığıyla yükleyin: npm install azure-devops-extension-sdk.

  2. JavaScript kodunuzda başlatın:

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

Denetim katkısını ekleme

Tür hedeflemesi ms.vss-work-web.work-item-form-controlile ms.vss-work-web.work-item-form bir katkı ekleyin:

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

İş öğesi formu, özel denetimi bir IFrame'e yükler.

Denetim özellikleri

Özellik Açıklama
name Grupta görünen metin.
uri IFrame'de yüklenen HTML sayfasına URI.
height (İsteğe bağlı) IFrame'in piksel cinsinden yüksekliği. Varsayılan değer 50'dir.
inputs Kullanıcıların forma denetim eklerken sağladığı değerler.

IFrame'i dinamik olarak yeniden boyutlandırmak için SDK'daki yöntemini kullanın resize .

Özel denetim, grup ve sayfa katkılarına benzer bir katkı türüdür. Önemli fark, denetim katkılarının kullanıcı girişlerini kabul etmesinde, grup ve sayfa katkılarının kabul etmediğinden kaynaklanır.

Katkı girişlerini denetleme

inputs Denetiminiz için yapılandırılabilir girişler tanımlamak için katkı nesnesindeki özelliğini kullanın.

Aşağıdaki örnek iki girişi tanımlar: FieldName denetimin ilişkili olduğu iş öğesi alanını belirtir ve Colors hangi renklerin hangi alan değerleriyle eşlendiği yapılandırılır. Kullanıcılar forma denetimi eklediklerinde bu değerleri sağlar ve değerler yük zamanında denetime geçirilir.

"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
        }
    }
]

Giriş özellikleri

Aşağıdaki özellikler bir kullanıcı girişi tanımlar:

Özellik Açıklama
ID Girişin benzersiz kimliği.
Açıklama Girişin kısa açıklaması.
type (İsteğe bağlı) Giriş türü. Değerin bir iş öğesi alanının referans adı olması gerektiğini belirtmek için WorkItemField kullanın.
Özellikler (İsteğe bağlı) Özel özellikler. Hangi alan türlerinin geçerli olduğunu kısıtlamak için kullanın workItemFieldTypes (örneğin, String, Integer, DateTime). Boolean
Doğrulama Doğrulama kuralları. dataType (String, Number, Boolean, veya Field) ve isRequired (true veya false) ayarlayın.

Desteklenen workItemFieldTypes değerler: String, Integer, DateTime, PlainText, HTML, TreePath, History, Double, Guid, Boolean, Identity, PicklistString, PicklistInteger, PicklistDouble.

JavaScript örneği

Özel denetim uzantısı, bir grup veya sayfa uzantısı gibi çalışır ve kullanıcı giriş değerlerini SDK.getConfiguration().witInputs aracılığıyla okur. Aşağıdaki örnek, iş öğesi form olaylarına yanıt veren bir sağlayıcı kaydeder:

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);
});

Aşağıdaki ekran görüntüsünde Öncelik alanı için örnek bir özel iş öğesi denetimi gösterilmektedir.

İş öğesi formundaki özel denetimin ekran görüntüsü.

İlgili içerik

  • Last updated on