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

Serviços de DevOps do Azure | Azure DevOps Server | Azure DevOps Server 2022

Os controles personalizados permitem alterar a forma como os usuários visualizam e interagem com um campo no formulário de item de trabalho. O artigo a seguir orienta você sobre 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 no seu código JavaScript:

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

Adicionar a contribuição de controlo

Adicione uma contribuição ao seu manifesto de extensão especificando o tipo ms.vss-work-web.work-item-form-control e direcionando para 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 controlo personalizado num IFrame.

Propriedades de controlo

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

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

Controle de entradas de contribuição

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

O exemplo seguinte define duas entradas: FieldName especifica a que campo de item de trabalho o controlo está associado e Colors configura que cores correspondem a que valores de campo. Os utilizadores fornecem estes valores quando adicionam o controlo ao formulário, e os valores são passados ao controlo no momento do carregamento.

"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 do utilizador:

Valores suportadosworkItemFieldTypes: String, Integer, DateTimePlainText, HTML, TreePath, History, , Double, Guid, Boolean, Identity. PicklistStringPicklistIntegerPicklistDouble

Exemplo de JavaScript

Uma extensão de controlo personalizada funciona como uma extensão de grupo ou de página, com a adição de que lê valores de entrada do utilizador através de SDK.getConfiguration().witInputs. O exemplo seguinte regista um fornecedor que responde a eventos do 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

• Expandir o formulário de item de trabalho
• Referência do manifesto de extensão
• Modelo de contribuição