Interactive Dashboards

When you need a Dashboard, which can change content dynamically in reaction to an event.

For example, when you click on a row in a table or a bullet/bar in a chart, which are displayed on the dashboard, then some other parts of the Dashboard will react to it and refresh its content based on the selected row or bullet.

Principle of Work

The user clicks on the interactive table/chart (displayed on the Main dashboard).
The table/chart generates an Event.
The Event is caught by the Embedded dashboard.
The Embedded dashboard can react to the Event in several ways: it can appear, recalculate or close.

Configuration

Interactive Dashboard consists of two dashboard Logics and two dashboard Definitions.

Dashboards

The Main dashboard, which has:
- Filters
- Interactive ("clickable") Matrix Table or a Chart
  - The Table can have "clickable" (interactive) rows - i.e., when you click on a row, it will trigger recalculation and a refresh of the Embedded dashboard. The value selected/clicked in the row can be passed as additional parameter/input into the Embedded dashboard.
  - The Chart can have "clickable" (interactive) bullets/bars - i.e., when you click on a bullet or a bar, it will trigger recalculation and a refresh of the Embedded Dashboard. The value you clicked on, can be passed as additional parameter/input into the Embedded dashboard.
The Embedded dashboard:
- When triggered from the Main dashboard, it can read the values passed from the Main dashboard and refresh/recalculate its content (charts, tables, …).
- It can be displayed in several modes/ways:
  - Embedded - As a sub-window (a portlet) of the Main dashboard.
  - Tab - The embedded dashboard will open in a new Tab.
  - Popup Window - The embedded dashboard will open in a new popup window.

Definitions

Both Dashboards have their own Definitions. Usually the Embedded dashboard is not used as standalone, so you do not want to expose it to the user in the list of Dashboards.

Dashboard Definition	Visibility

Dashboard Definition	Visibility
Main	true
Embedded	false

Event

When you click on the interactive chart/matrix, it will generate an Event. This Event will be caught by the embedded dashboard, and it can react on it - usually with recalculation and refreshing.

The Event can hold data (attributes) - for example, when you click on a row in a matrix table, the table can insert some values from the row in the Event. Later, when the Event is caught by the embedded dashboard, the dashboard can use the data from the Event (the attributes) and place them to the input field values of the embedded dashboard.

Every event has its source (e.g., a grid) and a payload – arbitrary data (e.g., values of grid columns), which are passed to the embedded dashboard. Widgets which can trigger an Event and pass values:

Result Matrix
Scatter Chart
Bar Line Chart
Data Tab of any chart (except Waterfall)
Highcharts

Events are global across browser tabs, so they are not limited to embedded dashboards. An event name must be unique to the current dashboard. That’s why we’re using a utility function api.dashboardWideEvent() to get an event name unique/specific for the Main dashboard.

Logics

Both dashboards have their own logics.

Main dashboard logic:
- Builds/defines the interactive matrix or chart.
- Defines/inserts the Embedded dashboard.
Embedded dashboard logic:
- Reads parameters passed from the interactive matrix or charts.
- Rebuilds its own content based on the new parameter/input values.

Logics Sample - Inclusion of Embedded Dashboard

This sample shows a code which only defines the embedded dashboard, but is not yet interactive. The Main dashboard will display the Embedded dashboard inside of its portlet.

Main Dashboard logic: Insertion of the Embedded Dashboard - bare minimum

return api.dashboard('<dashboard_name>').showEmbedded()

Embedded Dashboard logic: Display something on the dashboard

// any kind of matrix or chart will work here

Logics Sample - Passing Parameters to Embedded Dashboard

This sample demonstrates how to pass parameters from the Main dashboard to the Embedded dashboard. This is not yet interactive, because the Embedded dashboard will refresh only when the Main dashboard is refreshed. So it’s almost the same, as if the Main dashboard would contain the code of the Embedded dashboard directly.

The parameters in the target dashboard can be only read by "scalar" inputs, but not by Configurators. If you need to pass a value to Configurator, consider Context Linking.

Main Dashboard logic: Insertion of the Embedded dashboard - with parameters passed to the Embedded dashboard

return api.dashboard('<dashboard_name>')

          // Here the user can pass/assign values to the embedded dashboard inputs
          .setParam('CustomerId', 'CD-00067')

          // ... and of course this means it could also "forward" its own inputs
          .setParam('ProductId', api.input('ProductId'))

          // Show the Embedded Dashboard
          .showEmbedded()

Embedded Dashboard logic: Can read the parameters passed into it

Logics Sample - Trigger Event from Result Matrix

This is a really simple interactive dashboard. In this sample, the Main dashboard contains a Matrix table, and when the user clicks on its row, the Embedded dashboard is refreshed (using the parameters passed from the matrix).

Main dashboard logic: Build and display inteactive Matrix table

Main dashboard logic: Insert Embedded dashboard

Embedded Dashboard logic: Reads the parameters passed to it

Display Modes

The Embedded dashboard can be displayed in several modes/ways:

Embedded – Shows the given dashboard as an Embedded dashboard of another (main) dashboard - i.e., as a sub-window (a portlet) of the Main dashboard.

Tab – On the specified event the Embedded dashboard will be opened in a new tab and recalculated.

To achieve opening a Dashboard on new Tab, consider using Context Linking, to which you can pass also complex input fields values.

Window – On the specified event the Embedded dashboard will be opened in a new modal window and recalculated.

To achieve opening a Dashboard on new Window, consider using Context Linking, to which you can pass also complex input fields values.

(Optional) Triggering Event from Charts

Logics Sample - Trigger Event from ScatterChart

It is possible to get both the AggregationBy (i.e., GroupBy) and BandBy dimensions of the clicked point.

Main dashboard: Define chart with "on click" trigger

Main dashboard: Insert the Embedded dashboard, let it react on event

Logic Sample - Trigger Event from BarLineChart

The only data provided so far is the X axis category of the clicked bar.

Main dashboard: Define chart with "on click" trigger

Main dashboard: Insert the Embedded dashboard, let it react on event

Logic Sample - Trigger Event from Data Tab of Any Chart (except Waterfalls)

Mainly with the DataTable chart (but also with the Data tab of any other chart type except Waterfall and WaterfallComparison), it is possible to subscribe to row level and cell level click events. The event can provide values of some or all of the dimensions shown in the grid, by calling one of these methods:

withAnyDimensionAsEventDataAttr() as a wildcard
withDimensionAsEventDataAttr('<dimName>') one or multiple times

For row click events all the requested dimensions will be provided. For cell clicks, the cell must be in the column of a subscribed dimension, and if so then only the cell’s contents will be provided.

Main dashboard: Define chart with "on click" trigger

Main dashboard: Insert the Embedded dashboard, let it react on event

Logic Sample - Trigger Event from Highcharts

Allows to define events that will be triggered when the user clicks in the chart/map.

❶ public ResultHighchart.OnPointClick onPointClick()

References

Pricefx Documentation
- Interactive Embedded Dashboards

Groovy API

api functions
- DashboardApi dashboard(String dashboardName)
- String dashboardWideEvent(String eventName) - makes the event local to the containing dashboard instance. It’s a utility, that constructs an event name that is unique to the current dashboard
DashboardApi functions

Knowledge Base