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.

Note: 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

Code

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 2017-06-19 20:29:16 UTC

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