다음을 통해 공유

메뉴 작업 추가

  • 아티클

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

속성

재산 묘사
문자 메시지 메뉴 항목에 표시되는 텍스트입니다.
타이틀 메뉴 항목에 표시되는 도구 설명 텍스트입니다.
아이콘 메뉴 항목에 표시되는 아이콘의 URL입니다. 상대 URL은 baseUri를 사용하여 확인됩니다.
groupId 이 메뉴 항목이 다른 항목과 관련하여 표시되는 위치를 결정합니다.
uri 메뉴 작업 처리기를 등록하는 페이지에 대한 URI입니다(아래 참조).
등록된객체아이디 (선택 사항) 등록된 메뉴 작업 처리기의 이름입니다. 기본값은 기여자 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>

당신의 JavaScript

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

우리의 sdk-extension.json 매니페스트 파일에서 lib을 node_modules/azure-devops-extension-sdk/lib으로 별칭을 지정했습니다.

<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 참조, 확장 샘플및 개발자 커뮤니티리소스를 참조하세요.

다음 단계

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