다음을 통해 공유

메뉴 작업 추가

  • 아티클

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

이 예제에서는 작업 항목 쿼리 허브의 쿼리 상황에 맞는 메뉴에 작업을 추가합니다.

팁

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

이 문서의 필수 구성 요소

확장 매니페스트 파일 업데이트

다음은 확장 매니페스트의 기여 섹션에 작업을 추가하는 코드 조각입니다.

...
    "contributions": [
        {
            "id": "myAction",
            "type": "ms.vss-web.action",
            "description": "Run in Hello hub action",
            "targets": [
                "ms.vss-work-web.work-item-query-menu"
            ],
            "properties": {
                "text": "Run in Hello hub",
                "title": "Run in Hello hub",
                "icon": "images/icon.png",
                "groupId": "actions",
                "uri": "action.html"
            }
        }
    ]
...

속성

Property 설명
text 메뉴 항목에 표시되는 텍스트입니다.
title 메뉴 항목에 표시되는 도구 설명 텍스트입니다.
아이콘 메뉴 항목에 표시되는 아이콘의 URL입니다. 상대 URL은 baseUri를 사용하여 확인됩니다.
groupId 이 메뉴 항목이 다른 항목과 관련하여 표시되는 위치를 결정합니다.
uri 메뉴 작업 처리기를 등록하는 페이지에 대한 URI입니다(아래 참조).
registeredObjectId (선택 사항) 등록된 메뉴 작업 처리기의 이름입니다. 기본값은 기여자 ID입니다.

확장성 지점에서 작업을 추가할 수 있는 모든 위치에 대해 알아봅니다.

HTML 페이지

메뉴 동작은 HTML 파일에 포함된 JavaScript 스크립트로 표시됩니다. 확장의 매니페스트 파일에 참조와 일치하는 파일 및 위치에 다음 내용을 저장합니다.

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Action Sample</title>
	</head>
	<body>
		<div>
			The end user doesn't see the content on this page.
			It is only in the background to handle the contributed menu item being selected.
		</div>
	</body>
	</html>

Your JavaScript

아래 스크립트는 작업을 처리하기 위해 처리기 개체를 등록하고 이전 HTML 페이지의 섹션에 head 배치합니다.

매니페스트 파일에 있는 별칭이 지정되었습니다 libnode_modules/azure-devops-extension-sdk/libsdk-extension.json .

<script src="lib/SDK.min.js"></script>
<script>
    SDK.init();

    // Use an IIFE to create an object that satisfies the IContributedMenuSource contract
    var menuContributionHandler = (function () {
        "use strict";
        return {
            // This is a callback that gets invoked when a user selects the newly contributed menu item
            // The actionContext parameter contains context data surrounding the circumstances of this
            // action getting invoked.
            execute: function (actionContext) {
                alert("Hello, world");
            }
        };
    }());

    // Associate the menuContributionHandler object with the "myAction" menu contribution from the manifest.
    SDK.register(SDK.getContributionId(), menuContributionHandler);
</script>

팁

자세한 내용은 확장성 지점, 메뉴 및 도구 모음, 수식 디자인 시스템 기여 모델, REST API 참조, 확장 샘플 및 개발자 커뮤니티의 리소스를 참조하세요.

다음 단계

이제 확장을 작성했으므로 다음 단계는 확장을 패키지, 게시 및 설치하는 것입니다. 확장 테스트 및 디버깅에 대한 설명서를 검사 수도 있습니다.