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

Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.

Goal

Aggregate data from a data store entity, specifically the total number of employees in each department, to display in a pie 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 recipe uses example data and objects created through the Use the Write to Data Store Entity Smart Service Function on an Interface recipe. Make sure you've completed that recipe in your environment first.

image of a pie chart with 5 slices

screenshot of a read only grid with 5 rows displaying departments

This scenario demonstrates:

  • How to use a link to switch between two different interface components.
  • How to aggregate on two dimensions.

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
a!localVariables(
  /* This variable is set to true initially and is referenced in the showWhen parameters for
     the pie chart and inversely in the grid. The dynamic link at the end reveses this value
     on click. */
  local!displayAsChart: true,
  /* Since we want to pass the data to the pie chart and the grid, we query for the data in
     a local variable. Otherwise, we would just query directly from the data parameter of
     the gridField(). */
  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: "id_count", aggregationFunction: "COUNT"),
        }
      ),
      pagingInfo: a!pagingInfo(
        startIndex: 1,
        batchSize: -1,
        sort: a!sortInfo(
          field: "department",
          ascending: true
        )
      )
    )
  ),
  {
    a!pieChartField(
      series: {
        a!forEach(
          items: local!datasubset.data,
          expression: a!chartSeries(label: fv!item.department, data: fv!item.id_count)
        )
      }, 
      colorScheme: "BERRY",
      /* Since the initial value is true, the pie chart displays on load. We could change
         the initial value of local!displayAsChart to swap that behavior without having to
         otherwise change the logic of this interface. */
      showWhen: local!displayAsChart
    ),
    a!gridField(
      data: local!datasubset.data,
      columns: {
        a!gridColumn(
          label: "Department",
          sortField: "department",
          value: fv!row.department
        ),
        a!gridColumn(
          label: "Total",
          sortField: "id_count",
          value: fv!row.id_count
        )
      },
      /* Here the grid only shows when local!displayAsChart is not true. */
      showWhen: not(local!displayAsChart),
      rowHeader: 1
    ),
    a!linkField(
      labelPosition: "COLLAPSED",
      links: a!dynamicLink(
        label: "Show as " & if(local!displayAsChart, "Grid", "Chart"),
        /* The not() function simply converts a true to false, or false to true, which
           simplifies the toggle behavior. */
        value: not(local!displayAsChart),
        saveInto: local!displayAsChart
      ),
      align: "CENTER"
    )
  }
)

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.
Open in Github Built: Fri, Jun 03, 2022 (01:08:29 PM)
FEEDBACK