Display a chart with aggregate data from a data store entity, specifically the total number of employees for each department. Then add links to the chart slices so that when a user clicks on a department, the chart is replaced by a grid that displays all employees for that department with a link to return to the chart.
This design pattern is not recommended for offline interfaces because reflecting immediate changes in an interface based on user interaction requires a connection to the server.
This scenario demonstrates:
How to add links to each slice of the pie chart
How to display a grid when the user clicks on a slice of the pie chart
Test it out
Click a slice of the chart. The chart will be replaced with a grid that displays all employees for that department.
Click the "Back to Chart" link. The grid will be replaced with the original chart.
Notable implementation details
The grid uses a separate paging info from the chart so that it can be sorted and paged independently from the chart.
Notice that when the user goes back to the chart to select a new filter, we’re always resetting the value of local!gridPagingInfo, ensuring that the user will see the first page for the new filter. This is necessary regardless of what the user has selected, so we ignore the value returned by the component and instead insert our own value.
For this example, the value of the department field is the department name, so it can be used both for display and as the value of the filter. If using a lookup instead, you would need to use the name as a display but save the id instead.