Aggregate Data from a Data Store Entity and Conditionally Display in a Chart or Grid

Interface recipes give you an opportunity to explore different interface design patterns. To learn how to directly use interface recipes within your interfaces, see Adapt an interface recipe to Work with My Applications.

Goal

Aggregate data from a data store entity, specifically the total number of employees in each department, to display in a pie chart.

This recipe uses an employee data structure and objects created through the Use the Write to Data Store Entity Smart Service Function on an Interface recipe. Make sure that recipes has been built first in order to see data in this recipe.

Give the user the option to view the same data as a grid.

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 use a link to switch between two different interface components.

Expression

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
=load(
  /* 
  * Paginginfo is bringing back all employee data in this case and sorting by
  * department.
  */
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: -1,
    sort: a!sortInfo(
      field: "department",
      ascending: true
    )
  ),
  local!displayAsChart: true,
  with(
    local!datasubset: a!queryEntity(
      entity: cons!EMPLOYEE_ENTITY,
      query: a!query(
        aggregation: a!queryAggregation(aggregationColumns: {
          a!queryAggregationColumn(field: "department", isGrouping: true),
          /*Aliases should be used when creating an aggregated column*/
          a!queryAggregationColumn(field: "id", alias: "count", aggregationFunction: "COUNT"),
        }),
        pagingInfo: local!pagingInfo
      )
    ),
    {
     /*      
     * The showWhen parameter is used here in place of the if() funciton. To 
     * properly use showWhen with the link field toggle, a local variable called
     * local!displayAsChart is set with an initial value of true. This variable
     * is passed in directly in the pie chart, but the inverse value is set on
     * gridField's showWhen. 
     */
     a!pieChartField(
       series: {
         a!forEach(
           items: local!datasubset.data,
           expression: a!chartSeries(label: fv!item.department, data: fv!item.count)
         )
       },
       showWhen: local!displayAsChart
     ),
     a!gridField(
       totalCount: local!datasubset.totalCount,
       columns: {
         a!gridTextColumn(
           label: "Department",
           field: "department",
           data: index(local!datasubset.data, "department", null)
         ),
         a!gridTextColumn(
           label: "Total",
           field: "count",
           data: index(local!datasubset.data, "count", null)
         ),
       },
       value: local!pagingInfo,
       saveInto: local!pagingInfo,
       showWhen: not(local!displayAsChart)
     ),
     a!linkField(
       labelPosition: "COLLAPSED",
       align: "CENTER",
       links: a!dynamicLink(
         label: "Show as " & if(local!displayAsChart, "Grid", "Chart"),
         value: not(local!displayAsChart),
         saveInto: local!displayAsChart
       )
     )
   }
  )
)

Test it out

  1. Click the "Show as grid" link. The chart will be replaced with a grid that displays the same data.
  2. Click the "Show as chart" link. The grid will be replaced with the original chart.

Notable implementation details

  • The grid and the chart use the same paging info because they are displaying the same data. For larger data sets or charts that use multiple series, you may consider using a separate paging info for the grid so that you can display the data in batches.
FEEDBACK