Your web app can interact with the Cluvio embed to provide tighter integration or more advanced functionality, such as custom UI for filtering as part of your app. There are 2 parts to that:
- actions, which your web app can trigger on the embed
- events, that the embed emits and your application to respond to
Actions
Actions are like commands, through which you trigger a specific behavior inside the embed. The actions are sent via JavaScript postMessages - the standard JavaScript interface that allows communicating between an app and an iframe.
Available actions:
| action | parameters | description |
changeParameters |
|
Trigger filters change programmatically - typically used when the filters UI is done outside of the embed (embed does not display the toolbar) via custom controls |
showReport |
reportId |
Switch to or change between full-screen reports |
showDashboard |
Show the full dashboard (typically after a single maximized report was displayed) | |
updateSettings |
darkMode |
Dynamically update the displayed dashboard settings (currently supports the dark mode attribute) |
downloadPdf |
reportId (optional) |
Download PDF of the dashboard or individual report |
downloadImage |
reportId (optional) |
Download image of the dashboard or individual report |
downloadExcel |
reportId (optional) |
Download Excel of the dashboard or individual report |
refresh |
Trigger refresh of the dashboard | |
updateSharingSecret |
sharingSecret |
Update the sharingSecret value of the embed (typically as a result of the previous one expiring - notified via the secretExpired event) |
Events
The embed emits events also as postMessages to the outer app - you can listen to these in your JavaScript code to respond to actions, such as refreshing the expired sharingSecret value or updating the state of your own filter controls.
Available events:
| event | parameters | description |
parametersChanged |
parameters |
Fired when the user changes filters (via the filter bar), the value of the parameter contains the new filter values. |
parametersReverted |
- |
Fired when the user uses the "Revert to Defaults" action in the filter bar to go back to the defaults. |
secretExpired |
- |
Fired when the current sharingSecret expires |
embedSize |
width: number, height: number |
Fired after the initial render or when the window resizes, allows your app to adjust the iframe DOM element size based on the actual dimensions the dashboard needs. The typical case is having a width of the iframe determined by the available space and a height dynamic based on the dashboard grid needs. |
drillSelect |
filters: [] |
Fired when the user clicks on a drill-down link configured with the same dashboard as target. The filters parameter contains a list of the filters and their corresponding value to set. |
drillDown |
dashboardId, filters: [] |
Fired when the user clicks on a drill-down link configured with a different dashboard as target. The dashboardId parameter contains the target dashboard id, the filters parameter contains a list of the filters and their corresponding value to set. |