Use Links in a Grid to Show More Details About an Object

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

Goal

Display more of an object's data than can fit in a single row in a read-only paging grid.

Rather than placing all the data in the grid, have the user select a row by clicking on a link, and show the row details in a separate section of the form.

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

image:SAIL_Recipe_Grid_Link_to_Show_More.png

To achieve this scenario, we use a!dynamicLink to modify a variable, which can then be used to populate other areas of the SAIL interface.

Expression

=load(
  local!selectedEmployeeId,
  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),
  with(
    local!employeeDataSubset: todatasubset(local!employees, local!pagingInfo),
    local!data: index(local!employeeDataSubset, "data", null),
    a!formLayout(
      label: "SAIL Example: Grid with Link to Show More",
      firstColumnContents: {
        a!sectionLayout(
          label: "Employees",
          firstColumnContents: {
            a!gridField(
              totalCount: local!employeeDataSubset.totalCount,
              columns: {
                a!gridTextColumn(
                  label: "Name",
                  data: index(local!data, "name", {}),
                  /* Creates a dynamic link for every item in local!data `*/
                  links: apply(a!dynamicLink(value: _, saveInto: local!selectedEmployeeId), index(local!data, "id", {}))
                ),
                a!gridTextColumn(
                  label: "Department",
                  data: index(local!data, "department", null)
                )
              },
              value: local!pagingInfo,
              saveInto: local!pagingInfo
            )
          }
        ),
        if(
          isnull(local!selectedEmployeeId),
          {},
          with(
            /*` Replace with your rule to get the employee details */
            local!selectedEmployee: displayvalue(local!selectedEmployeeId, local!employees.id, local!employees, {}),
            a!sectionLayout(
              label: "Employee Details: " & local!selectedEmployee.name,
              firstColumnContents: {
                a!textField(
                  label: "Name",
                  value: local!selectedEmployee.name,
                  readOnly: true
                ),
                a!textField(
                  label: "Department",
                  value: local!selectedEmployee.department,
                  readOnly: true
                )
              },
              secondColumnContents: {
                a!textField(
                  label: "Title",
                  value: local!selectedEmployee.title,
                  readOnly: true
                ),
                a!dateField(
                  label: "Start Date",
                  value: local!selectedEmployee.startDate,
                  readOnly: true
                )
              }
            )
          )
        )
      },
      buttons: a!buttonLayout(
        primaryButtons: a!buttonWidgetSubmit(
          label: "Submit"
        )
      )
    )
  )
)

Test it out

  1. Click on the names in the grid in the left column. Notice how the value in the fields in the right column change to reflect the name you most recently clicked on.
FEEDBACK