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