Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.
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.
This scenario demonstrates:
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
74
75
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",
style: "DONUT",
seriesLabelStyle: "LEGEND",
/* 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"
)
}
)
