Agregar un control personalizado al formulario de elemento de trabajo

Servicios de Azure DevOps | Azure DevOps Server | Azure DevOps Server 2022

Los controles personalizados permiten cambiar la forma en que los usuarios ven e interactúan con un campo en el formulario de elemento de trabajo. En el siguiente artículo se explica cómo se creó este control personalizado de ejemplo. En este artículo se muestra cómo crear su propio control personalizado.

Requisitos previos

Incluya azure-devops-extension-sdk en el proyecto:

1. Instale el SDK a través de npm: npm install azure-devops-extension-sdk.

2. Inicialícelo en el código de JavaScript:

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

Añadir la contribución del control

Agregue una contribución al manifiesto de extensión con el tipo ms.vss-work-web.work-item-form-control dirigido 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"
    ]

El formulario de elemento de trabajo carga el control personalizado en un IFrame.

Propiedades de control

Para cambiar el tamaño dinámico del IFrame, use el resize método en el SDK.

Un control personalizado es un tipo de contribución similar a las contribuciones de grupos y páginas. La diferencia clave es que las contribuciones de control aceptan entradas de usuario, mientras que las contribuciones de grupo y página no.

Control de entradas de contribución

Utilice la inputs propiedad en el objeto de contribución para definir entradas configurables para el control.

En el ejemplo siguiente se definen dos entradas: FieldName especifica con qué campo de elemento de trabajo está asociado el control y Colors se configuran los colores que se asignan a qué valores de campo. Los usuarios proporcionan estos valores cuando agregan el control al formulario y los valores se pasan al control en tiempo de carga.

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

Propiedades de entrada

Las siguientes propiedades definen una entrada de usuario:

Valores admitidos: workItemFieldTypes, String, Integer, DateTime, PlainText, HTML, TreePath, History, Double, Guid, Boolean, Identity, PicklistString, PicklistInteger, PicklistDouble.

Ejemplo de JavaScript

Una extensión de control personalizada funciona como un grupo o una extensión de página, además lee los valores de entrada de usuario a través de SDK.getConfiguration().witInputs. En el ejemplo siguiente se registra un proveedor que responde a eventos de formulario de elemento de trabajo:

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

En la captura de pantalla siguiente se muestra un control de elemento de trabajo personalizado de ejemplo para el campo Prioridad .

Contenido relacionado

• Extender el formulario del elemento de trabajo
• Referencia del manifiesto de extensión
• Modelo de contribución