Interface patterns give you an opportunity to explore different interface designs. To learn how to directly use patterns within your interfaces, see 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 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:
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
=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),
rowHeader: 1
),
a!linkField(
labelPosition: "COLLAPSED",
align: "CENTER",
links: a!dynamicLink(
label: "Show as " & if(local!displayAsChart, "Grid", "Chart"),
value: not(local!displayAsChart),
saveInto: local!displayAsChart
)
)
}
)
)
