Delete Rows in a Grid

Interface recipes give you an opportunity to explore different interface design patterns. To learn how to directly use interface recipes within your interfaces, see Adapt an interface recipe to Work with My Applications.

Goal

Delete one or more rows of data in a read-only paging 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 scenario demonstrates:

  • How to to use a!gridSelection for a selectable grid
  • How to use update a grid by removing a row from that 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
load(
  local!removeFailure: false,
  local!removedIDs: {},
  local!employeeData: {
    { id: 1, firstName: "John" , lastName: "Smith" , department: "Engineering" , title: "Director" , phoneNumber: "555-123-4567" , startDate: today()-360 },
    { id: 2, firstName: "Michael" , lastName: "Johnson" , department: "Finance" , title: "Analyst" , phoneNumber: "555-987-6543" , startDate: today()-360 },
    { id: 3, firstName: "Mary", lastName: "Reed" , department: "Engineering" , title: "Software Engineer" , phoneNumber: "555-456-0123" , startDate: today()-240 },
    { id: 4, firstName: "Angela" , lastName: "Cooper" , department: "Sales" , title: "Manager" , phoneNumber: "555-123-4567" , startDate: today()-240 },
    { id: 5, firstName: "Elizabeth" , lastName: "Ward" , department: "Sales" , title: "Sales Associate" , phoneNumber: "555-987-6543" , startDate: today()-240 },
    { id: 6, firstName: "Daniel", lastName: "Lewis" , department: "HR" , title: "Manager" , phoneNumber: "555-876-5432" , startDate: today()-180 },
    { id: 7, firstName: "Paul" , lastName: "Martin" , department: "Finance" , title: "Analyst" , phoneNumber: "555-609-3691" , startDate: today()-150 },
    { id: 8, firstName: "Jessica" , lastName: "Peterson" , department: "Finance" , title: "Analyst" , phoneNumber: "555-987-6543" , startDate: today()-150 },
    { id: 9, firstName: "Mark" , lastName: "Hall" , department: "Professional Services" , title: "Director" , phoneNumber: "555-012-3456" , startDate: today()-150 },

  },
  /* Set the default paging and sorting config `*/
  local!gridSelection: a!gridSelection(
    pagingInfo: a!pagingInfo(
      startIndex: 1,
      batchSize: 3,
      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: todatasubset(local!employeeData, local!gridSelection.pagingInfo),
    a!formLayout(
      label: "Example: Delete from Grid",
      contents:{
        a!buttonLayout(
          secondaryButtons: {
            a!buttonWidget(
              label: "Remove",
              value: true,
              saveInto: {
                if(
                  or(
                    isnull(local!gridSelection.selected),
                    length(local!gridSelection.selected)<1
                  ),
                  local!removeFailure,
                  {}
                ),
                a!save(local!employeeData, remove(local!employeeData, wherecontains(local!gridSelection.selected, local!employeeData.id))),
                if(local!removeFailure,
                  {},
                  a!save(local!removedIDs, append(local!removedIDs, local!gridSelection.selected))
                ),
                /*`  This sets the start index back by one page when  *
                 *  all of the results on the final page are deleted.  */
                a!save(
                  local!gridSelection.pagingInfo.startIndex,
                  if(
                    local!gridSelection.pagingInfo.startIndex <= length(local!employeeData),
                    /* If at least as many items as the previous start index exist, use it `*/
                    local!gridSelection.pagingInfo.startIndex,
                    /* Otherwise, create a new start index to avoid an error */
                    if(
                      length(local!employeeData)<=local!gridSelection.pagingInfo.batchSize,
                      /* If the last item in the grid was deleted or there are only enough items for one page, use 1 */
                      1,
                      /*` If there are multiple pages' worth remaining, adjust the start index so that the last page */
                      /* of items is shown                                                                           */
                      (length(local!employeeData)+1)-local!gridSelection.pagingInfo.batchSize
                    )
                  )
                ),
                a!save(local!gridSelection.selected, null)
              }
            )
          }
        ),
        a!gridField(
          instructions: if(local!removeFailure, "Select one or more items to remove.", ""),
          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: "Department", field: "department", data: index(local!datasubset.data, "department" , {})),
            a!gridTextColumn(label: "title", field: "title", data: index(local!datasubset.data, "title" , {}))
          },
          identifiers: index(local!datasubset.data, "id" , {}),
          value: local!gridSelection,
          saveInto: {
            local!gridSelection,
            a!save(
              local!removeFailure,
              if(
                or(isnull(local!gridSelection.selected), length(local!gridSelection.selected) < 1),
                local!removeFailure,
                false
              )
            )
          },
          selection: true
        ),
        a!textField(
           label: "Employee Data",
           value: local!employeeData,
           readOnly: true
        ),
        a!textField(
          label: "Removed IDs",
          readOnly: true,
          value: local!removedIDs
        )
      },
      buttons: a!buttonLayout(
        primaryButtons: a!buttonWidget(
          label: "Submit",
          submit: true
        )
      )
    )
  )
)

Test it out

  1. Click Remove and note that instructions appear above the grid because you have not selected any rows
  2. Select a checkbox or two, click Remove, and note that the rows are removed from the grid
    • The Employee Data text field displays the value of the entire test data object
    • The Removed IDs text field tracks the IDs of rows deleted from the grid. This allows the user to verify that the data has been modified by the delete action.

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.
  • When deleting rows in a paging grid, we need to tell the grid what to display when all the results on a page are deleted. Updating the startIndex of the local!gridSelection.pagingInfo makes sure that the grid does not break when all the entries on the last page are deleted, resetting the view to the new last page of results. Since we're now manually setting our start index when the last page is deleted, we now have to catch when the last result overall is deleted, to correctly set the index to 1.
  • In this example, we stored the ids of the removed items. This is useful when you want to remove items from an external source, such as a database or another process. If the data on the form is the authoritative version, then you may wish to return the remaining items, rather than what was removed. For that, follow the process below for local!employeeData instead of local!removedIDs.
  • The wherecontains() function operates on parameters of the same type, so once you switch to your own data, you may have to wrap cast() around local!gridSelection.selected to make it match the type of your identifiers. For example: wherecontains(tointeger(local!gridSelection.selected), local!employeeData.id) would work successfully if local!employeeData is a CDT array where the id field is of type Number (Integer).
FEEDBACK