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.
Display an array of CDT data in a read-only paging 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
=load(
local!data: {
{id: 1, name: "John Smith", department: "Engineering"},
{id: 2, name: "Michael Johnson", department: "Finance"},
{id: 3, name: "Mary Reed", department: "Engineering"},
{id: 4, name: "Angela Cooper", department: "Sales"},
{id: 5, name: "Elizabeth Ward", department: "Sales"},
{id: 6, name: "Daniel Lewis", department: "Human Resources"}
},
/* batchSize is 3 to show more than 1 page of data in this recipe. Increase it as needed. `*/
local!pagingInfo: a!pagingInfo(startIndex: 1, batchSize: 3, sort: a!sortInfo(field: "name", ascending: true)),
with(
local!datasubset: todatasubset(local!data, local!pagingInfo),
a!gridField(
label: "Example: Display Data in a Read-Only Paging Grid",
totalCount: local!datasubset.totalCount,
columns: {
a!gridTextColumn(
label: "ID",
field: "id",
data: index(local!datasubset.data, "id", {}),
alignment: "RIGHT"
),
a!gridTextColumn(
label: "Name",
field: "name",
data: index(local!datasubset.data, "name", {})
),
a!gridTextColumn(
label: "Department",
field: "department",
data: index(local!datasubset.data, "department", {})
)
},
value: local!pagingInfo,
saveInto: local!pagingInfo,
rowHeader: 2
)
)
)
This expression shows how to modify the above expression for offline use. The only difference is that all rows are displayed initially since grid paging is not available when offline.
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
=load(
local!data: {
{id: 1, name: "John Smith", department: "Engineering"},
{id: 2, name: "Michael Johnson", department: "Finance"},
{id: 3, name: "Mary Reed", department: "Engineering"},
{id: 4, name: "Angela Cooper", department: "Sales"},
{id: 5, name: "Elizabeth Ward", department: "Sales"},
{id: 6, name: "Daniel Lewis", department: "Human Resources"}
},
local!pagingInfo: a!pagingInfo(startIndex: 1, batchSize: -1, sort: a!sortInfo(field: "name", ascending: true)),
with(
local!datasubset: todatasubset(local!data, local!pagingInfo),
a!gridField(
label: "Example: Display Data in a Read-Only Paging Grid",
totalCount: local!datasubset.totalCount,
columns: {
a!gridTextColumn(
label: "ID",
field: "id",
data: index(local!datasubset.data, "id", {}),
alignment: "RIGHT"
),
a!gridTextColumn(
label: "Name",
field: "name",
data: index(local!datasubset.data, "name", {})
),
a!gridTextColumn(
label: "Department",
field: "department",
data: index(local!datasubset.data, "department", {})
)
},
value: local!pagingInfo,
saveInto: local!pagingInfo,
rowHeader: 2
)
)
)
local!pagingInfo
is a load()
variable and local!datasubset
is a with()
variable. This allows us to save a new value into local!pagingInfo
when the user interacts with the grid and then use that value to recalculate local!datasubset
See also: load(), with(), Paging and Sorting Configurations