Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.
Display a column chart with a toggle to display an alternate grid view of the data.
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.
Display a chart with the number of tickets reported each month internally and from customers. Then add a grid to display the same data. Finally, add a link so that a user may toggle between the chart and grid views of the data. This pattern is recommended to provide a visual data display while still making the data accessible to users who employ assistive technology.
This is the data displayed as a chart:
This is the data displayed as a grid:
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(
local!ticketData:{
a!map( month:"January", internalTickets:32, customerTickets:41 ),
a!map( month:"February", internalTickets:16, customerTickets:38 ),
a!map( month:"March", internalTickets:21, customerTickets:37 ),
a!map( month:"April", internalTickets:31, customerTickets:20 ),
a!map( month:"May", internalTickets:33, customerTickets:47 ),
a!map( month:"June", internalTickets:9, customerTickets:22 ),
a!map( month:"July", internalTickets:2, customerTickets:16 ),
a!map( month:"August", internalTickets:11, customerTickets:29 ),
a!map( month:"September", internalTickets:5, customerTickets:0 ),
a!map( month:"October", internalTickets:71, customerTickets:10 ),
a!map( month:"November", internalTickets:4, customerTickets:13 ),
a!map( month:"December", internalTickets:5, customerTickets:21 )
},
/* This variable is referenced in the showWhen parameters of both the grid and
the chart. */
local!showAsGrid: false,
{
a!linkField(
links:{
/* The not() function simply inverts a true or false value, making for a
simple toggle. */
a!dynamicLink(
label: "View data as a " & if(local!showAsGrid, "chart", "grid"),
value: not(local!showAsGrid),
saveInto: local!showAsGrid
)
}
),
if(local!showAsGrid,
a!gridField(
label: "Logged Defect Tickets",
data: local!ticketData,
columns: {
a!gridColumn(
label: "Month",
value: fv!row.month
),
a!gridColumn(
label: "Internal Tickets",
value: fv!row.internalTickets,
align: "END",
width: "NARROW_PLUS"
),
a!gridColumn(
label: "Customer Tickets",
value: fv!row.customerTickets,
align: "END",
width: "NARROW_PLUS"
),
a!gridColumn(
label: "Total Tickets",
value: fv!row.internalTickets + fv!row.customerTickets,
align:"END",
width: "NARROW_PLUS"
)
},
pageSize: 12
),
a!columnChartField(
label: "Logged Defect Tickets",
categories: left(local!ticketData.month, 3),
series: {
a!chartSeries(label: "Internal", data: local!ticketData.internalTickets),
a!chartSeries(label: "Customer", data: local!ticketData.customerTickets)
},
colorScheme: "PARACHUTE",
yAxisTitle: "Number of Tickets",
stacking: "NORMAL",
showLegend: true
)
)
}
)
