垂直导航指南

  • 项目

Azure DevOps Services

垂直导航带有影响某些扩展的 it 更改。 这些结果包括支持扩展图标以及对团队上下文的更改。

提示

使用Azure DevOps 扩展 SDK查看有关扩展开发的最新文档。

团队上下文

在传统的水平导航中，用户可以通过从页眉左上角的选取器中进行选择来执行项目或团队。 此选取器提供了一系列最近的团队，以及一种浏览所有团队的方法。 在新的垂直导航中，用户只能导航到 (而不是团队) 中的项目。 进行此更改是为了简化总体体验。 不过，它为 web 扩展引入了一项挑战，这些扩展依赖于用户使用页面页眉中的传统团队选取器切换团队的能力。

VSS.getWebContext() 是 VSS 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"
    }
}

不建议依赖于 VSS.getWebContext().team 。 相反，请按照下面的说明操作，具体取决于你的扩展所属的类别。

可识别团队的集线器扩展

如果你的扩展需要为用户提供一种选择团队的方法，可以使用 Teams REST API 获取当前项目的团队列表。 下面的示例演示如何从你的扩展调用此 API。

VSS.require(["VSS/Service", "TFS/Core/RestClient"],
   function(VSS_Service, Tfs_Core_WebApi) {
      var client = VSS_Service.getCollectionClient(Tfs_Core_WebApi.CoreHttpClient4);
  
      client.getTeams(VSS.getWebContext().project.id).then(
         function(teams) {
            console.log(teams);
         }
      );
});

有关提供团队选取器控件的扩展的示例，请参阅 团队日历。

团队感知中心（如积压工作（Backlog）和仪表板）中的透视/面板扩展

你的扩展可以检查传递给你的发布内容的 配置 对象。 此对象具有不同的属性，具体取决于贡献类型和托管内容的位置。 示例演示如何从 配置 中读取团队并回退到从 webContext 读取团队，以支持本地版本中新的垂直导航和更早的水平导航。

function getCurrentTeam() {
  let webContext = VSS.getWebContext();
  let configuration = VSS.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
  }
}

团队感知中心中的操作扩展，如积压工作（Backlog）和仪表板

你的扩展可以检查传递给在用户选择提供的菜单项时调用的回调的 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. 在 "基值" includesata 属性中为此资产添加一个条目。

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