How to Create an Interactive Embedded Dashboard

Owned by Jan Panoušek
Last updated: Jan 19, 2022

To create an interactive embedded dashboard:

  1. Define a result matrix that will contain the data and will enable the user to trigger an event.
  2. Define 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.

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","3_red"))
  if(margin <0.1 && margin > 0) row.put("Margin Status",resultMatrix.libraryImage("Traffic","2_yellow"))
  if(margin >=0.1 ) row.put("Margin Status",resultMatrix.libraryImage("Traffic","1_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.

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")

Found an issue in documentation? Write to us.

Â