Embedded Drilldown Example

[intapiuser]

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)

// 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)