cancel
Showing results for 
Search instead for 
Did you mean: 
intapiuser
Community Team Member
Community Team Member
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
  1. create a function that can generate a url for the iframe src,
  2. create an event listener,
  3. 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)
Rate this article:
Version history
Last update:
‎02-09-2024 12:17 PM
Updated by: