İş öğ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. Bu makalede, kendi özel denetiminizi nasıl oluşturabileceğiniz gösterilmektedir.
İpucu
Azure DevOps Uzantı SDK'sını kullanarak uzantı geliştirmeyle ilgili en yeni belgelerimize göz atın.
Önkoşullar
Projenize azure-devops-extension-sdk'sını ekleyin:
SDK'yi npm aracılığıyla yükleyin:
npm install azure-devops-extension-sdk
.JavaScript kodunuzda başlatın:
import * as SDK from "azure-devops-extension-sdk"; SDK.init();
Ö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
}
}
],
"manifestVersion": 1.0,
"scopes": [
"vso.work"
]
İş öğ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.",
"type": "string",
"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.
- Geçerli değerler:
- 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
- Geçerli anahtarlar:
- 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.
- Geçerli anahtarlar:
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 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.