İş öğesi formuna özel denetim ekleme

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

Ö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. Kendi özel denetiminizi oluşturmayı öğrenin.

İpucu

Azure DevOps Uzantı SDK'sını kullanarak uzantı geliştirmeyle ilgili en yeni belgelerimize göz atın.

Özel denetimi ekleme

Ana sayfaya denetim eklemek için uzantı bildiriminize bir katkı ekleyin. Katkının türü olmalı ms.vss-work-web.work-item-form-control ve katkıyı ms.vss-work-web.work-item-form hedeflemelidir.

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

İş öğesi formu, özel denetimi barındırmak için bir IFrame ekler.

Özellikler

Özellik	Açıklama
name	Grupta görüntülenen metin.
uri	IFrame tarafından yüklenen html'yi barındıran bir sayfaya URI.
height	(İsteğe bağlı) IFrame'in yüksekliğini tanımlar. Atlandığında 50 piksel olur.
inputs	Kullanıcının formda sağladığı değerler.

IFrame'i dinamik olarak yeniden boyutlandırmak istiyorsanız, istemci SDK'sında bulunan öğesini resize method kullanabilirsiniz.

İş öğesi formundaki özel denetim, grup ve sayfa katkısı gibi başka bir katkı türüdür. Temel fark, grup ve sayfa katkıları alamazken denetim katkılarının bir dizi kullanıcı girişi alabilmesidir.

Katkı girişlerini denetleme

Denetim katkınızın girişlerini tanımlamak için bildirimdeki katkı nesnesindeki özelliğini kullanın inputs .

Aşağıdaki örnekte iki giriş görürsünüz: FieldName ve Colors. FieldName denetimin hangi alanla ilişkilendirildiği belirtir. Colors denetimdeki hangi renklerin hangi değerlerle eşlendiği yapılandırılır.

Girdilerin değerleri, kullanıcılar iş öğesi formuna eklendiğinde kullanıcılar tarafından sağlanır. Bu değerler forma yüklendiğinde denetim katkısına 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.",
        "validation": {
            "dataType": "String",
            "isRequired": false
        }
    }
]

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

• id - Giriş için benzersiz bir kimlik.
• description - Girişi açıklayan birkaç cümle.
• type (isteğe bağlı) - Giriş türü.
  • Geçerli değerler:
    • WorkItemField - Girişin bir İş Öğesi alanı olduğunu gösterir. Bu giriş için kullanıcı tarafından sağlanan değer, geçerli iş öğesi alanı için bir başvuru adı olmalıdır.
• properties (isteğe bağlı) - Giriş için özel özellikler.
  • Geçerli anahtarlar:
    • workItemFieldTypes - Bu girişin desteklediği bir alan türü dizisi tanımlar. Geçerli değerler:
      • String
      • Integer
      • DateTime
      • PlainText
      • HTML
      • TreePath
      • History
      • Double
      • Guid
      • Boolean
      • Identity
      • PicklistString
      • PicklistInteger
      • PicklistDouble
• validation - Giriş için geçerli kabul edilen değerleri tanımlayan bir özellik kümesi.
  • Geçerli anahtarlar:
    • dataType - Giriş değerinin veri türünü tanımlar. Bu özellik için geçerli değerler:
      • String
      • Number
      • Boolean
      • Field
    • isRequired - Girişin bir değere sahip olması için gerekli olup olmadığını gösteren boole değeri.

JavaScript örneği

Denetim uzantısı, belirli kullanıcı girişlerini alabilen tek bir farkla grup veya sayfa uzantısı gibi çalışır. Kullanıcı giriş değerlerini okumak için kullanın VSS.getConfiguration().witInputs. Aşağıdaki örnek, katkıda bulunan denetiminizi etkileyebilecek iş öğesi formunda olaylar gerçekleştiğinde çağrılan bir nesnenin nasıl kaydedildiğini gösterir. Ayrıca bu denetim için kullanıcı tarafından sağlanan giriş değerlerinin nasıl okunduğu da gösterilir.

import { Control } from "control";
import * as ExtensionContracts from "TFS/WorkItemTracking/ExtensionContracts";

var control: Control;

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

VSS.register(VSS.getContribution().id, provider);

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