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

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

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.

image:SAIL_Recipe_Limit_Grid_Selection.png

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

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: "SAIL 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!buttonWidgetSubmit(
          label: "Submit"
        )
      )
    )
  )
)

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.
17.2
FEEDBACK