Scroll

Action Event: Resizable dashboards

This action event causes dashboards to reorder their contents more flexibly when run on different sized screens. Dashboard scaling can be thought of a one-size-fits-all solution to creating dashboards which support multiple screen sizes, such as mobile, tablet, and PC. All dashboard elements will resize except for embedded reports.

Example

The same dashboard viewed on a tablet-size screen (left) or a smartphone-size screen (right):

 

Note: In this example, the client-side javascript is in separate file to improve readability.

Global Event Type: OnDashboardResize

This event occurs whenever an active dashboard changes size.

References:

  • WebReportsApi.dll

Namespaces:

  • WebReports.Api;
  • System.IO

A version of this Action Event for v2017.2+ is coming soon!

Code for versions prior to 2017.2:

string actionString = File.ReadAllText(@"{filepath}\actionString.js");
sessionInfo.JavascriptAction.SetJsCode(actionString);
return sessionInfo.JavascriptAction;

actionString.js

var dashboardItemsList = clientInfo.dashboard.dashboardItemsList;

if (clientInfo.dashboard.container.clientWidth < 700)
{
  var currentBottom = 0;
  for (var i = 0; i < dashboardItemsList.length; i++)
  {
    var currentItem = dashboardItemsList[i];
    var canvasItem = currentItem.canvasItem;
    var dashboardElement = currentItem.Element;
    var designHeight = currentItem.DesignHeight;
    var designWidth = currentItem.DesignWidth;
    var scalingFactor = 1;
    var newHeight = designHeight;
    var newWidth = designWidth;
    
    if (designWidth > clientInfo.dashboard.container.clientWidth)
    {
      var ratio = designHeight / designWidth;
      newWidth = Math.floor(clientInfo.dashboard.container.clientWidth - 5);
      
      if (currentItem.Type != 'Report') newHeight = Math.floor(newWidth * ratio);
        scalingFactor = newWidth / designWidth;
    }
    canvasItem.SetBounds({left:0, top: currentBottom, width: newWidth, height: newHeight}, true);
 
    if (currentItem.Type == 'Text')
    {
      if (scalingFactor != 1)
      {
        dashboardElement.style.transform = 'scale(' + scalingFactor + ')';
        dashboardElement.style.transformOrigin = 'top';
      }
      else
      {
        dashboardElement.style.transform = '';
        dashboardElement.style.transformOrigin = '';
      }
    }
    currentBottom += newHeight + 5;
  }
}
else
{
  for (var i = 0; i < dashboardItemsList.length; i++)
  {
    var currentItem = dashboardItemsList[i];
    var canvasItem = currentItem.canvasItem;
    var dashboardElement = currentItem.Element;
    var X = currentItem.DesignX;
    var Y = currentItem.DesignY;
    var Width = currentItem.DesignWidth;
    var Height = currentItem.DesignHeight;
    canvasItem.SetBounds({left:X, top: Y, width: Width, height: Height}, true);
    
    if (currentItem.Type == 'Text')
    {
      dashboardElement.style.transform = '';
      dashboardElement.style.transformOrigin = '';
    }
  }
}

Hidden Article Information

Article Author
Exago Development
created 2016-03-24 18:27:22 UTC
updated 2018-03-01 22:41:18 UTC

Labels
scaling, SAE, action event, events, example, responsive, screen, size,
Have more questions? Submit a request