Capture the Save an Insight Event from Embedded Analytical Designer
With embedded Analytical Designer in place (see Embed Analytical Designer), you can configure your application to catch every insight that your users create in Analytical Designer. Saving a new insight triggers a postMessage that your application can catch and process according to your business needs. For example, you may want to save insights as report definitions using the API.
How It Works
A user creates an insight in embedded Analytical Designer and clicks Save.
Analytical Designer suggests the user name the insight.
The user provides the name, and clicks Save.
The insight is saved in Analytical Designer. It becomes available from the list under the Open button:
At the same time, a postMessage is generated that delivers a metadata object with information about the created insight.
Your application catches the postMessage and handles it as needed.
Configure Your Application to Capture the Save an Insight Events
Add an event listener to your application so that it catches postMessages.
The following is an example of such a listener:
window.addEventListener("message", function(e){
// Catching postMessage events from iframe
console.log('PARENT FRAME: RECEIVED POST MESSAGE', e);
// Checking whether the event is gdc, then checking whether the product is analyticalDesigner and the specific event is visualizationSaved
if(e.data.gdc && e.data.gdc.product === 'analyticalDesigner' && e.data.gdc.event.name === 'visualizationSaved') {
console.log('visualizationSaved event triggered');
}
}, false);
In this example:
- The product name (that is,
e.data.gdc.product) is‘analyticalDesigner’. - The event name (that is,
e.data.gdc.event.name) is‘visualizationSaved’.
Example: Embedded Analytical Designer with Event Catching
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EMBEDDED</title>
<script>
window.addEventListener("message", function(e){
console.log('PARENT FRAME: RECEIVED POST MESSAGE', e); // Catching postMessage events from iframe
// Checking whether the event is gdc, then checking whether the product is analyticalDesigner and the specific event is visualizationSaved
if(e.data.gdc && e.data.gdc.product === 'analyticalDesigner' && e.data.gdc.event.name === 'visualizationSaved') {
console.log('visualizationSaved event triggered');
}
}, false);
</script>
</head>
<body>
<iframe src="https://localhost:8443/analyze/embedded/" width="1300" height="1000"></iframe>
</body>
</html>