Embedded Drilldown Example
The following is a simplified example on how to create an event listener in order to implement a Drilldown in an embedded chart. Refer here for our official documentation on our Embeds Refer to this community post to see how to easily generate an embed URL. Refer to this article to learn more about Postmessages. After successfully embedding your dashboard onto your webpage, you'll want to create a function that can generate a url for the iframe src, create an event listener, parse the filters and create a new array to use in the child filter Note: Be sure to conceal your api key when actually implementing this on your own websites. Example: // function that creates source url const periscopeUrl = (apiKey, data) => { // Set the path and escape the querystring const escapedQS = escape(JSON.stringify(data)) const path = `/api/embedded_dashboard?data=${escapedQS}` // Use SHA to generate signature with API key const sha = new jsSHA('SHA-256', 'TEXT') sha.setHMACKey(apiKey, 'TEXT') sha.update(path) const signature = sha.getHMAC('HEX') // Build and return final URL const url = `https://app.periscopedata.com${path}&signature=${signature}` return url } // Drilldown listener const receiveMessage = (event) => { if (typeof event.data == 'object' && event.data.event_type == "drilldown") { const data = { dashboard: event.data.destination_dashboard_id, embed: 'v2', filters: filterValues(event.data.filter_values), } iframe.src=periscopeUrl(YOUR_API_KEY, data); } } // Parse drilldown filter values and create new filter array const filterValues = (values) => { output = [] values.forEach(obj => { output.push({'name': obj.filter_name, 'value': obj.column_value}) }) return output } // Listen for POST messages from Sisense for Cloud Data Teams window.addEventListener("message", receiveMessage, false) // function that creates source url const periscopeUrl = (apiKey, data) => { // Set the path and escape the querystring const escapedQS = escape(JSON.stringify(data)) const path = `/api/embedded_dashboard?data=${escapedQS}` // Use SHA to generate signature with API key const sha = new jsSHA('SHA-256', 'TEXT') sha.setHMACKey(apiKey, 'TEXT') sha.update(path) const signature = sha.getHMAC('HEX') // Build and return final URL const url = `https://app.periscopedata.com${path}&signature=${signature}` return url } // Drilldown listener const receiveMessage = (event) => { if (typeof event.data == 'object' && event.data.event_type == "drilldown") { const data = { dashboard: event.data.destination_dashboard_id, embed: 'v2', filters: filterValues(event.data.filter_values), } iframe.src=periscopeUrl(YOUR_API_KEY, data); } } // Parse drilldown filter values and create new filter array const filterValues = (values) => { output = [] values.forEach(obj => { output.push({'name': obj.filter_name, 'value': obj.column_value}) }) return output } // Listen for POST messages from Sisense for Cloud Data Teams window.addEventListener("message", receiveMessage, false)