Tip: Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.
Displays a column chart with aggregate data from a record type and conditionally shows a grid with filtered records when a user selects a column on 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:
You can click on the chart to drill down and view more details in a grid. This pattern is related to the grid with detail pattern.
When a column in the chart is selected, a grid displays with the results for the selected column:
The main components in this pattern is a chart and read-only grid that are alternately visible. In the pattern below, the chart and grid use a record type as the data source.
This recipe uses references to record types and record fields. To use this recipe, you will need to update the references to record types and record fields in your application.
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
a!localVariables(
local!selection,
a!sectionLayout(
contents: {
a!columnChartField(
label: "All Cases",
data: a!recordData(
recordType: recordType!Case,
filters: a!queryLogicalExpression(
operator: "AND",
filters: {
a!queryFilter(
field: recordType!Case.fields.type,
operator: "not in",
value: {"Other"}
)
},
ignoreFiltersWithEmptyValues: true
)
),
config: a!columnChartConfig(
primaryGrouping: a!grouping(
field: recordType!Case.fields.status,
alias: "status"
),
secondaryGrouping: a!grouping(
field: recordType!Case.fields.type,
alias: "type"
),
measures: {
a!measure(
function: "COUNT",
field: recordType!Case.fields.id,
alias: "id_count"
)
},
dataLimit: 100,
link: a!dynamicLink(
value: fv!selection,
saveInto: local!selection
)
),
stacking: "NONE",
colorScheme: "PARACHUTE",
showWhen: isnull(local!selection)
),
a!linkField(
labelPosition: "COLLAPSED",
links: a!dynamicLink(
label: "Back",
saveInto: a!save(
target: local!selection,
value: null
)
),
showWhen: not(isnull(local!selection))
),
a!gridField(
label: local!selection.status & " " &local!selection.type & " Cases",
labelPosition: "ABOVE",
data: a!recordData(
recordType:recordType!Case,
filters: a!queryLogicalExpression(
operator: "AND",
filters: {
a!queryFilter(
field: recordType!Case.fields.type,
operator: "=",
value: local!selection.type
),
a!queryFilter(
field: recordType!Case.fields.status,
operator: "=",
value: local!selection.status
)
},
ignorefilterswithemptyvalues: true
)
),
columns: {
a!gridColumn(
label: "Id",
sortField: recordType!Case.fields.id,
value: fv!row[recordType!Case.fields.id],
align: "END"
),
a!gridColumn(
label: "Assignee",
sortField: recordType!Case.fields.assignee,
value: a!linkField(
links: {
a!recordLink(
label: fv!row[recordType!Case.fields.assignee],
recordType: recordType!Case,
identifier: fv!identifier
)
}
)
),
a!gridColumn(
label: "Title",
sortField: recordType!Case.fields.title,
value: fv!row[recordType!Case.fields.title]
),
a!gridColumn(
label: "Priority",
sortField: recordType!Case.fields.priority,
value: fv!row[recordType!Case.fields.priority]
),
a!gridColumn(
label: "Status",
sortField: recordType!Case.fields.status,
value: fv!row[recordType!Case.fields.status]
),
a!gridColumn(
label: "Type",
sortField: recordType!Case.fields.type,
value: fv!row[recordType!Case.fields.type]
),
a!gridColumn(
label: "Date Created",
sortField: recordType!Case.fields.dateCreated,
value: fv!row[recordType!Case.fields.dateCreated],
align: "END"
),
},
showWhen: not(isnull(local!selection))
)
}
)
)
Configure a Chart Drilldown to a Grid
