Dashboard Drill-Down
Background
When configuring the dashboard module, it is often necessary to drill down into data to view other dimensions of information corresponding to the data.
Currently, we have an employee table and want to display the gender ratio. When clicking on the corresponding pie chart segment for gender ratio, we want to show the number of employees by level for that gender and the detailed list of employees.
Prerequisites
Before building the dashboard, we need to create an employee table and add employee data. The employee table structure is as follows:
| Field Name | Identifier | Field Type |
|---|---|---|
| Name | name | Single-line Text |
| Gender | sex | List Selection, Enum Values: male, female |
| Level | grade | Rating |
Implementation Steps
We can now implement this function through the following methods:
Step 1: Configure Main Dashboard
Add a pie chart and add a data source, which is the employee table. Group by the gender field and count the number of records.
Step 2: Configure Drill-Down Dashboard
Add a dashboard module as the drill-down dashboard. Add a dashboard filter condition Gender, and you can choose whether to display the filter condition according to your needs.
Add a bar chart and add a data source, which is the employee table. Group by the level field and count the number of records. Add Gender as a filter condition in the data source, and it is recommended to ignore null values so that all data can be queried when the value is empty.
Add a data table card and add a data source, which is the employee table. Add Gender as a filter condition in the data source, and it is recommended to ignore null values so that all data can be queried when the value is empty.
Step 3: Add Click Event to Main Dashboard Chart
Modify the event configuration of the main dashboard's pie chart to create an automation.
In the automation, get the value clicked by the user, and use the automation step Open Sidebar or Dialog Box. If you need full-screen display, set the width to 100vw and height to 100vh.
Set the display type of Open Sidebar or Dialog Box to External Page, and set the Address to the address of the drill-down dashboard. Since it is a local page, you can remove the domain prefix, and add ?nonav=yes&noVisitHistory=yes&noBreadcrumbNav=yes to the address to hide the header sidebar and breadcrumbs. Pass the specific parameters to be passed to the sub-dashboard on the link, and the parameter name should be consistent with the dashboard filter condition of the sub-dashboard.
The specific parameter settings are as follows:
/app/${Context.appId()}/dashboard/c0ce983rbaoq8?gender=${event.value.sex == 'male' ? 'male': 'female'}&nonav=yes&noVisitHistory=yes&noBreadcrumbNav=yes