Scroll

Action Event: Resizable dashboards

Note: This action event has been superseded by Dashboard Reflow (v2018.2.1).

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

Code for v2017.2+

string actionString = @"
let dashboardModelList = clientInfo.dashboard.GetAllTileModels(); // make sure there are tiles to move on the dashboard; only rearrange tiles in fit none if (clientInfo.dashboard.GetAllTileContents().length > 0 && clientInfo.dashboard.GetCanvasFitType() == wrDashboardLayoutFit.None) { if (clientInfo.dashboard.GetContainer().clientWidth < 800) { let currentBottom = 0; for (let i = 0; i < dashboardModelList.length; i++) { let currentItem = dashboardModelList[i]; if (currentItem.Bounds == null) continue; let itemBounds = currentItem.Bounds.GetPixelBounds(clientInfo.dashboard.Canvas, clientInfo.dashboard.GetCanvasFitType()); let designHeight = itemBounds.Height; let designWidth = itemBounds.Width; let scalingFactor = 1; let newHeight = designHeight; let newWidth = designWidth; if (designWidth > clientInfo.dashboard.container.clientWidth) { let ratio = designHeight / designWidth; newWidth = Math.floor(clientInfo.dashboard.container.clientWidth - 5); if (currentItem instanceof wrDashboardTileContentAdvancedReport == false) newHeight = Math.floor(newWidth * ratio); scalingFactor = newWidth / designWidth; } let tileContent = clientInfo.dashboard.GetTileContentById(dashboardModelList[i].Id); if (tileContent != null) tileContent.StretchTile(false, {Left:0, Top: currentBottom, Width: newWidth, Height: newHeight}); if (currentItem instanceof wrDashboardTileContentText) { if (scalingFactor != 1) { dashboardElement.style.transform = 'scale(' + scalingFactor + ')'; dashboardElement.style.transformOrigin = 'top'; } else { dashboardElement.style.transform = ''; dashboardElement.style.transformOrigin = ''; } } currentBottom += newHeight + 5; } } else { for (let i = 0; i < dashboardModelList.length; i++) { let currentItem = dashboardModelList[i]; if (currentItem.Bounds != null) { let itemBounds = currentItem.Bounds.GetPixelBounds(clientInfo.dashboard.Canvas, clientInfo.dashboard.GetCanvasFitType()); let tileContent = clientInfo.dashboard.GetTileContentById(dashboardModelList[i].Id); if (tileContent != null) tileContent.StretchTile(false, itemBounds); } } } } "; sessionInfo.JavascriptAction.SetJsCode(actionString); return sessionInfo.JavascriptAction;

Code for pre-v2017.2

string actionString = @"
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 = ''; } } }
"; sessionInfo.JavascriptAction.SetJsCode(actionString); return sessionInfo.JavascriptAction;

Hidden Article Information

Article Author
Exago Development
created 2016-03-24 18:27:22 UTC
updated 2018-11-30 21:49:33 UTC

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