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 dashboard:

1. Define a result matrix that will contain the data and will enable the user to trigger an event.
2. Define the portlet that will dynamically change depending on the triggered event.

Define the 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.

The event-triggering line will be similar to this one:

matrix.onRowSelection().triggerEvent(api.dashboardWideEvent("CustomerIdChanged-ED")).withColValueAsEventDataAttr("ProductID", "customerId")

When the user selects a row, a dashboard event called CustomerIdChanged-ED is triggered and the value of the ProductID column for that row is passed on as an attribute.

The element, which defines the result matrix, will be similar to this one:

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

Note: Only single selections of grid rows are supported.

Define the 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:

// 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.

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 asParam(String paramName);