Implement a Custom Item Interactivity
- 2 minutes to read
You can implement such interactivity as a master filter and drill-down for custom dashboard items. The following image shows a custom Funnel D3 item that is used as a master filter for a Grid item:
To allow users to use interactivity options, enable the corresponding option in the custom item’s metadata. For this, specify the ICustomItemMetaData.interactivity property when you define the item’s metadata:
interactivity: {
filter: true,
drillDown: true
},
The corresponding options appear in the custom dashboard item’s Interactivity menu.
For the next step, you should understand how to specify which data to select and display. If you does not familiar with these concepts, read the following topic first: Obtain Underlying and Displayed Data in Dashboard Control for JavaScript Applications.
Override the Custom Item Viewer’s methods and define the custom item’s behavior when a user selects its data row. To do this, use the following API:
- Master Filtering
To support Master-Filtering, use the following methods:
Use the CustomItemViewer.canMasterFilter property to indicate whether users can filter data by clicking on the custom item’s UI object.
Refer to the following tutorial for more information on how to configure master filter and drill-down for the custom Funnel item: Create a Data-Aware Item Based on an External Visualization Widget for the Web Dashboard.
- Drill-Down
To support Drill-Down, use the CustomItemViewer.drillDown method.
Use the CustomItemViewer.canDrillDown property to indicate whether users can drill down by clicking on the custom item’s UI object.
See the Funnel D3 custom item in the Custom Item Gallery for an example of the custom interactivity implementation: