Aggiungere un controllo personalizzato al modulo dell'elemento di lavoro

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

I controlli personalizzati consentono di modificare il modo in cui gli utenti visualizzano e interagiscono con un campo nel modulo dell'elemento di lavoro. L'articolo seguente illustra come è stato compilato questo controllo personalizzato di esempio. Questo articolo illustra come creare un controllo personalizzato.

Prerequisiti

Includere azure-devops-extension-sdk nel progetto:

1. Installare l'SDK tramite npm: npm install azure-devops-extension-sdk.

2. Inizializzarlo nel codice JavaScript:

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

Aggiungi il contributo di controllo

Aggiungi un contributo al manifesto dell'estensione di tipo ms.vss-work-web.work-item-form-control destinato a 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"
    ]

Il modulo dell'elemento di lavoro carica il controllo personalizzato in un IFrame.

Proprietà del controllo

Per ridimensionare dinamicamente l'IFrame, usare il resize metodo nell'SDK.

Un controllo personalizzato è un tipo di contributo simile ai contributi di gruppo e pagina. La differenza principale è che i contributi di controllo accettano input utente, mentre i contributi di gruppo e pagina non lo sono.

Controllare le immissioni dei contributi

Utilizzare la inputs proprietà nell'oggetto del contributo per definire input configurabili per il controllo.

L'esempio seguente definisce due input: FieldName specifica il campo dell'elemento di lavoro a cui è associato il controllo e Colors configura i colori mappati ai valori dei campi. Gli utenti forniscono questi valori quando aggiungono il controllo al form e i valori vengono passati al controllo in fase di caricamento.

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

Proprietà di input

Le proprietà seguenti definiscono un input utente:

Valori supportatiworkItemFieldTypes: String, IntegerDateTime, PlainText, HTML, TreePath, History. DoubleGuidBooleanIdentityPicklistStringPicklistIntegerPicklistDouble

Esempio in JavaScript

Un'estensione di controllo personalizzata funziona come un gruppo o un'estensione di pagina, con l'aggiunta che legge i valori di input dell'utente tramite SDK.getConfiguration().witInputs. Nell'esempio seguente viene registrato un provider che risponde agli eventi del modulo dell'elemento di lavoro:

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

Lo screenshot seguente mostra un controllo dell'elemento di lavoro personalizzato di esempio per il campo Priorità .

Contenuti correlati

• Estendi il modulo dell'elemento di lavoro
• Riferimento al manifesto di estensione
• modello di contributo