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.
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 = @"
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;
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;