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.
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:
Namespaces:
string actionString = File.ReadAllText(@"{filepath}\actionString.js");
sessionInfo.JavascriptAction.SetJsCode(actionString);
return sessionInfo.JavascriptAction;
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 = '';
}
}
}