다음을 통해 공유

세로 탐색 지침

  • 아티클

Azure DevOps Services

세로 탐색은 일부 확장에 영향을 주는 변경 내용을 제공합니다. 이러한 결과에는 팀 컨텍스트 변경과 함께 확장 아이콘에 대한 지원이 포함됩니다.

팁

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

팀 컨텍스트

기존의 가로 탐색에서 사용자는 페이지 머리글의 왼쪽 위에 있는 선택기에서 선택하여 프로젝트 또는 팀으로 갈 수 있습니다. 이 선택기는 최근 팀의 목록과 모든 팀을 검색하는 방법을 제시했습니다. 새 세로 탐색에서 사용자는 프로젝트로만 이동할 수 있습니다(팀으로 이동하지 않음). 이 변경 내용은 전체 환경을 간소화하기 위해 수행되었습니다. 그러나 페이지 헤더의 기존 팀 선택기를 사용하여 팀을 전환하는 사용자의 능력에 의존하는 웹 확장에 대한 도전이 도입되었습니다.

SDK.getWebContext() 는 사용자가 작업 중인 현재 조직, 프로젝트 및 팀에 대한 정보를 제공하는 SDK에서 제공하는 클라이언트 쪽 API입니다.

{
    "account": {
        "name": "Fabrikam",
        "id": "50e49b94-4bb6-40e7-8c85-a6d756d8a4d8"
    },
    "project": {
        "name": "Fabrikam Dev",
        "id": "049b1af2-fc87-4e50-95e4-151357f04b7f"
    },
    "team": {
        "name": "Ops Team",
        "id": "9b3a6b80-fe95-4c8c-8aa1-1e5d535d7af1"
    }
}

에 의존 SDK.getWebContext().team하지 않는 것이 좋습니다. 대신 확장이 속하는 범주에 따라 아래 지침을 따르세요.

팀이 인식하는 허브 확장

확장에서 사용자에게 팀을 선택할 수 있는 방법을 제공해야 하는 경우 Teams REST API를 사용하여 현재 프로젝트에 대한 팀 목록을 가져올 수 있습니다. 다음 예제에서는 확장에서 이 API를 호출하는 방법을 보여 줍니다.

import { getClient } from "azure-devops-extension-api";
import { CoreRestClient } from "azure-devops-extension-api/Core";
import * as SDK from "azure-devops-extension-sdk";

private async getTeams() {
    const client = getClient(CoreRestClient);
    
    client.getTeams(SDK.getWebContext().project.id).then(
        function(teams) {
            console.log(teams);
        }
    );
}

팀 선택 컨트롤을 제공하는 확장의 예는 팀 일정을 참조 하세요.

백로그 및 대시보드와 같은 팀 인식 허브에 있는 피벗/패널 확장

확장은 기여에 전달된 구성 개체를 확인할 수 있습니다. 이 개체에는 기여 유형 및 기여가 호스트되는 위치에 따라 다른 속성이 있습니다. 예를 들어 구성에서 팀을 읽고 webContext에서 읽기 팀으로 대체하여 온-프레미스 릴리스에서 새 세로 탐색과 이전 가로 탐색을 모두 지원하는 방법을 보여 줍니다.

function getCurrentTeam() {
  let webContext = SDK.getWebContext();
  let configuration = SDK.getConfiguration();

  if ("team" in configuration) {
    return configuration.team;
  } else if ("team" in webContext) {
    return webContext.team;
  } else {
    return null; // should only happen if not in a project context
  }
}

백로그 및 대시보드와 같은 팀 인식 허브에 있는 작업 확장

확장은 사용자가 기여한 메뉴 항목을 선택할 때 호출된 콜백에 전달된 actionContext 개체를 확인할 수 있습니다. 예제에서는 actionContext에서 팀을 읽는 방법을 보여 줍니다.

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 team information.
            execute: function (actionContext) {
                if("team" in actionContext) {
                    alert(`Team. Id is ${actionContext.team.id}, Name is ${actionContext.team.name}`);
                }
            }
        };
    }());

허브 아이콘

필요에 따라 자산(예: .png 또는 .jpg)을 허브의 아이콘으로 설정할 수 있습니다. 이 아이콘은 세로 탐색 모음의 허브 옆에 나타납니다. 확장과 함께 패키지해야 합니다.

참고 항목

이러한 아이콘은 가로 탐색에 표시되지 않습니다.

다음 단계를 완료하여 허브에 대한 아이콘을 설정합니다.

  1. iconAsset 패턴을 {publisher-id}.{extension-id}/{asset-path}따르는 정규화된 자산 식별자에 대한 허브 기여의 속성을 설정합니다.

  2. 이 자산에 대한 항목을 기여 속성에 includesData 추가합니다.

  3. 매니페스트의 루트에 있는 속성에 files 나열하여 확장을 사용하여 자산을 패키지합니다.

예제 #1:

{
  "id": "my-extension",
  "publisherId": "my-publisher",
  ...
  "contributions": [
        {
            "id": "example-hub",
            "type": "ms.vss-web.hub",
            "targets": [
                "ms.vss-code-web.code-hub-group"
            ],
            "properties": {
                "name": "My Hub",
                "iconAsset": "my-publisher.my-extension/images/fabrikam-logo.png",
                "includesData": {
                    "assets": [
                        "my-publisher.my-extension/images/fabrikam-logo.png"
                    ]
                }
            }
       }
  ],
 "files": [
     {
         "path": "images/fabrikam-logo.png",
         "addressable": true
     }
 ]
}

예제 #2:

조명과 어둡게 같은 테마가 적용되면 다음과 같이 확장 매니페스트에서 아이콘을 지정할 수 있습니다.


{
    "id": "hub",
    "type": "ms.vss-web.hub",
    "targets": [
        "ms.vss-work-web.work-hub-group"
    ],
    "properties": {
        "name": "Hub",
        "description": "Something",
        "uri": "pages/Hub.html",
        "icon": {
            "light": "img/hub-light.png",
            "dark": "img/hub-dark.png"
        }
    }
}