Duplicating Section layout on button click

Question

Hi, I have a requirement where I need to duplicate a particular section on clicking add button. In the section I have some text fields and clicking on the "Add" button the text fields should get duplicated where I have to enter new values in the field. Is it achievable? or is there any other method where I can duplicate the fields on clicking the button ?Please let me know 
 
 Thanks

Sanchit Gupta (Xebia) · Accepted Answer

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

Sanchit Gupta (Xebia) · Answer

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.

Duplicating Section layout on button click

Top Replies