How we can add multiple text fields dynamically and remove?

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: {}
)
)

Hi Amit,

 I am agree With you, and i have added one extra line of code for this in save into, now it's working fine.If this not proper answer,let me know.

load(

 local!guests: {""},

 a!formLayout(

   label: "SAIL Example: Add "&local!guests,

   contents: {

     a!forEach(

       items: local!guests,

       expression: a!textField(

         label: if(fv!isFirst, "Guest Names", ""),

         value: fv!item,

         saveInto: {

           fv!item,

           if(

             fv!isLast,

             a!save(local!guests, append(local!guests, null)),

             a!save(local!guests,remove(local!guests,fv!index))

           )

         },

         refreshAfter: "KEYPRESS"

       )

     )

   },

   buttons: a!buttonLayout(

     primaryButtons: a!buttonWidgetSubmit(

       label: "Submit"

     )

   )

 )

)

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