Select Rows in a Grid

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

Goal

Display checkboxes on a read-only paging grid to allow users to select multiple rows of data.

This recipe uses an employee data structure and objects created through the Use the Write to Data Store Entity Smart Service Function on an Interface recipe. Make sure that recipes has been built first in order to see data in this recipe.

This scenario demonstrates:

  • How to use grid selection to capture identifying information about the selected row(s)

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

=load(
  /* Set the default paging and sorting config */
  local!gridSelection: a!gridSelection(
    selected: {},
    pagingInfo: a!pagingInfo(
      startIndex: 1,
      batchSize: 10,
      sort: a!sortInfo(
        field: "lastName",
        ascending: true
      )
    )
  ),
  with(
    local!datasubset: a!queryEntity(
      entity:cons!EMPLOYEE_ENTITY,
      query:a!query(
        selection: a!querySelection(columns: {
          a!queryColumn(field: "firstName"),
          a!queryColumn(field: "lastName"),
          a!queryColumn(field: "title")
        }),
        pagingInfo: local!gridSelection.pagingInfo
      )
    ),
    a!sectionLayout(
      contents: {
        a!gridField(
          label: "Example: Employee Grid Selection",
          totalCount: local!datasubset.totalCount,
          columns: {
            a!gridTextColumn(label: "First", field: "firstName", data: index(local!datasubset.data, "firstName" , {})),
            a!gridTextColumn(label: "Last",  field: "lastName",  data: index(local!datasubset.data, "lastName" , {})),
            a!gridTextColumn(label: "Title", field: "title", data: index(local!datasubset.data, "title" , {}))
          },
          identifiers: local!datasubset.identifiers,
          value: local!gridSelection,
          saveInto: {
            local!gridSelection
          },
          selection: true
        ),
        a!textField(
          label: "Selected Employee IDs",
          readOnly: true,
          value: if(
            length(local!gridSelection.selected) = 0,
            "No employees selected",
            joinarray(
              local!gridSelection.selected,
              ", "
            )
          )
        )
      }
    )
  )
)

Test it out

  1. Select a checkbox and observe the values of the text fields
    • The Selected Employee IDs show the selected row's ID
  2. Select the top checkbox in the column header row
    • The Selected Employee IDs show 10 selected values

Notable implementation details

  • GridSelection must be used when a grid is configured for selection. The value of the grid is gridSelection rather than pagingInfo, and the value that the grid returns when the user interacts with it is also a gridSelection. PagingInfo information is embedded in gridSelection.
  • The values stored in the selected parameter of gridSelection are the identifiers of the datasubset. In this case, it's the primary key value.
Open in Github
FEEDBACK