Skip to main content
V
vickyr583585
Known Participant
October 24, 2024
Question

Adding Multiple Editable Grids in an Interface

  • October 24, 2024
  • 3 replies
  • 0 views

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

3 replies

shanmathip7466
shanmathip7466
October 24, 2024

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

V
vickyr583585Author
Known Participant
October 24, 2024

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

somasundaram.d
somasundaram.d
October 24, 2024

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

Terms & ConditionsAccessibility statement