...
For example, you have a dashboard with a grid, which contains details about products, and a chart that graphically displays the product data. When you select a row in the grid (a particular product), you want to see the chart automatically updated so that it displays the correct data for the selected product.
In this section:
Table of Contents | ||
---|---|---|
|
Info |
---|
See also an example How to Create an Interactive Embedded Dashboard. |
Advantages
The main reasons for using embedded dashboards are:
A single dashboard can be reused by embedding it within multiple main dashboards.
An embedded dashboard can be based on events and parameters provided by the main dashboard.
Code
Simply add a logic element that returns a DashboardApi instance:
paste-code-macro | ||||
---|---|---|---|---|
| ||||
return api.dashboard('<dashboard_name>').showEmbedded() |
...
The main dashboard can provide input parameters to the embedded dashboard via DashboardApi.setParam(String param_name, Object param_value)
. The above example can be extended to:
paste-code-macro | ||||
---|---|---|---|---|
| ||||
return api .dashboard('<dashboard_name>') // Here the user can assign values to the embedded dashboard inputs .setParam('Customer Id', 'CD-00067') // ... and of course this means it could also "forward" its own inputs .setParam('Product Id', api.input('Product Id')) // Show the dashboard embedded ... .showEmbedded() |
The embedded dashboard can then read the parameters via api.input(String param_name)
:
paste-code-macro | ||||
---|---|---|---|---|
| ||||
def sku = api.input('Product Id') def customer = api.input('Customer Id') // these can now be used, e.g. to build a chart api.newChartBuilder().newBarLine().addSeries() .setLabel('Invoice Price p/u') .setDatamart('DM.datamart_transaction') .setCurrency('EUR') .addDimFilter('ProductID', sku) // <=== .addDimFilter('CustomerID', customer) // <=== .setAxisX('Country') .setAxisY('InvoicePrice').withPerUnit().back() .setType(SeriesType.BAR) .withSortByAxisY(SortType.ASCENDING) .back() .build() |
...
Table of Content Zone | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ResultMatrixThe The event is triggered by a row click, and Main Dashboard - Matrix Element
Main Dashboard - Embedded Element
The embedded dashboard's logic can read the parameters as Open Embedded Dashboard on New TabAn embedded dashboard can be opened as a separate dashboard on a new browser tab. Parameters are passed on in the URL. paste-code-macroMatrix Element
Embedded Element
ScatterChartA chart generating click events that can send parameters and refresh an embedded dashboard is the ChartBuilder's It is possible to get both the AggregationBy (i.e. GroupBy) and BandBy dimensions of the clicked point. pasteMain Dashboard - Chart Element
Main Dashboard - Embedded Element
The embedded dashboard's logic can read the parameters as BarLineChartAnother chart that can generate click events is the ChartBuilder's The only data provided so far is the X axis category of the clicked bar. pasteMain Dashboard - Chart Element
Main Dashboard - Embedded Element
The embedded dashboard's logic can read the parameter as 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:
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. pasteMain Dashboard - Chart Element
Main Dashboard - Embedded Element
The embedded dashboard's logic can read the parameters as |
...
There are three ways to display the dashboard:
Embedded – The dashboard is embedded in the master dashboard as another portlet/dashlet.
Tab – The dashboard is opened in a new tab.
Window – The dashboard is opened in a new popup window.
The new tab or window is opened only once (i.e. on the first event) and is then reused/recalculated on every subsequent event.
...
Available Dashboard API Methods
DashboardApi setParam(String paramName, Object value);
DashboardApi showEmbedded();
DashboardApi andRecalculateOn(String eventName);
DashboardApi openInTabOrRecalculateOn(String eventName);
DashboardApi openInWindowOrRecalculateOn(String eventName);
DashboardApi openInWindowOrRecalculateOn(String eventName);
DashboardApi withEventDataAttr(String attrName);
DashboardApi andCloseOn(String eventName);
DashboardApi asParam(String paramName);
For more details see the API Documentation.
...