작업 항목 폼 확장

Azure DevOps 서비스 | Azure DevOps Server | Azure DevOps Server 2022

확장을 사용하여 그룹, 페이지, 메뉴 작업, 관찰자 또는 사용자 지정 컨트롤을 추가하여 작업 항목 양식을 사용자 지정합니다.

• 그룹 추가
• 페이지 추가(탭)
• 메뉴 작업 추가
• 사용자 지정 컨트롤 추가
• 이벤트 수신 대기
• 기여 구성

전체 소스 코드는 GitHub의 Azure DevOps 확장 샘플에서 UI 예제를 참조하세요.

그룹 추가

기본 페이지에 그룹을 추가하려면 ms.vss-work-web.work-item-form-group 형식의 ms.vss-work-web.work-item-form을(를) 대상으로 하는 확장 매니페스트에 항목을 추가합니다.

"contributions": [
   {  
       "id": "sample-work-item-form-group",
       "type": "ms.vss-work-web.work-item-form-group",
       "description": "Custom work item form group",
       "targets": [
           "ms.vss-work-web.work-item-form"
       ],
       "properties": {
           "name": "My Group",
           "uri": "workItemGroup.html",
           "height": 600
       }
   }
]

속성

JavaScript 샘플

다음은 작업 항목 양식 이벤트에 응답하는 공급자를 등록하는 예제입니다. 작업 항목이 로드될 때 WorkItemFormService를 사용하여 필드 값을 읽습니다.

import { IWorkItemFormService, WorkItemTrackingServiceIds } from "azure-devops-extension-api/WorkItemTracking";
import * as SDK from "azure-devops-extension-sdk";

async function getWorkItemFormService(): Promise<IWorkItemFormService> {
    return await SDK.getService<IWorkItemFormService>(WorkItemTrackingServiceIds.WorkItemFormService);
}

SDK.init();

SDK.ready().then(() => {
    SDK.register(SDK.getContributionId(), () => {
        return {
            // Called when the active work item is modified
            onFieldChanged: (args) => {
                console.log("onFieldChanged", JSON.stringify(args));
            },

            // Called when a new work item is being loaded in the UI
            onLoaded: async (args) => {
                const service = await getWorkItemFormService();
                const values = await service.getFieldValues([
                    "System.Id", "System.Title", "System.State", "System.CreatedDate"
                ]);
                console.log("onLoaded", JSON.stringify(values));
            },

            // Called when the active work item is being unloaded in the UI
            onUnloaded: (args) => {
                console.log("onUnloaded", JSON.stringify(args));
            },

            // Called after the work item has been saved
            onSaved: (args) => {
                console.log("onSaved", JSON.stringify(args));
            },

            // Called when the work item is reset to its unmodified state (undo)
            onReset: (args) => {
                console.log("onReset", JSON.stringify(args));
            },

            // Called when the work item has been refreshed from the server
            onRefreshed: (args) => {
                console.log("onRefreshed", JSON.stringify(args));
            }
        };
    });
});

이벤트

페이지 추가

새 페이지가 작업 항목 양식의 탭으로 렌더링됩니다. 세부 정보 탭 옆에 새 페이지가 나타납니다.

작업 항목 양식에 페이지를 추가하려면 다음 형식 ms.vss-work-web.work-item-form-page 을 대상으로 하는 확장 매니페스트에 기여를 추가합니다.ms.vss-work-web.work-item-form

"contributions": [
    {  
        "id": "sample-work-item-form-page",
        "type": "ms.vss-work-web.work-item-form-page",
        "description": "Custom work item form page",
        "targets": [
            "ms.vss-work-web.work-item-form"
        ],
        "properties": {
            "name": "My Page",
            "uri": "workItemPage.html"
        } 
    }
]

속성

JavaScript 샘플

양식 그룹 섹션에서 JavaScript 샘플을 참조하세요. 등록된 개체의 이름이 기여한 개체의 id 이름과 일치해야 합니다.

이벤트

기여 설정

Azure DevOps Services에서 그룹 확장은 기본적으로 두 번째 열의 끝에 표시되고 페이지 기여는 마지막 탭으로 표시됩니다. 컨트롤 기여는 기본적으로 표시되지 않습니다. 사용자가 양식에 수동으로 추가해야 합니다. Azure DevOps Server에서 기여를 표시, 숨기기 또는 이동하도록 작업 항목 양식 확장 구성 을 참조하세요.

메뉴 작업 추가

작업 항목 도구 모음에 항목을 추가하려면 확장 매니페스트에 이 기여를 추가합니다. 항목이 세로 줄임표(...) 드롭다운 메뉴에 나타납니다.

"contributions": [
   {  
      "id": "sample-work-item-menu",  
      "type": "ms.vss-web.action",  
      "description": "Sample toolbar item which updates the title of a work item",  
      "targets": [  
          "ms.vss-work-web.work-item-context-menu"  
      ],  
      "properties": {  
          "text": "Try me!",  
          "title": "Updates the title of the work item from the extension",  
          "toolbarText": "Try me!",  
          "icon": "images/show-properties.png",  
          "uri": "menu-workItemToolbarButton.html"  
      }  
   }
]

속성

이벤트 수신 대기

관찰자는 양식에 UI 없이 작업 항목 이벤트를 수신 대기합니다. 관찰자는 양식 외부에 있으며 양식 대화 상자가 onSaved 닫히면 제거되지 않으므로 관찰자를 사용하여 이벤트를 수신 대기합니다.

"contributions": [
   {  
       "id": "sample-work-item-form-observer",
       "type": "ms.vss-work-web.work-item-notifications",
       "description": "Gets events about the current work item form for the 'Try Me!' toolbar button",
       "targets": [
           "ms.vss-work-web.work-item-form"
       ],
       "properties": {
           "uri": "myformobserver.html"
       }
   }
]

속성

이벤트

JavaScript 샘플

다음 예제에서는 최신 SDK를 사용하여 관찰자를 등록합니다.

import * as SDK from "azure-devops-extension-sdk";

SDK.init();

SDK.ready().then(() => {
    SDK.register(SDK.getContributionId(), () => {
        return {
            onFieldChanged: (args) => {
                // Handle field changes
            },
            onLoaded: (args) => {
                // Handle work item loaded
            },
            onUnloaded: (args) => {
                // Handle work item unloaded
            },
            onSaved: (args) => {
                // Handle work item saved
            },
            onReset: (args) => {
                // Handle work item reset (undo)
            },
            onRefreshed: (args) => {
                // Handle work item refreshed
            }
        };
    });
});

호환성 정보

작업 대 작업 공급자

메뉴 처리기에서 getMenuItems을 사용하여 메뉴 항목을 동적으로 로드할 때 ms.vss-web.action-provider을 사용합니다. 메뉴 항목이 정적이고 매니페스트에 정의된 경우에 사용합니다 ms.vss-web.action .

사용되지 않는 패턴

다음 패턴은 더 이상 지원되지 않습니다.

• require("VSS/Events/Document") - 새 보드 허브에서 지원되지 않음
• SDK.js 스크립트 태그 사용 usePlatformScripts: true - 대신 npm 패키지 azure-devops-extension-sdk 사용

관련 콘텐츠

• 작업 항목 양식에 사용자 지정 컨트롤 추가
• 작업 항목 양식 확장 구성(온-프레미스)
• 확장 매니페스트 참조
• 기여 모델