add rows to the grid dynamically

Humaira over 1 year ago

Hi All,

I'm creating an application where I have a form with an add button on it. Using this button, I want to add a row into an editable grid with recently added data. Then, using the same form, I want to add the data in the same Editable Grid in the next row. Finally, if the user clicks the submit button, all the grid data is stored in the database.

Adding a row to the grid when I click the add button here I am facing the problem

Discussion posts and replies are publicly visible

Parents

+1 Konduru Chaitanya

Certified Senior Developer

over 1 year ago

Hello Humaira,

is it just an editable grid where you want to add data? If so the below will help

{
  a!gridLayout(
    label: "Editable Grid",
    labelPosition: "ABOVE",
    headerCells: {
      a!gridLayoutHeaderCell(label: "S.No"),
      a!gridLayoutHeaderCell(label: "Name"),
      a!gridLayoutHeaderCell(label: "Date"),
      a!gridLayoutHeaderCell(label: "")
    },
    columnConfigs: {
      a!gridLayoutColumnConfig(
        width: "ICON"
      ),
      a!gridLayoutColumnConfig(
        width: "DISTRIBUTE"
      ),
      a!gridLayoutColumnConfig(
        width: "DISTRIBUTE"
      ),
      a!gridLayoutColumnConfig(
        width: "ICON"
      )
    },
    rows: a!forEach(
      items: ri!data,
      expression: a!gridRowLayout(
        contents: {
          a!textField(value: fv!index,readOnly: true),
          a!textField(
            value: fv!item.employeeName,
            saveInto: fv!item.employeeName,
            required: true
          ),
          a!dateField(
            value: fv!item.employeeJoiningDate,
            saveInto: fv!item.employeeJoiningDate,
            required: true
          ),
          a!richTextDisplayField(
            value: a!richTextIcon(icon: "times",color: "NEGATIVE",link: a!dynamicLink(value: null,saveInto: a!save(ri!data,remove(ri!data,fv!index))),linkStyle: "STANDALONE")
          )
        }
      )
    ),
    addRowLink: a!dynamicLink(
      label: "Add row",
      value: null,
      saveInto: a!save(
        ri!data,
        append(ri!data,'type!{urn:com:appian:EMPLOYEE}EMPLOYEE_DETAILS'())
      )
    ),
    selectionSaveInto: {},
    validations: {},
    shadeAlternateRows: true
  ),
  a!buttonLayout(
    primaryButtons: a!buttonWidget(
      label: "Submit",
      value: true,
      submit: true,
      validate: true
    )
  )
}

Reply

+1 Konduru Chaitanya

Certified Senior Developer

over 1 year ago

Hello Humaira,

is it just an editable grid where you want to add data? If so the below will help

{
  a!gridLayout(
    label: "Editable Grid",
    labelPosition: "ABOVE",
    headerCells: {
      a!gridLayoutHeaderCell(label: "S.No"),
      a!gridLayoutHeaderCell(label: "Name"),
      a!gridLayoutHeaderCell(label: "Date"),
      a!gridLayoutHeaderCell(label: "")
    },
    columnConfigs: {
      a!gridLayoutColumnConfig(
        width: "ICON"
      ),
      a!gridLayoutColumnConfig(
        width: "DISTRIBUTE"
      ),
      a!gridLayoutColumnConfig(
        width: "DISTRIBUTE"
      ),
      a!gridLayoutColumnConfig(
        width: "ICON"
      )
    },
    rows: a!forEach(
      items: ri!data,
      expression: a!gridRowLayout(
        contents: {
          a!textField(value: fv!index,readOnly: true),
          a!textField(
            value: fv!item.employeeName,
            saveInto: fv!item.employeeName,
            required: true
          ),
          a!dateField(
            value: fv!item.employeeJoiningDate,
            saveInto: fv!item.employeeJoiningDate,
            required: true
          ),
          a!richTextDisplayField(
            value: a!richTextIcon(icon: "times",color: "NEGATIVE",link: a!dynamicLink(value: null,saveInto: a!save(ri!data,remove(ri!data,fv!index))),linkStyle: "STANDALONE")
          )
        }
      )
    ),
    addRowLink: a!dynamicLink(
      label: "Add row",
      value: null,
      saveInto: a!save(
        ri!data,
        append(ri!data,'type!{urn:com:appian:EMPLOYEE}EMPLOYEE_DETAILS'())
      )
    ),
    selectionSaveInto: {},
    validations: {},
    shadeAlternateRows: true
  ),
  a!buttonLayout(
    primaryButtons: a!buttonWidget(
      label: "Submit",
      value: true,
      submit: true,
      validate: true
    )
  )
}

Children

No Data