작업 항목 폼 확장
Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019
확장을 통해 이루어진 기여를 통해 사용자에게 작업 항목 양식을 표시하는 방법을 사용자 지정하는 방법을 알아봅니다.
전체 원본은 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
}
}
]
속성
| Property | 설명 |
|---|---|
name |
그룹에 표시되는 텍스트입니다. |
uri |
작업 항목 양식 및 해당 스크립트에 표시되는 html을 호스트하는 페이지에 대한 URI입니다. |
height |
(선택 사항) 그룹의 높이를 정의합니다. 생략하면 100%입니다. |
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)));
}
}
});
Events
| Event | 이벤트 설명 | 인수 | 인수 설명 |
|---|---|---|---|
| onFieldChanged | 필드가 변경된 후 발생합니다. 필드 변경이 다른 필드를 업데이트하는 규칙을 실행한 경우 이러한 모든 변경 내용은 단일 이벤트의 일부입니다. | ID | 작업 항목의 ID입니다. |
| changedFields | 모든 변경된 필드의 참조 이름을 가진 배열입니다. | ID | 작업 항목의 ID입니다. |
| onLoaded | 데이터가 작업 항목 양식에 로드되거나, 사용자가 작업 항목을 열거나, 사용자가 심사 보기에서 다른 작업 항목으로 이동할 때 발생합니다. | ID | 작업 항목의 ID입니다. |
| onReset | 사용자가 작업 항목에 대한 변경 내용을 실행 취소한 후 발생합니다. | ID | 작업 항목의 ID입니다. |
| onRefreshed | 사용자가 작업 항목을 수동으로 새로 고친 후 발생합니다. | ID | 작업 항목의 ID입니다. |
| onSaved | 작업 항목을 저장한 후 발생합니다. 대화 상자의 작업 항목에 대해 "ms.vss-work-web.work-item-notifications" 유형을 대상으로 지정하여 대화 상자가 닫히면 이 기여 유형이 언로드되기 때문에 이벤트가 발생하도록 해야 합니다. 자세한 내용은 이벤트 수신 대기를 참조 하세요. | ID | 작업 항목의 ID입니다. |
| onUnloaded | 사용자가 대화 상자를 닫기 전에 또는 사용자가 심사 보기의 다른 작업 항목으로 이동하기 전에 발생합니다. | ID | 작업 항목의 ID입니다. |
페이지 추가
새 페이지가 작업 항목 양식의 탭으로 렌더링됩니다. 세부 정보 탭 옆에 새 페이지가 나타납니다.
작업 항목 양식에 페이지를 추가하려면 확장 매니페스트에 기여를 추가합니다. 이 기여의 유형이어야 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"
}
}
]
속성
| Property | 설명 |
|---|---|
| name | 탭 페이지에 표시되는 텍스트입니다. |
| uri | 작업 항목 양식 및 해당 스크립트에 표시되는 html을 호스트하는 페이지에 대한 URI입니다. |
JavaScript 샘플
양식 그룹 섹션에서 JavaScript 샘플을 참조하세요. 등록된 개체의 이름이 기여한 개체의 id 이름과 일치해야 합니다.
Events
| Event | 이벤트 설명 | 인수 | 인수 설명 |
|---|---|---|---|
| onFieldChanged | 필드가 변경된 후 발생합니다. 필드 변경이 다른 필드를 업데이트하는 규칙을 실행한 경우 이러한 모든 변경 내용은 단일 이벤트의 일부입니다. | ID | 작업 항목의 ID입니다. |
| changedFields | 모든 변경된 필드의 참조 이름을 가진 배열입니다. | ID | 작업 항목의 ID입니다. |
| onLoaded | 데이터가 작업 항목 양식에 로드되거나, 사용자가 작업 항목을 열거나, 사용자가 심사 보기에서 다른 작업 항목으로 이동할 때 발생합니다. | ID | 작업 항목의 ID입니다. |
| onReset | 사용자가 작업 항목에 대한 변경 내용을 실행 취소한 후 발생합니다. | ID | 작업 항목의 ID입니다. |
| onRefreshed | 사용자가 작업 항목을 수동으로 새로 고친 후 발생합니다. | ID | 작업 항목의 ID입니다. |
| onSaved | 작업 항목을 저장한 후 발생합니다. 대화 상자의 작업 항목에 대해 "ms.vss-work-web.work-item-notifications" 유형을 대상으로 지정하여 대화 상자가 닫히면 이 기여 유형이 언로드되기 때문에 이벤트가 발생하도록 해야 합니다. 자세한 내용은 이벤트 수신 대기를 참조 하세요. | ID | 작업 항목의 ID입니다. |
| onUnloaded | 사용자가 대화 상자를 닫기 전에 또는 사용자가 심사 보기의 다른 작업 항목으로 이동하기 전에 발생합니다. | ID | 작업 항목의 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"
}
}
]
속성
| Property | 설명 |
|---|---|
| text | 도구 모음 항목에 표시되는 텍스트입니다. |
| title | 메뉴 항목에 표시되는 도구 설명 텍스트입니다. |
| toolbarText | 항목을 마우스로 가리킬 때 나타나는 텍스트입니다. |
| uri | 도구 모음 작업 처리기를 등록하는 페이지에 대한 URI입니다. |
| 아이콘 | 메뉴 항목에 표시되는 아이콘의 URL입니다. 상대 URL은 baseUri를 사용하여 확인됩니다. |
| group | 다른 항목과 관련된 메뉴 항목이 표시되는 위치를 결정합니다. 그룹 이름이 같은 도구 모음 항목은 나머지 항목과 구분 기호로 그룹화되고 나뉩니다. |
| registeredObjectId | (선택 사항) 등록된 메뉴 작업 처리기의 이름입니다. 기본값은 기여 ID입니다. |
이벤트 수신 대기
작업 항목 이벤트를 수신 대기하는 작업 항목에 관찰자를 추가하려면 확장 매니페스트에 이 기여를 추가합니다. 작업 항목 양식에는 관찰자에 대한 시각화가 없습니다. 이는 관찰자가 양식 외부에 있으며 양식이 닫히면 제거되지 않으므로 저장 이벤트에서 작업 항목 양식을 수신 대기하는 가장 좋은 방법입니다. 이는 저장 직후에 발생할 수 있습니다.
"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"
}
}
]
속성
| Property | 설명 |
|---|---|
| uri | 이벤트를 수신 대기하는 스크립트를 호스트하는 페이지에 대한 URI입니다. |
Events
| Event | 이벤트 설명 | 인수 | 인수 설명 |
|---|---|---|---|
| onFieldChanged | 필드가 변경된 후 발생합니다. 필드 변경이 다른 필드를 업데이트하는 규칙을 실행한 경우 이러한 모든 변경 내용은 단일 이벤트의 일부입니다. | ID | 작업 항목의 ID입니다. |
| changedFields | 모든 변경된 필드의 참조 이름을 가진 배열입니다. | ID | 작업 항목의 ID입니다. |
| onLoaded | 데이터가 작업 항목 양식에 로드되거나, 사용자가 작업 항목을 열거나, 사용자가 심사 보기에서 다른 작업 항목으로 이동할 때 발생합니다. | ID | 작업 항목의 ID입니다. |
| onReset | 사용자가 작업 항목에 대한 변경 내용을 실행 취소한 후 발생합니다. | ID | 작업 항목의 ID입니다. |
| onRefreshed | 사용자가 작업 항목을 수동으로 새로 고친 후 발생합니다. | ID | 작업 항목의 ID입니다. |
| onSaved | 작업 항목을 저장한 후 발생합니다. 대화 상자의 작업 항목에 대해 "ms.vss-work-web.work-item-notifications" 유형을 대상으로 지정하여 대화 상자가 닫히면 이 기여 유형이 언로드되기 때문에 이벤트가 발생하도록 해야 합니다. 자세한 내용은 이벤트 수신 대기를 참조 하세요. | ID | 작업 항목의 ID입니다. |
| onUnloaded | 사용자가 대화 상자를 닫기 전에 또는 사용자가 심사 보기의 다른 작업 항목으로 이동하기 전에 발생합니다. | ID | 작업 항목의 ID입니다. |
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>
새 보드 허브의 변경 내용
참고 항목
새 Boards Hub는 현재 미리 보기 상태이지만 모든 사용자가 사용할 수 있습니다. 새 보드 허브를 즉시 사용하도록 설정하고 내부 확장을 테스트하는 것이 좋습니다.
최신 SDK 사용
확장에서 최신 버전의 azure-devops-extension-sdk를 사용하고 있는지 확인합니다.
새 SDK를 사용하는 경우 REST API용 azure-devops-extension-api 패키지도 사용해야 합니다. 모든 스프린트에 모든 최신 기능이 포함되도록 메서드와 인터페이스를 업데이트합니다.
작업 또는 작업 공급자를 사용하는 경우
메뉴 처리기를 사용하여 getMenuItems 메뉴 항목을 동적으로 로드할 때 사용합니다ms.vss-web.action-provider. 메뉴 항목이 정적이고 매니페스트에 정의된 경우 사용하지 ms.vss-web.action-provider 않습니다. 대신 ms.vss-web.action 사용해야 합니다.
패키지 필요("VSS/이벤트/문서")는 더 이상 지원되지 않습니다.
require("VSS/Events/Document") 가져오기는 더 이상 새 보드 허브에서 지원되지 않습니다.