Grid click to show more detailed record

Question

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
 )
 }

)

Dan Lluhi · Answer

To populate the grid rows with record data, I would recommend looking into a!recordData - that is what you will pass into the "data" parameter of a!gridField. 
 
 As far as the structure of the grid and the selection mechanism, so far it looks like you are on the right track. If you notice when you click on a row of data, you can see that the values for your local variables local!selection and local!selectedRows are populated with information about the selected data. Now in your "Details" section when you are defining the "value" of each of your richTextDisplayFields, you can reference local!selectedRows to display what was selected. 
 
 Hope this helps!