CODEWITHSUNDEEP
azure-devopsazure-devops-extensions
user8463863
user8463863

Reputation: 327

How to resize VSTS dashboard widget

I am building a VSTS team dashboard widget and I would like to display some custom html content; however the default widget size is very small and part of the html gets cut off. Refer to the following screenshot:

I would like the window to at least be a fixed length in the horizontal and perhaps a dynamic vertical.

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

Note: I tried adding some CSS to the div of widget but that only changed the width that was "inside" the widget container, and thus it didn't make the widget outline bigger.

Upvotes: 3

Views: 2274

Answers (2)

Marina Liu
Marina Liu

Reputation: 38106

Widget size can be defined in manifest file like vss-extension.json.

Under vss-extension.json contributions oject, you can define the supportedSizes as a contribution's property. Such as below is a piece of the vss-extension.json file defined with multiple sizes:

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

More details, you can refer the example widget extension with Hello World Widget 3 (with config). And you can define more sizes under the supportedSizes (as above example).

Note: you also need to specify the configuration under the targets. As the ".HelloWorldWidget.Configuration" for above example.

Upvotes: 1

Jesse Milam
Jesse Milam

Reputation: 66

Some widgets are pre-sized and can't be changed. Others are configurable through their configuration dialog. 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.

You'll need to turn on preview features first if they're not enabled already Enable Preview Features

Upvotes: 0

Related Questions