다음을 통해 공유

백로그 페이지에 탭 추가

Azure DevOps Services

팁 (조언)

최신 확장 개발 지침, 테마 설정 및 VSS.SDK로부터의 마이그레이션을 포함하여, Azure DevOps 확장 SDK 개발자 포털을 참조하세요.

iframe에서 호스팅할 수 있는 웹 페이지가 있는 경우 Azure DevOps Services에서 호스팅할 수도 있습니다. 이 웹 페이지는 백로그 페이지의 탭입니다. 이 예제에서는 제품 백로그 및 반복 백로그에 Hello World 탭을 추가합니다.

Azure DevOps Services 제품 백로그 페이지의 탭 위치

Azure DevOps Services 반복 백로그 페이지의 탭 위치

웹 페이지 만들기

  1. azure-devops-extension-sdk 패키지를 설치하고 SDK.js에 home/sdk/scripts 파일을 배치합니다.

     npm install azure-devops-extension-sdk

  2. 표시할 웹 페이지를 만듭니다. 다음 예제에서는 간단한 hello-world.html 페이지를 home 디렉터리에 추가합니다.

  3. HTML 페이지에서 SDK를 참조한 후 SDK.init()을(를) 호출하고 이어서 SDK.notifyLoadSucceeded()을(를) 호출합니다.

     <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 	<title>Hello World</title>
 	<script src="sdk/scripts/SDK.js"></script>
 </head>
 <body>
 	<script type="text/javascript">SDK.init();</script>
 	<h1>Hello World</h1>
 	<script type="text/javascript">SDK.notifyLoadSucceeded();</script>
 </body>
 </html>

확장 매니페스트 업데이트

다음 코드로 확장 매니페스트 파일을 업데이트합니다.

...

	"contributions": [
		{
	        "id": "Fabrikam.HelloWorld.Backlog.Tabs",
	        "type": "ms.vss-web.tab",
	        "description": "Adds a 'Hello' tab to the Product and Iteration backlog tabs.",
	        "targets": [
	            "ms.vss-work-web.product-backlog-tabs",
				"ms.vss-work-web.iteration-backlog-tabs"
	        ],
	        "properties": {
	            "name": "Hello",
	            "uri": "hello-world.html",
				"registeredObjectId": "backlogTabObject"
	        }
	    }
	],
	"scopes": [
		"vso.work"
	],
	"files": [
		{
			"path": "hello-world.html", "addressable": true
		},
		{
			"path": "scripts", "addressable": true
		},
		{
			"path": "sdk/scripts", "addressable": true
		},
		{
			"path": "images/logo.png", "addressable": true
		}
	]
...

기여

기여 절은 작업에 대한 정보를 포함합니다.

확장의 각 기여에 대해 매니페스트가 정의합니다.

  • 기여 유형(이 경우 탭)
  • 기여 대상(이 경우 산출물 또는 이터레이션 백로그 탭)
  • 및 각 기여 유형과 관련된 속성입니다. 탭의 경우
재산 Description
이름 허브의 이름
URI 탭으로 표시할 페이지의 경로(확장의 기본 URI 기준)
등록된객체아이디 탭에 등록된 개체의 ID입니다. 앞에서 표시된 기여의 "uri" 속성에 표시된 html 파일에 아래 예제와 같은 코드를 포함합니다.

Scopes

여기에는 확장에 필요한 범위 가 포함됩니다. 이 경우 작업 항목에 액세스해야 합니다 vso.work .

Files

확장 프로그램에서 액세스하는 모든 파일을 포함합니다.
파일을 설정할 때, URL 주소로 접근할 필요가 없는 다른 파일을 포함하지 않는 한, addressable을 true로 설정하세요.

탭 개체 등록

SDK.register("backlogTabObject", {
    pageTitle: function(state) {
        return "Hello Tab";
    },
	updateContext: function(tabContext) {							 
	},
    isInvisible: function(state) {
        return false;
    },
    isDisabled: function(state) {
        return false;
    }
});

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

다음 단계

패키지, 게시 및 설치 또는

테스트 및 디버그

  • Last updated on