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

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

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

팁

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

사용자 지정 컨트롤 추가

기본 페이지에 컨트롤을 추가하려면 확장 매니페스트에 기여를 추가합니다. 기여 유형이어야 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
        }
    }
]

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

속성

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

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

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

기여 입력 제어

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

다음 샘플에서는 두 개의 입력을 볼 수 있습니다. FieldNameColors 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.",
        "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 ExtensionContracts from "TFS/WorkItemTracking/ExtensionContracts";

var control: Control;

var provider = () => {
    return {
        onLoaded: (workItemLoadedArgs: ExtensionContracts.IWorkItemLoadedArgs) => {
            // create the control
            var fieldName = VSS.getConfiguration().witInputs["FieldName"];
            var colors = VSS.getConfiguration().witInputs["Colors"];
            control = new Control(fieldName, colors);
        },
        onFieldChanged: (fieldChangedArgs: ExtensionContracts.IWorkItemFieldChangedArgs) => {
            var changedValue = fieldChangedArgs.changedFields[control.getFieldName()];
            if (changedValue !== undefined) {
                control.updateExternal(changedValue);
            }
        }
    }
};

VSS.register(VSS.getContribution().id, provider);

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