Use Links in a Grid to Show More Details and Edit Data

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

Goal

Allow end users to click a link in a read-only paging grid to view the details for the row, and make changes to the data.

The data available for editing may include more fields than are displayed in the grid.

Note: This design pattern is not recommended for offline interfaces because displaying more data based on user interaction requires a connection to the server.

To achieve this goal, we use a!dynamicLink to store the selected employee data into a variable, and then allow editable text fields to update the individual fields of the employee. Finally, we associate a saveInto with the submit button to update the array of employees that populates the grid with the updated employee.

Expression

=load(
  local!employees: {
    {id: 1, name: "John Smith",      department:"Engineering", title: "Director",          startDate: date(2013, 1, 2)},
    {id: 2, name: "Michael Johnson", department:"Finance",     title: "Analyst",           startDate: date(2012, 6, 5)},
    {id: 3, name: "Elizabeth Ward",  department:"Engineering", title: "Software Engineer", startDate: date(2001, 1, 2)}
  },
  local!pagingInfo: a!pagingInfo(startIndex: 1, batchSize: 25),
  local!employeeToUpdate,
  with(
    local!employeeDataSubset: todatasubset(local!employees, local!pagingInfo),
    a!formLayout(
      label: "SAIL Example: Grid with Link to Show More and Edit Data",
      firstColumnContents: {
        a!sectionLayout(
          label: "Employees",
          firstColumnContents: {
            a!gridField(
              totalCount: local!employeeDataSubset.totalCount,
              columns: {
                a!gridTextColumn(
                  label: "Name",
                  data: index(local!employeeDataSubset.data, "name", {}),
                  /* Creates a dynamic link for every item in local!data */
                  links: apply(a!dynamicLink(value: _, saveInto: local!employeeToUpdate), local!employeeDataSubset.data)
                ),
                a!gridTextColumn(
                  label: "Department",
                  data: index(local!employeeDataSubset.data, "department", null)
                )
              },
              value: local!pagingInfo,
              saveInto: local!pagingInfo
            )
          }
        ),
        if(
          isnull(local!employeeToUpdate),
          {},
          a!sectionLayout(
            label: "Employee Details: " & local!employeeToUpdate.name,
            firstColumnContents: {
              a!textField(
                label: "Name",
                value: local!employeeToUpdate.name,
                saveInto: local!employeeToUpdate.name
              ),
              a!textField(
                label: "Department",
                value: local!employeeToUpdate.department,
                saveInto: local!employeeToUpdate.department
              ),
              a!textField(
                label: "Title",
                value: local!employeeToUpdate.title,
                saveInto: local!employeeToUpdate.title
              ),
              a!dateField(
                label: "Start Date",
                value: local!employeeToUpdate.startDate,
                saveInto: local!employeeToUpdate.startDate
              ),
              a!buttonLayout(
                primaryButtons: a!buttonWidget(
                  label: "Update",
                  value: local!employeeToUpdate.id,
                  saveInto: a!save(
                    local!employees,
                    updatearray(
                      local!employees,
                      wherecontains(save!value, local!employees.id),
                      local!employeeToUpdate
                    )
                  )
                )
              )
            }
          )
        )
      },
      buttons: a!buttonLayout(
        primaryButtons: a!buttonWidgetSubmit(
          label: "Submit"
        )
      )
    )
  )
)

Test it out

  1. Click on an employee's name in the grid's left column.
  2. Change the employee's details and click the "Update" button.
FEEDBACK