다음을 통해 공유

작업 항목 양식에 사용자 지정 컨트롤 추가

  • 아티클

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

사용자 지정 컨트롤을 사용하면 사용자가 작업 항목 양식에서 필드를 보고 상호 작용하는 방법을 변경할 수 있습니다. 다음 문서에서는 이 샘플 사용자 지정 컨트롤이 빌드된 방법을 안내합니다. 이 문서에서는 고유한 사용자 지정 컨트롤을 빌드하는 방법을 보여 줍니다.

팁

Azure DevOps 확장 SDK를 사용하여 확장 개발에 대한 최신 설명서를 확인하세요.

필수 조건

프로젝트에 azure-devops-extension-sdk를 포함합니다.

  1. npm을 통해 SDK를 설치합니다 npm install azure-devops-extension-sdk. .

  2. JavaScript 코드에서 초기화합니다.

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

사용자 지정 컨트롤 추가

기본 페이지에 컨트롤을 추가하려면 확장 매니페스트에 기여를 추가합니다. 기여 유형이어야 ms.vss-work-web.work-item-form-control 하며 기여를 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"
    ]

작업 항목 양식은 사용자 지정 컨트롤을 호스트하는 IFrame을 추가합니다.

속성

Property 설명
name 그룹에 표시되는 텍스트입니다.
uri IFrame에서 로드하는 html을 호스트하는 페이지에 대한 URI입니다.
height (선택 사항) IFrame의 높이를 정의합니다. 생략하면 50픽셀입니다.
inputs 사용자가 양식 내에서 제공하는 값입니다.

IFrame의 크기를 동적으로 조정하려는 경우 클라이언트 SDK에서 사용 가능한 항목을 사용할 resize method 수 있습니다.

작업 항목 양식의 사용자 지정 컨트롤은 그룹 및 페이지 기여와 같은 다른 유형의 기여입니다. 주요 차이점은 컨트롤 기여는 사용자 입력 집합을 사용할 수 있지만 그룹 및 페이지 기여는 수행할 수 없다는 것입니다.

기여 입력 제어

컨트롤 기여에 대한 입력을 정의하려면 매니페스트의 inputs 기여 개체에 있는 속성을 사용합니다.

다음 샘플에서는 두 개의 입력을 볼 수 있습니다. FieldName Colors FieldName 는 컨트롤이 연결하는 필드를 지정합니다. Colors 는 컨트롤의 값에 매핑되는 색을 구성합니다.

사용자가 작업 항목 양식에 추가할 때 입력 값이 제공됩니다. 이러한 값은 폼에 로드될 때 컨트롤 기여도에 전달됩니다.

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

다음 속성은 기여에서 사용할 수 있는 사용자 입력을 정의합니다.

  • id - 입력에 대한 고유 ID입니다.
  • description - 입력을 설명하는 몇 가지 문장입니다.
  • type(선택 사항) - 입력 형식입니다.
    • 유효한 값:
      • WorkItemField - 입력이 작업 항목 필드임을 나타냅니다. 이 입력에 대해 사용자가 제공한 값은 유효한 작업 항목 필드의 참조 이름이어야 합니다.
  • properties(선택 사항) - 입력에 대한 사용자 지정 속성입니다.
    • 유효한 키:
      • workItemFieldTypes - 이 입력이 지원하는 필드 형식의 배열을 정의합니다. 유효한 값:
        • String
        • Integer
        • DateTime
        • PlainText
        • HTML
        • TreePath
        • History
        • Double
        • Guid
        • Boolean
        • Identity
        • PicklistString
        • PicklistInteger
        • PicklistDouble
  • 유효성 검사 - 입력에 유효한 것으로 간주되는 값을 정의하는 속성 집합입니다.
    • 유효한 키:
      • dataType - 입력 값의 데이터 형식을 정의합니다. 이 속성에 유효한 값은 다음과 같습니다.
        • String
        • Number
        • Boolean
        • Field
      • isRequired - 입력에 값이 필요한지 여부를 나타내는 부울 값입니다.

JavaScript 샘플

컨트롤 확장은 특정 사용자 입력을 사용할 수 있는 한 가지 차이점이 있는 그룹 또는 페이지 확장처럼 작동합니다. 사용자 입력 값을 VSS.getConfiguration().witInputs읽으려면 . 다음 샘플에서는 기여한 컨트롤에 영향을 줄 수 있는 작업 항목 양식에서 이벤트가 발생할 때 호출되는 개체를 등록하는 방법을 보여 줍니다. 또한 이 컨트롤에 대해 사용자가 제공한 입력 값을 읽는 방법도 보여 드립니다.

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

다음 스크린샷은 우선 순위 필드에 대한 샘플 사용자 지정 작업 항목 컨트롤을 보여줍니다.

작업 항목 양식의 사용자 지정 컨트롤 스크린샷