Display Array of Data in a Grid

SAIL Recipes give you an opportunity to explore different interface design patterns. To learn how to directly use SAIL recipes within your interfaces, see Adapt a SAIL Recipe to Work with My Applications.

Goal

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

image:SAIL_Recipes_Display_Array_of_Data_in_a_Grid.png

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

=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: "SAIL 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
    )
  )
)

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.

=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: "SAIL 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
    )
  )
)

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

17.2
FEEDBACK