{"type":"doc","content":[{"type":"paragraph","content":[{"text":"With a few lines of Groovy code, it is very easy to embed a dashboard as a portlet of another dashboard. This creates an interactive dashboard which can 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, embedded portlet.","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"In this section:","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"maxLevel":{"value":"1"}},"macroMetadata":{"macroId":{"value":"ba8cbffb-9a79-459a-8d3e-9559fe6350e3"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"6301fa24-48a7-41ab-82b1-b6ec2aaeee1f"}},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"See also an example ","type":"text"},{"text":"How to Create an Interactive Embedded Dashboard","type":"text","marks":[{"type":"link","attrs":{"href":"https://pricefx.atlassian.net/wiki/spaces/KB/pages/100142585"}}]},{"text":".","type":"text"}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Advantages","type":"text"}]},{"type":"paragraph","content":[{"text":"The main reasons for using embedded dashboards are:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"A single dashboard can be reused by embedding it within multiple main dashboards.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"An embedded dashboard can be based on events and parameters provided by the main dashboard.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Code","type":"text"}]},{"type":"paragraph","content":[{"text":"Simply add a logic element that returns a DashboardApi instance:","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"DashboardApi example","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"return api.dashboard('').showEmbedded()","type":"text"}]},{"type":"paragraph","content":[{"text":"Of course, it is also possible to add more elements in the main dashboard.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Parameters","type":"text"}]},{"type":"paragraph","content":[{"text":"The main dashboard can provide input parameters to the embedded dashboard via ","type":"text"},{"text":"DashboardApi.setParam(String param_name, Object param_value)","type":"text","marks":[{"type":"code"}]},{"text":". The above example can be extended to:","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Main Dashboard","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"return api .dashboard('')\n\n // Here the user can assign values to the embedded dashboard inputs\n .setParam('Customer Id', 'CD-00067')\n\n // ... and of course this means it could also \"forward\" its own inputs\n .setParam('Product Id', input.'Product Id')\n\n // Show the dashboard embedded ...\n .showEmbedded()\n // You will often want to hide the embedded dashboard's inputs from the end user\n .withInputsHidden()","type":"text"}]},{"type":"paragraph","content":[{"text":"The embedded dashboard can then read the parameters via the ","type":"text"},{"text":"input","type":"text","marks":[{"type":"code"}]},{"text":" binding variable:","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Embedded Dashboard","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"def sku = input.'Product Id'\ndef customer = input.'Customer Id'\n\n// these can now be used, e.g. to build a chart\napi.newChartBuilder().newBarLine().addSeries()\n .setLabel('Invoice Price p/u')\n .setDatamart('DM.datamart_transaction')\n .setCurrency('EUR')\n .addDimFilter('ProductID', sku) // <===\n .addDimFilter('CustomerID', customer) // <===\n .setAxisX('Country')\n .setAxisY('InvoicePrice').withPerUnit().back()\n .setType(SeriesType.BAR)\n .withSortByAxisY(SortType.ASCENDING)\n .back()\n .build()","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Events","type":"text"}]},{"type":"paragraph","content":[{"text":"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. Elements which can trigger an embedded dashboard to receive new parameters are:","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"2"},"maxLevel":{"value":"2"},"outline":{"value":"false"},"style":{"value":"none"},"type":{"value":"list"},"printable":{"value":"true"}},"macroMetadata":{"macroId":{"value":"580bd346-7039-4dec-a58c-37159595672b"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"006fbdce-237c-416a-9ce3-295d454c8486"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"ResultMatrix","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"ResultMatrix","type":"text","marks":[{"type":"code"}]},{"text":" element can trigger an embedded dashboard to receive new parameters and be rendered again. ","type":"text"}]},{"type":"paragraph","content":[{"text":"The event is triggered by a row click, and ","type":"text"},{"text":"withColValueAsEventDataAttr()","type":"text","marks":[{"type":"code"}]},{"text":" must be called for each column for which values should be added as a payload of the event. Only single selections of grid rows are supported.","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Main Dashboard - Matrix Element","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"def matrix = someQueryResult.toResultMatrix()\n\nmatrix.onRowSelection().triggerEvent('')\n .withColValueAsEventDataAttr('', '')\n\n// events are global through browser tabs, so they are not limited to embedded dashboards\n// we provide a utility that constructs an event name that is unique to the current dashboard\ndef event_name = api.dashboardWideEvent('')\n\nmatrix.onRowSelection().triggerEvent(event_name)\n .withColValueAsEventDataAttr('', '')\n .withColValueAsEventDataAttr('', '')","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Main Dashboard - Embedded Element","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"def event_name = api.dashboardWideEvent('')\n\nreturn api .dashboard('').showEmbedded()\n\n // replaced by the event payload\n //.setParam('', 'CD-00067')\n //.setParam('', 'MB-0012')\n\n .andRecalculateOn(event_name)\n\n // expose the event payload\n\n .withEventDataAttr('').asParam('')\n .withEventDataAttr('').asParam('')","type":"text"}]},{"type":"paragraph","content":[{"text":"The embedded dashboard's logic can read the parameters as input.","type":"text"},{"text":")","type":"text","marks":[{"type":"code"}]},{"text":" and input.","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Open Embedded Dashboard on New Tab ","type":"text"}]},{"type":"paragraph","content":[{"text":"An embedded dashboard can be opened as a separate dashboard on a new browser tab. Parameters are passed on in the URL.","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Matrix Element","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"def matrix = someQueryResult.toResultMatrix()\n\ndef event_name = api.dashboardWideEvent('recalculateDashboard')\n\nm.onRowSelection().triggerEvent(event_name)\n .withColValueAsEventDataAttr('Column1', 'DA1')\n .withColValueAsEventDataAttr('Column2', 'DA2')\n\t\t\t\t\t .withColValueAsEventDataAttr('Column3', 'DA3')\n\nreturn matrix;","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Embedded Element","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"def event_name = api.dashboardWideEvent('recalculateDashboard')\n\nreturn api .dashboard(\"EmbeddedResultMatrixDashboard\")\n // assign values to the embedded dashboard inputs\n .setParam('Typed ID', '***')\n // assign values to the embedded dashboard inputs\n .setParam('Typed ID2', '123')\n // \"forward\" its own inputs\n .setParam('Typed ID3', input.'Typed ID3')\n\t .openInTabOrRecalculateOn(api.dashboardWideEvent('recalculateDashboard'))\n\t\t\t.withEventDataAttr('DA1').asParam('Typed ID')\n\t\t\t.withEventDataAttr('DA3').asParam('Typed ID3')","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"ScatterChart","type":"text"}]},{"type":"paragraph","content":[{"text":"A chart generating click events that can send parameters and refresh an embedded dashboard is the ChartBuilder's ","type":"text"},{"text":"ScatterChart","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"It is possible to get both the AggregationBy (i.e., GroupBy) and BandBy dimensions of the clicked point.","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Main Dashboard - Chart Element","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"def scatter = api.newChartBuilder().newScatter()\n\nscatter.getOptions()\n .setTitle('Title')\n .setDisableDrilldown(true)\n // etc.\n\nscatter.addSeries()\n .setLabel('Series1')\n // etc.\n\nscatter.onClick()\n .triggerEvent(api.dashboardWideEvent(''))\n .withAggregationByAsEventDataAttr() // attribute_name = 'aggregationBy'\n .withBandByAsEventDataAttr() // attribute_name = 'bandBy'","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Main Dashboard - Embedded Element","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"def event_name = api.dashboardWideEvent('')\n\nreturn api .dashboard('').showEmbedded()\n .andRecalculateOn(event_name)\n\n // expose the event payload\n .withEventDataAttr('aggregationBy').asParam()\n .withEventDataAttr('bandBy').asParam()\n","type":"text"}]},{"type":"paragraph","content":[{"text":"The embedded dashboard's logic can read the parameters as input.","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" and input.","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"BarLineChart","type":"text"}]},{"type":"paragraph","content":[{"text":"Another chart that can generate click events is the ChartBuilder's ","type":"text"},{"text":"BarLineChart","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"The only data provided so far is the X axis category of the clicked bar.","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Main Dashboard - Chart Element","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"def barChart = api.newChartBuilder().newBarLine()\n\nbarChart.getOptions()\n .setTitle('Title')\n .setDisableDrilldown(true)\n // etc.\n\nbarChart.addSeries()\n .setLabel('Series1')\n // etc.\n\nbarChart.onClick()\n .triggerEvent(api.dashboardWideEvent(''))\n .withXAsEventDataAttr() // attribute_name 'x'\n","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Main Dashboard - Embedded Element","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"def event_name = api.dashboardWideEvent('')\n\nreturn api .dashboard('').showEmbedded()\n .andRecalculateOn(event_name)\n\n // expose the event payload\n .withEventDataAttr('x').asParam('')\n","type":"text"}]},{"type":"paragraph","content":[{"text":"The embedded dashboard's logic can read the parameter as input.","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Data Tab of any Chart (except Waterfalls)","type":"text"}]},{"type":"paragraph","content":[{"text":"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:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"withAnyDimensionAsEventDataAttr()","type":"text","marks":[{"type":"code"}]},{"text":" as a wildcard","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"withDimensionAsEventDataAttr()","type":"text","marks":[{"type":"code"}]},{"text":" one or multiple times","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Main Dashboard - Chart Element","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"def table = api.newChartBuilder().newDataTable()\n\ntable.getOptions()\n .setTitle('Title')\n .setDisableDrilldown(true)\n // etc.\n\ntable.addSeries()\n .setLabel('Series1')\n // etc.\n\ntable.onRowClick()\n .triggerEvent(api.dashboardWideEvent(''))\n .withDimensionAsEventDataAttr() // attribute_name = dim_name\n .withDimensionAsEventDataAttr() // attribute_name = dim_name\n ...\n // or .withAnyDimensionAsEventDataAttr() or .withDimensionAsEventDataAttr('*')\n\ntable.onCellClick()\n .triggerEvent(api.dashboardWideEvent(''))\n .withDimensionAsEventDataAttr() // attribute_name = dim_name\n .withDimensionAsEventDataAttr() // attribute_name = dim_name\n ...\n // or .withAnyDimensionAsEventDataAttr() or .withDimensionAsEventDataAttr('*')","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Main Dashboard - Embedded Element","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"def event_name = api.dashboardWideEvent('')\n\nreturn api .dashboard('').showEmbedded()\n .andRecalculateOn(event_name)\n\n // expose the event payload\n .withEventDataAttr().asParam()\n .withEventDataAttr().asParam()\n\t\t\t...\n","type":"text"}]},{"type":"paragraph","content":[{"text":"The embedded dashboard's logic can read the parameters as input.","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" and input.","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Dashboard Display Modes","type":"text"}]},{"type":"paragraph","content":[{"text":"There are three ways to display the dashboard:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Embedded – The dashboard is embedded in the master dashboard as another portlet/dashlet.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Tab – The dashboard is opened in a new tab.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Window – The dashboard is opened in a new popup window.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Available Dashboard API Methods","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"DashboardApi setParam(String paramName, Object value);","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"DashboardApi showEmbedded();","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"DashboardApi andRecalculateOn(String eventName);","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"DashboardApi openInTabOrRecalculateOn(String eventName);","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"DashboardApi openInModalOrRecalculateOn(String eventName);","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"DashboardApi withEventDataAttr(String attrName);","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"DashboardApi asParam(String paramName);","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"DashboardApi withInputsHidden();","type":"text","marks":[{"type":"code"}]}]}]}]},{"type":"paragraph","content":[{"text":"For more details see the ","type":"text"},{"text":"API Documentation","type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.pricefx.eu/api/groovy/master/index.html?net/pricefx/formulaengine/TableContext.html"}}]},{"text":".","type":"text"}]}],"version":1}

Browser not supported