Custom JS Events
Editable Sections Example Code
Custom JS Events
Editable Sections Example Code
Programmatically interact with editable sections using custom JS events. Please reach out to Explo support if this is something your team wants to enable.
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