Grid click to show more detailed record

I'm attempting to populate a record section from the click of a grid.  Not sure how to populate the record...also wanted to ensure I'm building out the grid properly.

Thank you.

a!localVariables(

  local!selection,
  local!selectedRows,
  {
    a!sectionLayout(
      label: "Results",
      labelSize: "SMALL",
      contents: {
        a!gridField(
          label: "",
          data:{
            a!map(id: 11, Name: "Elizabeth Ward",  dept: "Engineering",     role: "Senior Engineer",       team: "Front-End Components",     pto: 15, startDate: today()-500),
            a!map(id: 22, Name: "Michael Johnson", dept: "Finance",         role: "Payroll Manager",       team: "Accounts Payable",         pto: 2,  startDate: today()-100),
            a!map(id: 33, Name: "John Smith",      dept: "Engineering",     role: "Quality Engineer",      team: "User Acceptance Testing",  pto: 5,  startDate: today()-1000),
          },
          columns: {
            a!gridColumn(
              label: "Name",
              value: fv!row.Name
            ),
            a!gridColumn(
              label: "Department",
              value: fv!row.dept
            )
          },
          selectable: true,
          selectionstyle: "ROW_HIGHLIGHT",
          selectionvalue: local!selection,
          selectionSaveInto: {
            a!save(local!selectedRows, index(fv!selectedRows, length(fv!selectedRows), null)),
            a!save(local!selection, index(save!value, length(save!value), null))
          }
        )
      },
      isCollapsible: true
    ),
    a!sectionLayout(
      label: "Details",
      labelSize: "SMALL",
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  label: "Role",
                  labelPosition: "ABOVE",
                  value: "",
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  label: "Team",
                  labelPosition: "ABOVE",
                  value: "",
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  label: "PTO",
                  labelPosition: "ABOVE",
                  value: "",
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  label: "Start Date",
                  labelPosition: "ABOVE",
                  value: "",
                )
              }
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            )
          }
        )
      },
      isCollapsible: true
    )
  }

)