Select Rows in a Grid

See SAIL Recipes for information about how to work through recipes and adapt them to your application.

Goal

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

image:SAIL_Recipe_Grid_Selection.png

Expression

=load(
  local!selectedEmployeeIds,
  local!employeeData: {
    {id: "john.smith",      first: "John",      last: "Smith",   email: "john.smith@example.com"},
    {id: "michael.johnson", first: "Michael",   last: "Johnson", email: "michael.johnson@example.com"},
    {id: "elizabeth.ward",  first: "Elizabeth", last: "Ward",    email: "elizabeth.ward@example.com"}
  },
  /* Set the default paging and sorting config `*/
  local!gridSelection: a!gridSelection(
    pagingInfo: a!pagingInfo(
      startIndex: 1,
      batchSize: 25,
      sort: a!sortInfo(
        field: "last",
        ascending: true
      )
    )
  ),
  with(
    /*` Replace the value of local!datasubset with `a!queryEntity()`, or */
    /* `queryrecord()`, or use your own CDT array in todatasubset()      */
    local!datasubset: todatasubset(local!employeeData, local!gridSelection.pagingInfo),
    a!formLayout(
      label: "SAIL Example: Grid Selection",
      firstColumnContents:{
        a!gridField(
          label: "Employees",
          totalCount: local!datasubset.totalCount,
          columns: {
            a!gridTextColumn(label: "First", field: "first", data: index(local!datasubset.data, "first" , {})),
            a!gridTextColumn(label: "Last",  field: "last",  data: index(local!datasubset.data, "last" , {})),
            a!gridTextColumn(label: "Email", field: "email", data: index(local!datasubset.data, "email" , {}))
          },
          identifiers: index(local!datasubset.data, "id" , {}),
          value: local!gridSelection,
          saveInto: {
            local!gridSelection,
            a!save(local!selectedEmployeeIds, index(save!value, "selected", null))
          },
          selection: true
        ),
        a!textField(
          label: "GridSelection",
          value: local!gridSelection,
          readOnly: true
        ),
        a!textField(
          label: "Grid Selection Selected Ids",
          instructions: "From local!gridSelection.selected",
          value: local!gridSelection.selected,
          readOnly: true
        ),
        a!textField(
          label: "Your Variable Selected Ids",
          instructions: "From local!selectedEmployeeIds",
          value: local!selectedEmployeeIds,
          readOnly: true
        )
      },
      buttons: a!buttonLayout(
        primaryButtons: a!buttonWidgetSubmit(
          label: "Submit"
        )
      )
    )
  )
)

Test it out

  1. Select a checkbox or two and observe the values of the text fields.
    • The GridSelection text field displays the value of the entire GridSelection object returned by the grid's saveInto parameter.
    • The Selected Ids text field displays just the value of the GridSelection's selected attribute.
    • The Your Variable Selected Ids text field displays the value of the local variable that only has the selected ids, which is the value that you would ultimately use.
    • When testing offline, the values of the text fields do not change, but the appropriate grid rows are selected.

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.

To write your data to process

  1. Save your interface as sailRecipe
  2. Create interface input: selectedEmployeeIds (Text)
  3. Delete local variable: local!selectedEmployeeIds
  4. In your expression, replace:
    • local!selectedEmployeeIds with ri!selectedEmployeeIds
  5. In your process model, on the process start form or forms tab of an activity, enter the name of your interface in the search box and select it
  6. Click Yes when the process modeler asks, "Do you want to import the interface inputs?"
    • On a task form, this will create create node inputs
    • On a start form, this will create parameterized process variables
FEEDBACK