Delete Rows in a Grid

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

Delete one or more rows of data in a read-only grid.

This design pattern is not recommended for offline interfaces because reflecting immediate changes in an interface based on user interaction requires a connection to the server.

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 that recipes has been built first in order to see data in this recipe.

This scenario demonstrates:

  • How to remove rows from a grid.

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
a!localVariables(
  /* This variable stores the grid's selection. */
  local!selection,
  /* This variable stores the row information for the grid's selection. */
  local!selectedRows,
  local!removedIds,
  local!employeeData: 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: "department"),
          a!queryColumn(field: "title"),
        }
      ),
      pagingInfo: a!pagingInfo(startIndex: 1, batchSize: 100000)
    ),
    fetchTotalCount: true
  ).data,
  {
    a!buttonArrayLayout(
      buttons: {
        a!buttonWidget(
          label: "REMOVE",
          saveinto: {
            /* On click, remove rows from local!employeeData where
               the IDs match those in local!selectedRows. */
            a!save(
              local!employeeData,
              remove(
                local!employeeData,
                wherecontains(local!selectedRows.id, tointeger(local!employeeData.id))
              )
            ),
            /* Save the removed IDs so they can be passed to an input. */
            a!save(local!removedIds, append(local!removedIds, local!selectedRows.id)),
            /* Reset local!selectedRows so other rows can be removed. */
            a!save(local!selectedRows, null),
            /* Reset the grid selection. */
            a!save(local!selection, null)
          },
          style: "NORMAL",
          /* Disable the button if local!selectedRows is empty. */
          disabled: if(or(isnull(local!selectedRows),length(local!selectedRows)<1),true,false)
        )
      },
      align: "START"
    ),
    a!gridField(
      label: "Grid with Removable Rows",
      data: local!employeeData,
      columns: {
        a!gridColumn(
          label: "ID",
          sortField: "id",
          value: fv!row.id,
          width: "ICON",
          align: "END"
        ),
        a!gridColumn(
          label: "First Name",
          sortField: "firstName",
          value: fv!row.firstName
        ),
        a!gridColumn(
          label: "lastName",
          sortField: "lastName",
          value: fv!row.lastName
        ),
        a!gridColumn(
          label: "Department",
          sortField: "department",
          value: fv!row.department
        ),
        a!gridColumn(
          label: "Title",
          sortField: "title",
          value: fv!row.title
        )
      },
      selectable: true,
      selectionStyle: "ROW_HIGHLIGHT",
      selectionValue: local!selection,
      selectionSaveInto:  {
        local!selection,
        /* Add row data to local!selectedRows list when that row is selected by the user. */
        a!save(local!selectedRows, append(local!selectedRows,fv!selectedRows)),
        /* Remove row data from local!selectedRows when that row is deselected by the user. */
        a!save(local!selectedRows, difference(local!selectedRows,fv!deselectedRows))
      }
    ),
    a!boxLayout(
      label: "Test Data",
      contents: {
        a!textField(
          label: "local!removedIds",
          labelPosition: "ABOVE",
          value: local!removedIds,
          refreshAfter: "UNFOCUS",
          readonly: true
        ),
        a!textField(
          /* Display the current value of local!selectedRows. */
          label: "local!selectedRows",
          labelPosition: "ABOVE",
          instructions: "data type: "&typeof(local!selectedRows)&", "&typename(typeof(local!selectedRows)),
          value: local!selectedRows,
          refreshAfter: "UNFOCUS",
          readonly: true
        ),
        /* Display the current value of local!employeeData. */
        a!textField(
          label: "local!employeeData",
          labelPosition: "ABOVE",
          instructions: "data type: "&typeof(local!employeeData)&", "&typename(typeof(local!employeeData)),
          value: local!employeeData,
          saveInto: {},
          refreshAfter: "UNFOCUS",
          readonly: true
        )
      },
      style: "STANDARD",
      iscollapsible: true,
      marginBelow: "STANDARD"
    )
  }
)

Test it out

Select a checkbox or two, click REMOVE, and note that the rows are removed from the grid.

FEEDBACK