Limit the Number of Rows in a Grid That Can Be Selected

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

If you want to limit how many rows users can select in a read-only paging grid, you can constrain the number of selections by using validation. In this example, we limit the number of rows that the user can select to one.

This scenario demonstrates:

  • How to configure grid selection in a paging grid
  • How to add a validation to ta paging grid, preventing a user from selecting more than one row

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
59
60
61
62
63
64
65
66
67

load(
  local!selectedEmployeeId,
  local!gridSelection: a!gridSelection(
    pagingInfo: a!pagingInfo(
      startIndex: 1,
      batchSize: 10,
      sort: a!sortInfo(
        field: "id",
        ascending: true
      )
    )
  ),
  with(
    /* Replace the value of local!datasubset with `a!queryEntity()`, or */
    /* `queryrecord()`, or use your own CDT array in todatasubset()    `*/
    local!datasubset: a!queryEntity(
      entity:cons!EMPLOYEE_ENTITY,
      query:a!query(
        selection: a!querySelection(columns: {
          /* Alias can be used to remane field*/
          a!queryColumn(field: "firstName" ),
          a!queryColumn(field: "lastName"),
          a!queryColumn(field: "department"),
          a!queryColumn(field: "title"),
          a!queryColumn(field: "phoneNumber"),
          a!queryColumn(field: "startDate")
        }),
        pagingInfo: local!gridSelection.pagingInfo
      )
    ),
    a!formLayout(
      label: "Example: Limit Grid Selection to One Row",
      contents:{
        a!gridField(
          label: "Employees",
          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: "Email", field: "title", data: index(local!datasubset.data, "title", {}))
          },
          identifiers: local!datasubset.identifiers,
          validations: if(count(local!gridSelection.selected)>1, "You may only select one employee", null),
          value: local!gridSelection,
          saveInto: {
            local!gridSelection,
            if(
              count(local!gridSelection.selected)>1,
              /* Does not update the value if the user is attempting to select more than one id */
              {},
              /*` Stores the selected id only */
              a!save(local!selectedEmployeeId, index(save!value, "selected", null))
            )
          },
          selection: true
        )
      },
      buttons: a!buttonLayout(
        primaryButtons: a!buttonWidget(
          label: "Submit",
          submit: true
        )
      )
    )
  )
)

Test it out

  1. Select one of the rows in the grid and note that there is no validation message.
  2. Select a second row and note that a validation message appears.
    • When testing offline, the validation message does not appear until you go back online.

Notable implementation details

  • 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. The PagingInfo information is embedded in GridSelection. GridSelection must be used when a grid is configured for selection.
Open in Github
FEEDBACK