Adicionar um controle personalizado ao formulário de item de trabalho

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

Os controles personalizados permitem que você altere a forma como os usuários exibem e interagem com um campo no formulário de item de trabalho. O artigo a seguir mostra como esse controle personalizado de exemplo foi criado. Este artigo mostra como criar seu próprio controle personalizado.

Pré-requisitos

Inclua o azure-devops-extension-sdk em seu projeto:

1. Instale o SDK via npm: npm install azure-devops-extension-sdk.

2. Inicialize-o em seu código JavaScript:

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

Adicionar a contribuição de controle

Adicione uma contribuição ao manifesto de extensão com o tipo ms.vss-work-web.work-item-form-control direcionado 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"
    ]

O formulário do item de trabalho carrega o controle personalizado em um IFrame.

Propriedades de controle

Para redimensionar dinamicamente o IFrame, use o método resize no SDK.

Um controle personalizado é um tipo de contribuição semelhante às contribuições de grupo e página. A principal diferença é que as contribuições de controle aceitam entradas do usuário, enquanto as contribuições de grupo e página não.

Controlar entradas de contribuição

Use a inputs propriedade no objeto de contribuição para definir entradas configuráveis para o controle.

O exemplo a seguir define duas entradas: FieldName especifica com qual campo de item de trabalho o controle está associado e Colors configura quais cores são mapeadas para quais valores de campo. Os usuários fornecem esses valores quando adicionam o controle ao formulário e os valores são passados para o controle no momento da 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
        }
    }
]

Propriedades de entrada

As seguintes propriedades definem uma entrada de usuário:

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

Exemplo de JavaScript

Uma extensão de controle personalizada funciona como uma extensão de página ou grupo e, além disso, lê valores de entrada do usuário por meio de SDK.getConfiguration().witInputs. O exemplo a seguir registra um provedor que responde a eventos de formulário de item de trabalho:

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 captura de tela a seguir mostra um exemplo de controle de item de trabalho personalizado para o campo Prioridade .

Conteúdo relacionado

• Estender o formulário do item de trabalho
• Referência de Manifesto da Extensão
• Modelo de Contribuição