Adding Multiple Editable Grids in an Interface

Certified Senior Developer

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

  Discussion posts and replies are publicly visible

  • 0
    Certified Senior Developer

    Could not get clearly what you are asking. 

    But from seeing the code, I would suggest

    1)Since you are using a Common local!data to store from All grids, add a new label name GridNumber in the map and store the grid number when a row is added. By doing this you can index and show the rows for corresponding grid

    2)In textfields, VALUE parameter is empty. Please map with the variables

  • 0
    Certified Senior Developer
    in reply to Shanmathi Ponnusamy

    Can you provide a sample code of what you are suggesting?

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