How we can add multiple text fields dynamically and remove?

Question

Amit Mishra · Answer

No direct approach. Better user a gridLayout() of two columns. 1st column for adding text fields and 2nd column to remove that row(image field to remove that entered text field).
for Example:

a!gridLayout(
label: "Multiple Text Fields",
headerCells: {
a!gridLayoutHeaderCell(
label: "Description"
),
a!gridLayoutHeaderCell(
label: ""
)
},
columnConfigs: {
a!gridLayoutColumnConfig(
width: "DISTRIBUTE",
weight: 3
),
a!gridLayoutColumnConfig(
width: "ICON"
)
},
rows: {
a!gridRowLayout(
contents: {
a!textField(
saveInto: {},
refreshAfter: "UNFOCUS",
validations: {}
),
a!imageField(
images: {
a!documentImage(
document: a!iconIndicator(
"REMOVE"
),
link: a!dynamicLink(
saveInto: {}
)
)
},
size: "ICON"
)
}
),

},
addRowLink: a!dynamicLink(
label: "Add Item",
saveInto: {}
)
)

sureshg57 · Answer

HI Aswini 
 I would think you will need more control over the adding and removing the text field. then personally i like to use grid. do refer to below sample code. 
 
 load(
 local!arrayVal: {},
 a!gridLayout(
 label: "Dynamic Text box",
 emptyGridMessage: "No Text Filed",
 headerCells: {
 a!gridLayoutHeaderCell(
 label: "Status"
 ),
 a!gridLayoutHeaderCell(
 label: ""
 )
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(
 width: "DISTRIBUTE"
 ),
 a!gridLayoutColumnConfig(
 width: "ICON"
 )
 },
 rows: a!forEach(
 items: local!arrayVal,
 expression: a!gridRowLayout(
 contents: {
 a!textField(
 label: "No",
 labelPosition: "ABOVE",
 value: fv!item.status,
 saveInto: fv!item.status,
 /*disabled: true,*/
 validations: {},
 align: "CENTER"
 ),
 /* For the DateTime Column*/
 /* For the Removal Column*/
 a!imageField(
 label: "delete " & fv!index,
 images: a!documentImage(
 document: a!iconIndicator(
 "REMOVE"
 ),
 altText: "Text Filed " & fv!index,
 caption: "Text Filed " & fv!index,
 link: a!dynamicLink(
 value: fv!index,
 saveInto: {
 a!save(
 local!arrayVal,
 remove(
 local!arrayVal,
 save!value
 )
 )
 }
 )
 ),
 size: "ICON"
 )
 },
 id: fv!index
 )
 ),
 addRowlink: a!dynamicLink(
 label: "Add Text Box",
 value: {
 status: ""
 },
 saveInto: {
 a!save(
 local!arrayVal,
 append(
 local!arrayVal,
 save!value
 )
 )
 }
 )
 )
) 
 
 Also -- you can try below code too. it is not that much refined and I had problems getting the delete icon aligned hence had to add a read-only text box to adjust that. 
 load(
 local!arrayVal: {
 status: "test"
 },
 {
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!forEach(
 items: local!arrayVal,
 expression: {
 a!textField(
 label: "textFiled " & fv!index,
 value: fv!item.status,
 saveInto: fv!item.status
 )
 }
 )
 }
 ),
 a!columnLayout(
 contents: {
 a!forEach(
 items: local!arrayVal,
 expression: {
 a!textField(
 readOnly: true()
 ),
 a!imageField(
 label: char(
 13
 ),
 size: "ICON",
 labelPosition: "COLLAPSED",
 images: a!documentImage(
 document: a!iconIndicator(
 "REMOVE"
 ),
 altText: "Text Filed " & fv!index,
 caption: "Text Filed " & fv!index,
 link: a!dynamicLink(
 value: fv!index,
 saveInto: {
 a!save(
 local!arrayVal,
 remove(
 local!arrayVal,
 save!value
 )
 )
 }
 )
 )
 )
 }
 )
 }
 )
 }
 ),
 a!buttonLayout(
 primaryButtons: a!buttonWidget(
 label: "Add Text Filed",
 value: {
 status: ""
 },
 saveInto: {
 a!save(
 local!arrayVal,
 append(
 {
 local!arrayVal
 },
 save!value
 )
 )
 }
 )
 )
 }
) 
 
 Regards 
 Suresh