작업 항목 폼 확장

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

이 문서에서는 확장을 사용하여 작업 항목 양식을 사용자 지정하는 방법을 설명합니다. 작업, 관찰자, 그룹 또는 페이지를 Azure DevOps의 작업 항목 양식에 추가할 수 있습니다.

• 기본 페이지에 그룹 추가
• 페이지 추가(탭)
• 상황에 맞는 메뉴에 작업 추가
• 사용자 지정 컨트롤 추가
• 양식에서 이벤트 수신 대기
• 작업 항목 양식에서 기여 구성

전체 소스 코드는 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 샘플

이 예제에서는 기여한 그룹에 영향을 줄 수 있는 작업 항목 양식에서 이벤트가 발생할 때 호출되는 개체를 등록하는 방법을 보여 줍니다.

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

// Get the WorkItemFormService.  This service allows you to get/set fields/links on the 'active' work item (the work item
// that currently is displayed in the UI).
async function getWorkItemFormService()
{
    const workItemFormService = await SDK.getService<IWorkItemFormService>(WorkItemTrackingServiceIds.WorkItemFormService);
    return workItemFormService;
}

// Register a listener for the work item group contribution after initializing the SDK.
SDK.register(SDK.getContributionId(), function () {
    return {
        // Called when the active work item is modified
        onFieldChanged: function(args) {
            $(".events").append($("<div/>").text("onFieldChanged - " + JSON.stringify(args)));
        },
        
        // Called when a new work item is being loaded in the UI
        onLoaded: function (args) {

            getWorkItemFormService().then(function(service) {            
                // Get the current values for a few of the common fields
                service.getFieldValues(["System.Id", "System.Title", "System.State", "System.CreatedDate"]).then(
                    function (value) {
                        $(".events").append($("<div/>").text("onLoaded - " + JSON.stringify(value)));
                    });
            });
        },
        
        // Called when the active work item is being unloaded in the UI
        onUnloaded: function (args) {
            $(".events").empty();
            $(".events").append($("<div/>").text("onUnloaded - " + JSON.stringify(args)));
        },
        
        // Called after the work item has been saved
        onSaved: function (args) {
            $(".events").append($("<div/>").text("onSaved - " + JSON.stringify(args)));
        },
        
        // Called when the work item is reset to its unmodified state (undo)
        onReset: function (args) {
            $(".events").append($("<div/>").text("onReset - " + JSON.stringify(args)));
        },
        
        // Called when the work item has been refreshed from the server
        onRefreshed: function (args) {
            $(".events").append($("<div/>").text("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"  
      }  
   }
]

속성

이벤트 수신 대기

작업 항목 이벤트를 수신 대기하는 작업 항목에 관찰자를 추가하려면 확장 매니페스트에 이 기여를 추가합니다. 작업 항목 양식에는 관찰자에 대한 시각화가 없습니다. 이는 관찰자가 양식 외부 에 있으며 양식이 닫히면 제거되지 않으므로 저장 이벤트에서 작업 항목 양식을 수신 대기하는 가장 좋은 방법입니다. 이는 저장 직후에 발생할 수 있습니다.

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

속성

이벤트

HTML/JavaScript 샘플

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Work item extension page sample</title>
</head>

<body>
    <script src="sdk/scripts/SDK.js"></script>

    <script>
        SDK.init({
            usePlatformScripts: true
        });
        
        SDK.ready(function () {
             // Register a listener for the work item page contribution.
            SDK.register(SDK.getContributionId(), function () {
                return {
                    // Called when the active work item is modified
                    onFieldChanged: function(args) {
                        
                    },
                    
                    // Called when a new work item is being loaded in the UI
                    onLoaded: function (args) {
            
                    },
                    
                    // Called when the active work item is being unloaded in the UI
                    onUnloaded: function (args) {
            
                    },
                    
                    // Called after the work item has been saved
                    onSaved: function (args) {
            
                    },
                    
                    // Called when the work item is reset to its unmodified state (undo)
                    onReset: function (args) {
            
                    },
                    
                    // Called when the work item has been refreshed from the server
                    onRefreshed: function (args) {
            
                    }
                }
            });    
        });
     </script>
</body>
</html>    

새 보드 허브의 변경 내용

최신 SDK 사용

확장에서 최신 버전의 azure-devops-extension-sdk를 사용하고 있는지 확인합니다.

새 SDK를 사용하는 경우 REST API용 azure-devops-extension-api 패키지도 사용해야 합니다. 모든 스프린트에 모든 최신 기능이 포함되도록 메서드와 인터페이스를 업데이트합니다.

작업 또는 작업 공급자를 언제 사용하는가?

메뉴 처리기에서 ms.vss-web.action-provider을(를) 사용하여 메뉴 항목을 동적으로 로드할 때 getMenuItems을(를) 사용합니다. 메뉴 항목이 정적이고 매니페스트에 정의된 경우에는 ms.vss-web.action-provider을(를) 사용하지 마십시오. 대신 ms.vss-web.action 사용해야 합니다.

패키지 require("VSS/Events/Document") 가 더 이상 지원되지 않습니다.

require("VSS/Events/Document") 가져오기는 더 이상 새 보드 허브에서 지원되지 않습니다.