Limit Grid Selection to One Row

Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.

Goal

Limit the number of rows that can be selected to one.

This expression uses direct references to the Employee record type, created in the Records Tutorial. If you've completed that tutorial in your environment, you can change the existing record-type references in this pattern to point to your Employee record type instead.

This is a simplified version of the Limit Grid Selection pattern.

limit-the-number-of-rows-to-one.png

Expression

When the user clicks to select rows in the grid, the grid saves only the last selection. It uses the index() function to return a single item from the array of selected rows, and uses the length() function to determine the index of the last item in the array.

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
a!localVariables(
  local!selection,
  local!selectedRows,
  {
    /* Grids with selection should always have a secondary display of that selection
       when there is paging so users are always able to see their selections even when
       that selection is not on the current, visible page. */
    a!gridField(
      label: "Single Selection",
      labelPosition: "ABOVE",
      data: recordType!Employee,
      columns: {
        a!gridColumn(
          label: "ID",
          sortField: recordType!Employee.fields.id,
          value: fv!row[recordType!Employee.fields.id],
          align: "END",
          width: "ICON"
        ),
        a!gridColumn(
          label: "Name",
          sortField: recordType!Employee.fields.lastName,
          value: fv!row[recordType!Employee.fields.firstName] & " " & fv!row[recordType!Employee.fields.lastName]
        ),
        a!gridColumn(
          label: "Title",
          sortField: recordType!Employee.fields.title,
          value: fv!row[recordType!Employee.fields.title]
        )
      },
      pageSize: 5,
      selectable: true,
      selectionstyle: "ROW_HIGHLIGHT",
      selectionvalue: local!selection,
      selectionSaveInto: {
        /* Here we save fv!selectedRows to local!selectedRows. To ensure that only a
           single row is selected when the user clicks too quickly, we use the index()
           function to return only the last selected value. */
        a!save(local!selectedRows, index(fv!selectedRows, length(fv!selectedRows), null)),
        a!save(local!selection, index(save!value, length(save!value), null))
      },
      validations: {},
      showSearchBox: false,
      showRefreshButton: false,
      recordActions: {}
    )
  }
)

Test it out

  1. Select multiple rows and note that only the last selection persists.
Open in Github
FEEDBACK