Adding Multiple Editable Grids in an Interface

Question

Requiremnt: When user clicks on "Add Grid" then an editable grid should be added and when the user clicks on "Add Row" then a row should be added to the respective grid a!localVariables(
 local!count:1,
 local!data:a!forEach(items: enumerate(local!count)+1,
 expression: {{a!map(text1:"",text2:"")}}),
 a!sectionLayout(
 contents: {
 a!forEach(
 items: enumerate(local!count)+1,
 expression: a!gridLayout(
 label: "Grid"&fv!index,
 headerCells: {
 a!gridLayoutHeaderCell(
 label: "H1"
 ),
 a!gridLayoutHeaderCell(
 label: "h2"
 )
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(

 ),
 a!gridLayoutColumnConfig()
 },
 rows: a!forEach(
 items: local!data[fv!index],
 expression: a!gridRowLayout(
 contents: {
 a!textField(
 label: fv!item,
 value: "",
 saveInto: {
 a!save(local!data[fv!index]["text1"],save!value)
 }
 ),
 a!textField(
 label: fv!item,
 value: "",
 saveInto: {
 a!save(local!data[fv!index]["text2"],save!value)
 }
 )
 }
 )
 ),
 
 
 
 addRowLink: a!dynamicLink(
 label: "Add row",
 value: a!map(text1:"",text2:""),
 saveInto: {
 a!save(local!data[fv!index],append(local!data[fv!index],save!value))
 }
 )
 )
 ),
 a!richTextDisplayField(
 value: a!richTextItem(
 text: "Add Grid",
 link: a!dynamicLink(
 saveInto: {
 a!save(local!count,local!count+1)
 }
 )
 )
 )
 
 }
 )
) 
 The problem I am facing is that when I click on "Add Grid" it gets added but when I click on "Add Row" then it gets added to the local!data but it's not reflecting in the interface

Soma · Accepted Answer

Please try below code 
 a!localVariables(
 local!numberOfGrids:1,
 local!mapData:null,
 {
 a!forEach(
 items: 1+enumerate(local!numberOfGrids),
 expression: a!localVariables(
 local!currentGrid:fv!index,
 a!gridLayout(
 label: "Editable Grid",
 labelPosition: "ABOVE",
 headerCells: {
 a!gridLayoutHeaderCell(label: "H1"),
 a!gridLayoutHeaderCell(label: "h1")
 },
 columnConfigs: {},
 rows: a!forEach(
 items: index(local!mapData,wherecontains(local!currentGrid,tointeger(local!mapData.gridNumber)),null),
 expression: a!localVariables(
 local!currenRow:fv!index,
 a!gridRowLayout(
 contents: {
 a!textField(
 value: fv!item.col1,
 saveInto: local!mapData[
 cast(1,intersection(
 wherecontains(local!currentGrid,tointeger(local!mapData.gridNumber)),
 wherecontains(local!currenRow,tointeger(local!mapData.rowNumber))
 ))
 ].col1
 ),
 a!textField(
 value: fv!item.col2,
 saveInto: local!mapData[
 cast(1,intersection(
 wherecontains(local!currentGrid,tointeger(local!mapData.gridNumber)),
 wherecontains(local!currenRow,tointeger(local!mapData.rowNumber))
 ))
 ].col2
 )
 }
 )
 )
 ),
 addRowLink: a!dynamicLink(
 label: "Add Row",
 saveInto: {
 a!save(
 local!mapData,
 append(
 local!mapData,
 a!map(
 gridNumber:fv!index,
 rowNumber:length(wherecontains(fv!index,tointeger(local!mapData.gridNumber)))+1,
 col1:null,
 col2:null
 )
 )
 )
 }
 ),
 selectionSaveInto: {},
 validations: {},
 shadeAlternateRows: true
 )
 )
 ),
 a!linkField(
 links: a!dynamicLink(
 label: "Add Grid",
 saveInto: {
 a!save(
 local!numberOfGrids,
 local!numberOfGrids+1
 )
 }
 )
 )
 }
)

Adding Multiple Editable Grids in an Interface

Top Replies