如何调整 VSTS 仪表板小部件的大小

Question

我正在构建一个 VSTS 团队仪表板小部件，我想显示一些自定义 html 内容；但是默认的小部件尺寸非常小，html 的一部分被截断了。参考以下截图：

How can I resize the widget so that the widget is larger in area?

注意：我尝试在小部件的 div 中添加一些 CSS，但这只会改变小部件 "inside" 的宽度容器，因此它没有使小部件轮廓变大。

Answer 1

一些小部件已预先调整大小，无法更改。其他的可以通过他们的配置对话框进行配置。 Widget Size

Prerequisites

You must be a member of a team project. If you don't have a team project yet, create one in VSTS.

If you haven't been added as a team member, get added now.

Anyone with access to the team project, including stakeholders, can view dashboards.

To add, edit, or manage a team dashboard, you must be a team admin, a project admin, or have dashboard permissions. In general, you need to be a team admin for the currently selected team to edit dashboards. Request your current team or project admin to add you as a team admin.

如果预览功能尚未启用，您需要先启用它们 Enable Preview Features

Answer 2

小部件大小可以在清单文件中定义，例如 vss-extension.json.

在 vss-extension.json contributions 项目下，您可以将 supportedSizes 定义为贡献的属性。如下是一段定义了多种尺寸的vss-extension.json文件：

{
        "id": "HelloWorldWidget3",
        "type": "ms.vss-dashboards-web.widget",
        "targets": [
            "ms.vss-dashboards-web.widget-catalog",
            ".HelloWorldWidget.Configuration"
        ],
        "properties": {
            "name": "Hello World Widget 3 (with config)",
            "description": "My third widget which supports configuration.",
            "catalogIconUrl": "img/helloWorld.png",
            "previewImageUrl": "img/helloWorld_330x160.png",
            "uri": "hello-world3.html",
          "supportedSizes": [
            {
              "rowSpan": 1,
              "columnSpan": 2
            },
            {
              "rowSpan": 2,
              "columnSpan": 2
            },
            {
              "rowSpan": 3,
              "columnSpan": 2
            },
            {
              "rowSpan": 4,
              "columnSpan": 2
            }
          ],
            "supportedScopes": [
                "project_team"
            ]
        }
}

更多细节，您可以参考example widget extension with Hello World Widget 3 (with config)。您可以在 supportedSizes 下定义更多尺寸（如上例）。

注意：您还需要在targets下指定配置。如上例的".HelloWorldWidget.Configuration"。

如何调整 VSTS 仪表板小部件的大小

How to resize VSTS dashboard widget

azure-devops

azure-devops-extensions