CODEWITHSUNDEEP
javascriptiframetfssdkwidget
AutoTester213
AutoTester213

Reputation: 2862

TFS-DASHBOARD - Adding a Enlarge button a widget

Hi i am using Iframe Dashboard widget extension I configured it my self so it can be displayed in "6x6" format which doesn't work, unfortunetly TFS maximum widget size is 4x4 that is too small to show some of my work,How can i add a Enlarge button/function to the widget?Some of TFS default widgets have that button.

This is my VSS configuration javascript.

VSS.init({
  explicitNotifyLoaded: true,
  usePlatformStyles: true
});

VSS.require(["TFS/Dashboards/WidgetHelpers"],
  function(WidgetHelpers) {
    WidgetHelpers.IncludeWidgetStyles();
    VSS.register("IframeDashboardWidget", function() {
      var getServerStatus = function(widgetSettings) {
        var $iframe = $('#iframe');
        var settings = JSON.parse(widgetSettings.customSettings.data);
        if (settings && settings.url) {
          $iframe.attr("src", settings.url);
        } else {
          $iframe.attr("src", 'data:text/html,<html><body style="font:1.2em sans-serif;background-color:#008000;color:#ffffff;font:16px Segoe UI,Helvetica Neue,Helvetica,Arial,Verdana,sans-serif"><div>Iframe</div><div>Dashboard</div><div>Widget</div></body></html>');
        }

        return WidgetHelpers.WidgetStatusHelper.Success();
      }

      return {
        load: function(widgetSettings) {
          $iframe.resizeTo();
          return getServerStatus(widgetSettings);
        },
        reload: function(widgetSettings) {
          return getServerStatus(widgetSettings);
        }
      }
    });
    VSS.notifyLoadSucceeded();
  });

Upvotes: 2

Views: 492

Answers (1)

PatrickLu-MSFT
PatrickLu-MSFT

Reputation: 51103

There is a concept of supported size in the widget.

supportedSizes

Array of sizes supported by your widget. When a widget supports multiple sizes, the first size in the array is the default size of the widget. The widget size is specified in terms of the rows and columns occupied by the widget in the dashboard grid. One row/column corresponds to 160px. Any dimension above 1x1 will get an additional 10px that represent the gutter between widgets. For example, a 3x2 widget will be 160*3+10*2 wide and 160*2+10*1 tall. The maximum supported size is 4x4.

More details please refer this tutorial: Add a dashboard widget

Update

You could try to use VSS.resize() function, but it has the scroll bar. For example, VSS.resize(400,500) (before VSS.notifyLoadSucceeded();).

Upvotes: 1

Related Questions