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

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 recipe uses example data and objects created through the Use the Write to Data Store Entity Smart Service Function on an Interface recipe. Make sure you've completed that recipe in your environment first.

Limit the number of rows that can be selected to one. This is a simplified version of the Master Detail pattern that you can drag-and-drop from the component pallete.

This scenario demonstrates:

  • How to configure grid selection in a Read-Only Grid.
  • How to limit selection to a single 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
68
69
70
71
72
73
74
75
76
77
78
a!localVariables(
  /* This variable stores the grid's selection. */
  local!selection,
  /* This variable stores the row information for the grid's selection. */
  local!selectedRows,
  {
    a!gridField(
      label: "Single Selection",
      labelPosition: "ABOVE",
      data: a!queryEntity(
        entity: cons!EMPLOYEE_ENTITY,
        query: a!query(
          selection: a!querySelection(
            columns: {
              a!queryColumn(field: "id"),
              a!queryColumn(field: "firstName"),
              a!queryColumn(field: "lastName"),
              a!queryColumn(field: "phoneNumber")
            }
          ),
          pagingInfo: fv!pagingInfo
        ),
        fetchTotalCount: true
      ),
      pageSize: 5,
      columns: {
        a!gridColumn(
          label: "ID",
          sortField: "id",
          value: fv!row.id,
          width: "ICON"
        ),
        a!gridColumn(
          label: "First Name",
          sortField: "firstName",
          value: fv!row.firstName
        ),
        a!gridColumn(
          label: "Last Name",
          sortField: "lastName",
          value: fv!row.lastName
        )
      },
      selectable: true,
      selectionstyle: "ROW_HIGHLIGHT",
      selectionvalue: local!selection,
      /* 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. */
      selectionSaveInto: {
        /* Using the index function to return the last-selected item ensures that
           only one item will be selected at a time, regardless of how fast the user
           clicks. */
        a!save(local!selectedRows, index(fv!selectedRows, length(fv!selectedRows), null)),
        /* We use the same method as above to limit the selection variable. */
        a!save(local!selection, index(save!value, length(save!value), null))
      },
    ),
    /* 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. Because the paging size is
       so small, we display the selected information below the grid. If it was any larger
       you would want to display it alongside the grid so users don't miss it. */
    a!textField(
      label: "Employee #" & local!selectedRows.id,
      value:
        local!selectedRows.firstName & " " & local!selectedRows.lastName
        & char(10) & local!selectedRows.phoneNumber,
      readOnly: true
    ),
    /* This is a simple test field to show the value of the current selection. */
    a!textField(
      label: "local!selectedRows",
      value: local!selectedRows,
      readOnly: true
    )
  }
)

Test it out

  1. Select multiple rows and note that only the last selection persists.
Open in Github Built: Fri, Jun 03, 2022 (01:08:29 PM)
FEEDBACK