How we can add multiple text fields dynamically and remove?
Discussion posts and replies are publicly visible
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