Display Array of Data in a Grid

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.

Goal

Display an array of CDT data in a read-only paging grid.

This scenario demonstrates:

  • How to display an array of data in a read-only paging grid.
  • How to configure paging and sorting in a read-only grid.

Expression

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
    )
  )
)

Test it out

  1. Go to the second page of the grid. Notice that grid data changes to show the next batch of data.
  2. Sort the grid by clicking on one of the column headers. Notice that the grid goes back to the first page and displays the data in the correct order.

Offline

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
    )
  )
)

Notable implementation details

  • Notice that 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

Open in Github
FEEDBACK