It is possible to create interactive dashboards, which are able to change dynamically in reaction to an event. Clicking on a result in one portlet triggers an event, which changes the input (and therefore the content) of another portlet.
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.
To create an interactive dashboardTo create an /wiki/spaces/DEV/pages/100720405:
- Define a result matrix that will contain the data and will enable the user to trigger an event.
- Define the a portlet that will dynamically change depending on the triggered event.
Define
...
Result Matrix
Create a result matrix and add a line that will trigger a client-side event when the user clicks on a row in the matrix. The value of the specified column for that row is passed on as an attribute. This will be the new input for the dependent portlet.
...
| Code Block | ||
|---|---|---|
| ||
def rawMatrix = api.datamartLookup("ProdTX","ProductLabel","ProductID","InvoicePrice\$","NetMargin%-")
def resultMatrix = api.newMatrix("Margin Status","Product ID","Label","Revenue","Net Margin %")
if(rawMatrix == null) return 0
def i=0
for(entry in rawMatrix.getEntries()) {
def row =[:]
row.put("Product ID",entry.get("ProductID"))
row.put("Label",entry.get("ProductLabel"))
row.put("Revenue",entry.get("InvoicePrice\$"))
def margin = entry.get("NetMargin%")/100
row.put("Net Margin %",resultMatrix.styledCell(margin,"#0000CD",null,"bold"))
if(margin <= 0) row.put("Margin Status",resultMatrix.libraryImage("Traffic","red"))
if(margin <0.1 && margin > 0) row.put("Margin Status",resultMatrix.libraryImage("Traffic","yellow"))
if(margin >=0.1 ) row.put("Margin Status",resultMatrix.libraryImage("Traffic","green"))
resultMatrix.addRow(row)
i++
if(i>100) break;
}
resultMatrix.setColumnFormat("Net Margin %",FieldFormatType.PERCENT)
resultMatrix.setColumnFormat("Revenue",FieldFormatType.MONEY_EUR)
resultMatrix.onRowSelection().triggerEvent(api.dashboardWideEvent("ProductIDChanged-ED"))
.withColValueAsEventDataAttr("ProductID", "ProductID")
return resultMatrix |
...
Define
...
Dynamic Portlet
Create a dashboard that will be embedded in the master dashboard as a portlet. The content of this slave dashboard will dynamically change based on the received event.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 dashboard portlet.
The element defining the portlet will be similar to this one:
| Code Block | ||
|---|---|---|
| ||
// Open/Show a dashboard named "Dashboard_Embedded"
return api.dashboard("Dashboard_Embedded")
// Here the user can assign values to the embedded
// dashboard inputs common to all three modes
.setParam("Product ID", api.input("Product ID"))
.setParam("Year", api.getElement("TimeEntry"))
// Show the dashboard embedded ...
.showEmbedded()
// ... and reevaluate it on "CustomerIdChanged-ED"
// Note: "dashboardWideEvent()" makes the event local to the containing dashboard instance
.andRecalculateOn(api.dashboardWideEvent("ProductIDChanged-ED"))
// Pull the "Product ID" attribute out of the event payload and expose it
// as the "Product ID" input to the embedded dashboard
.withEventDataAttr("Product ID").asParam("Product ID") |
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.
...
) |
...
Available Dashboard API methods:
...