Introduction
When embedding Astrato, there is a need to allow communication between the host and the Astrato app.
These new actions allow external apps hosting Astrato apps to pass or receive information from the Astrato app.
Some use cases:
Control navigation inside Astrato from a custom navigation menu
Pass filter values to Astrato
Get information on current filters or active sheets from the Astrato app
Passing information to an Astrato app
The example below shows how to pass information to an Astrato app and control navigation between the different sheets in the app.
Astrato Action
uses the on-custom event action block.
Add the go-to action block and set the parameter to use the custom event data payload.
External App
Add this JS code to the external source app.
function sentMessage(payload) {
iframe.contentWindow.postMessage({
type: 'ASTRATO_NAVIGATE_SHEET',
payload,
}, '*');
}The payload would be, in this case, the name of the Sheet to navigate to.
It is important to ensure that the type in the code is similar to the custom event name in Astrato.
Listening to events in an Astrato app
Listening to events in Astrato allows Astrato to pass information to an external app.
The example below shows how to pass the active sheet to the external app.
Astrato Action
This action block emits the active sheet name to a custom event whenever the active sheet is changed.
External APP
Add this code to the external app to listen to events passed from Astrato.
window.addEventListener('message', (event) => {
if (event.data?.type === 'ASTRATO_SHEET_ENTER') {
const activeSheetName = event.data.payload;
['Circle', 'Square', 'Triangle'].forEach((sheetName) => {
const button = document.getElementById(sheetName);
if (activeSheetName === sheetName) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
})
}