Duplicating Section layout on button click

You can achieve this with the help of a!forEach() 

Example: 

a!localVariables(
  local!count: 1,
  {
    a!forEach(
      enumerate(local!count),
      a!sectionLayout(
        label: "Section",
        contents: {
          a!textField(
            label: "Text",
            labelPosition: "ABOVE",
            saveInto: {},
            refreshAfter: "UNFOCUS",
            validations: {}
          )
        }
      )
    ),
    a!buttonArrayLayout(
      buttons: {
        a!buttonWidget(
          label: "Add Section",
          style: "NORMAL",
          saveInto: a!save(local!count, local!count + 1)
        )
      },
      align: "START"
    )
  }
)

I need to store the field values of each section as an array . But I am getting some error in value parameter. Should we use "item" in foreach loop?

a!localVariables(
  local!count: 1,
{
  a!sectionLayout(
    label: "Primary",
    contents: {
      a!forEach(
        enumerate(local!count),
      a!sectionLayout(
        label: "Section",
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!textField(
                    label: "Text",
                    labelPosition: "ABOVE",
                    /*value: ri!test.casetype,*/
                    saveInto: {ri!test.casetype},
                    refreshAfter: "UNFOCUS",
                    validations: {}
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!textField(
                    label: "Text",
                    labelPosition: "ABOVE",
                    /*value: ri!test.count,*/
                    saveInto: {ri!test.count},
                    refreshAfter: "UNFOCUS",
                    validations: {}
                  )
                }
              ),
              a!columnLayout(
                contents: {}
              )
            }
          ),
          a!buttonArrayLayout(
            buttons: {
              a!buttonWidget(
                label: "Remove",
                style: "NORMAL",
                saveInto: a!save(local!count, local!count - 1)
              )
            },
            align: "START"
          )
        }
      ))
    }
  ),
  a!buttonArrayLayout(
    buttons: {
      a!buttonWidget(
        label: "Add Section",
        style: "NORMAL",
        saveInto: a!save(local!count, local!count + 1)
      )
    },
    align: "START"
  )
}
)

You can form the loop on ri!test and with some changes in a!save() it should work, make sure that ri!test is of array type.

a!localVariables(
  {
    a!sectionLayout(
      label: "Primary",
      contents: {
        a!forEach(
          ri!test,
          a!sectionLayout(
            label: "Section",
            contents: {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!textField(
                        label: "Text",
                        labelPosition: "ABOVE",
                        value: fv!item.caseType,
                        saveInto: { fv!item.caseType },
                        refreshAfter: "UNFOCUS",
                        validations: {}
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!textField(
                        label: "Text",
                        labelPosition: "ABOVE",
                        value: fv!item.count,
                        saveInto: { fv!item.count },
                        refreshAfter: "UNFOCUS",
                        validations: {}
                      )
                    }
                  ),
                  a!columnLayout(contents: {})
                }
              ),
              a!buttonArrayLayout(
                buttons: {
                  a!buttonWidget(
                    label: "Remove",
                    style: "NORMAL",
                    saveInto: {
                      a!save(ri!test, remove(ri!test, fv!index))
                    }
                  )
                },
                align: "START"
              )
            }
          )
        )
      }
    ),
    a!buttonArrayLayout(
      buttons: {
        a!buttonWidget(
          label: "Add Section",
          style: "NORMAL",
          saveInto: {
            a!save(ri!test, append(ri!test, type!CDTname))
          }
        )
      },
      align: "START"
    )
  }
)

Replace type! at line:63 with actual CDT name.

By default I need to show one section in the UI . But by using this code only on clicking the add button the section is visible. Could you please help me on that.

Pass an empty CDT instance using type!CDT() in ri!test wherever you are calling this interface and for testing, set a default value.

In the same case now, I have nested foreach loops. I have CDT relation between parent section and child section. I have Add subsection button where I can add multiple sections inside a section. In the image "name" field which is highlighted will be repeated if we click "Add Subsection" button. I need to store the name value in the parent CDT . I have one to many relationship in this case. Only the field which I established relationship inside a  parent CDT should get added. But entire CDT is getting added and the value is saved separately.Could you please help me with this.

This really depends on what's happening upon click of "Add subsection", and whether it's handling the internal data correctly, which we can't possibly hope to discern (or even make presumptive guesses at) with only a top-level screenshot, unfortunately.

This really depends on what's happening upon click of "Add subsection", and whether it's handling the internal data correctly, which we can't possibly hope to discern (or even make presumptive guesses at) with only a top-level screenshot, unfortunately.