Custom JS Events
Editable Sections Example Code
Customers
Data Sources
- Connecting to Data Sources
- Data Sources and Schema
- Building your data model
- New Data Connector (FIDO)
Dashboards
- Creating Dashboards
- Dashboard Features
Report Builders
- Creating Report Builders
- Report Builder Features
Embedding Documentation
- Add Explo Domains To CSP
- Allowlisting your domain
- Using embed secrets (JWTs)
- Dashboard Embedding
- Report Builder Embedding
- Iframe vs Web Component
- Troubleshooting Your Embed
General Features
- Analytics Reporting
- Internationalization
- Timezones
- Custom JS Events
- Overview
- Incoming JS Events to Consume
- Outgoing JS Events to Emit
- Editable Sections Example Code
- Embed ID Page
- Exporting Features
Managing Permissions
Custom JS Events
Editable Sections Example Code
Programmatically interact with editable sections using custom JS events
Example Code
<!DOCTYPE html>
<html>
<head>
<script>
let charts = [];
let availableChartTemplates = [];
const messageListener = (e) => {
// Check origin of message before reading
if (e.origin != "https://app.explo.co") return;
switch (e.data.event) {
case "dashboardReadyToLoad":
// Resize iFrame so no there's no scrollbar inside of it
document.getElementById("exploIframe").style.height =
e.data.detail.dashboardHeight + "px";
break;
case "dashboardUpdated":
// Resize iFrame so no there's no scrollbar inside of it
document.getElementById("exploIframe").style.height =
e.data.detail.dashboardHeight + "px";
break;
case "editableSectionUpdated":
charts = [...e.data.detail.charts];
availableChartTemplates = [
...e.data.detail.availableChartTemplates,
];
console.log(charts, availableChartTemplates);
break;
case "editableSectionChartAdded":
console.log(e.data.event, e.data.detail);
break;
case "editableSectionChartRemoved":
console.log(e.data.event, e.data.detail);
break;
default:
console.log(e.data.event, e.data.detail);
}
};
// Change chartTemplateId to one of the ones in availableChartTemplates
function handleAdd() {
if (!availableChartTemplates.length) return;
const exploIframe = document.getElementById("exploIframe");
exploIframe.contentWindow.postMessage(
{
event: "addEditableSectionChart",
detail: { chartTemplateId: availableChartTemplates[0].id },
},
"*"
);
}
// Change chartId to one of the ones in charts
function handleDelete() {
console.log(charts.length);
if (!charts.length) return;
const exploIframe = document.getElementById("exploIframe");
exploIframe.contentWindow.postMessage(
{
event: "removeEditableSectionChart",
detail: {
chartId: charts[0].id,
},
},
"*"
);
}
window.addEventListener("message", messageListener);
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("addBtn").addEventListener("click", () => {
handleAdd();
});
document.getElementById("deleteBtn").addEventListener("click", () => {
handleDelete();
});
});
</script>
</head>
<body>
<iframe
id="exploIframe"
src="REPLACE_WITH_YOUR_EMBED_IFRAME_URL"
style="width: 100%; border: none; height: 300px"
>
</iframe>
<button id="addBtn">Add First Chart Template</button>
<button id="deleteBtn">Delete First Chart</button>
</body>
</html>
On this page