Returning control through the DOM

When the dashboard is embedded inside another application, control can be passed back to the hosting application by creating a 'Drillout' component & setting its type to be 'Navigate DOM' as in the screenshot below

dash65-2

The dashboard.html page contains a hidden html element with the iD 'drilloutdata', when the drillout component is clicked the inner html content of this element is set to XML in the following format:-

< DrilloutData>
    <ColumnName>Age_Band</ColumnName>
    <DataType>System.String</DataType>
    <ColumnID>1076</ColumnID>
    <ComponentID>1371</ComponentID>
    <Values>19-24,25-29,30-39,40-49,50-59,60-69,70+</Values>
< /DrilloutData>

The above elements are:-

  • ColumnName: This is the name of the column in the dataset that was clicked to cause the drillout to be called
  • DataType: The type of the dataset column
  • ColumnID: The dashboards internal ID for the column that was clicked
  • ComponentID: The dashboards internal ID of the component that was clicked. This can be used if you have multiple components in a dashboard that are JavaScript drillouts
  • Values: This can either be a single value or a list of multiple values (comma separated) that were clicked to cause the drillout to be called.

Once the content of the hidden element has been set the dashboard attempts to navigate back to it's homepage. This Navigating event should be caught & cancelled by the calling application & the contents of the html element read.