Scroll

Action Event: Dashboard Reflow

With the addition of Dashboard Reflow (v2018.2+), Exago has enhanced the Dashboard Viewer to be responsive to a variety of screen sizes—e.g., desktops, tablets, smartphones—by dynamically re-positioning tiles to stack on top of each other via screen width calculations.

Dashboard Reflow can be implemented through the addition of an Action Event, which utilizes the OnDashboardResizeGlobal Event Type. During Dashboard execution, this Action Event will automatically derive an optimal new layout for the Dashboard tiles using the screen size as input. When the screen size changes within a single execution viewing session, the Action Event will dynamically update this layout to fit the new screen size.

Click here to download the Action Event JavaScript code.

 

Setting up the Dashboard Reflow Action Event

In the Admin Console, highlight the Action Events section, located under the Extension menu, and click Add.

AdminConsole_AddActionEvent.png

This will open the New Action Event menu.

NewActionEvent.png

Next, add a Name for the Action Event, e.g., “DashboardReflow.”

To add the code for the Action Event, click the textbox next to the CustomCode dropdown. In the CustomCode menu, set the Language to CSharp and add “System.IO” as a Namespace. Then, add the following code to the dialog, making sure to include the particular file path to the Action Event JavaScript code within the File.ReadAllText(@"…"); command:

string actionString = File.ReadAllText(@"C:\Exago\dashboardreflow\dashboardReflowFitWidth/js");
sessionInfo.JavascriptAction.SetJsCode(actionString);
return sessionInfo.JavascriptAction;

Alternatively, the Action Event JavaScript code can be copied and pasted into the dialog:

string jsCode = @"(function()
{
/* action event JS code; */ return true; }())"; sessionInfo.JavascriptAction.SetJsCode(jsCode); return sessionInfo.JavascriptAction;
Note: For more information on Global Action Events, please refer to this article.

Click the Test custom code execution icon to verify that the code compilation is successful, then click Okay to save and exit the CustomCode menu.

Set the Global Event Type to OnDashboardResize.

DashboardReflowActionEvent.png

Finally, click Apply or Okay to save the ActionEvent.

 

Behavior

Important: In order for this feature to work, the DashboardCanvasFit setting, located in the DashboardStyle panel of the Dashboard designer, must be set to Fit Width.

Once the Dashboard Reflow Action Event has been created, it will automatically apply to each newly executed Dashboard as well as any Dashboard that is resized during execution.

Example:

Example1.png

An executed Dashboard with Dashboard Canvas Fit set to Fit Width

 

Example2.png

The same Dashboard reflowing after the screen width has been changed


Hidden Article Information

Article Author
Exago Development
created 2018-11-29 20:59:27 UTC
updated 2019-03-07 21:59:01 UTC

Labels
no labels yet!
Have more questions? Submit a request