RE: Adding rows in between rows in a grid.

Joubin Izadi — Mon, 15 Oct 2018 18:57:35 GMT

=load(
  local!employees: {
      { id: 1, firstName: "John" , lastName: "Smith"},
      { id: 2, firstName: "Michael" , lastName: "Johnson"},
      { id: 3, firstName: "Mary", lastName: "Reed"},
  },
  local!insertPos: count(local!employees)+1,
  a!formLayout(
    label: "Employee Data",
    contents: {
      a!gridLayout(
        totalCount: count(local!employees),
        headerCells: {
          a!gridLayoutHeaderCell(label: "First Name" ),
          a!gridLayoutHeaderCell(label: "Last Name" ),
          a!gridLayoutHeaderCell(label: "" )
        },
        rows: a!forEach(
          items: local!employees,
          expression: a!gridRowLayout(
            contents: {
              a!textField(
                value: fv!item.firstName,
                saveInto: fv!item.firstName
              ),
              a!textField(
                value: fv!item.lastName,
                saveInto: fv!item.lastName
              ),
              a!imageField(
                label: "Add " & fv!index,
                images: a!documentImage(
                  document: a!iconIndicator("ADD"),
                  altText: "Add Employee",
                  caption: "Add Employee Here",
                  link: 
                    a!dynamicLink(
                      label: "Add Employee",
                      value: {
                        firstName: ""
                      },
                      saveInto: {
                        a!save(local!employees, insert(local!employees, save!value, fv!index))
                      }
                    )
                ),
                size: "ICON"
              )
            },
            id: fv!index
          )
        )
      )
    }
  )
)

I see three solutions here.

1. You can add rows to any part of the grid using addRowLink. It is just most commonly seen with append. See the below example for how to always add at position 2 using insert instead (line 39).

=load(
  local!employees: {
      { id: 1, firstName: "John" , lastName: "Smith"},
      { id: 2, firstName: "Michael" , lastName: "Johnson"},
      { id: 3, firstName: "Mary", lastName: "Reed"},
  },
  local!insertPos: count(local!employees)+1,
  a!formLayout(
    label: "Employee Data",
    contents: {
      a!gridLayout(
        totalCount: count(local!employees),
        headerCells: {
          a!gridLayoutHeaderCell(label: "First Name" ),
          a!gridLayoutHeaderCell(label: "Last Name" )
        },
        rows: a!forEach(
          items: local!employees,
          expression: a!gridRowLayout(
            contents: {
              a!textField(
                value: fv!item.firstName,
                saveInto: fv!item.firstName
              ),
              a!textField(
                value: fv!item.lastName,
                saveInto: fv!item.lastName
              )
            },
            id: fv!index
          )
        )
        ,addRowlink: a!dynamicLink(
          label: "Add Employee",
          value: {
            firstName: ""
          },
          saveInto: {
            a!save(local!employees, insert(local!employees, save!value, 2))
          }
        )
      )
    }
  )
)

However, maybe you want to add at a dynamic location within the grid? For example, maybe it's the 2nd spot this time but next time you want to add it to the 4th spot?

2. You could have the user enter a row number, then add the line in the grid at that location:

=load(
  local!employees: {
      { id: 1, firstName: "John" , lastName: "Smith"},
      { id: 2, firstName: "Michael" , lastName: "Johnson"},
      { id: 3, firstName: "Mary", lastName: "Reed"},
  },
  local!insertPos: count(local!employees)+1,
  a!formLayout(
    label: "Employee Data",
    contents: {
      a!gridLayout(
        totalCount: count(local!employees),
        headerCells: {
          a!gridLayoutHeaderCell(label: "First Name" ),
          a!gridLayoutHeaderCell(label: "Last Name" )
        },
        rows: a!forEach(
          items: local!employees,
          expression: a!gridRowLayout(
            contents: {
              a!textField(
                value: fv!item.firstName,
                saveInto: fv!item.firstName
              ),
              a!textField(
                value: fv!item.lastName,
                saveInto: fv!item.lastName
              )
            },
            id: fv!index
          )
        )
      ),
      a!integerField(
        label: "Insert Employee at Row:",
        value: local!insertPos,
        saveInto: local!insertPos
      ),
      a!linkField(
        links:
          a!dynamicLink(
            label: "Add Employee",
            value: {
              firstName: ""
            },
            saveInto: {
              a!save(local!employees, insert(local!employees, save!value, local!insertPos))
            }
          )
      )
    }
  )
)

But maybe you don't want to have the user enter the number.

3. You just want them to click a button next to a row and have it auto add right before it?

=load(
  local!employees: {
      { id: 1, firstName: "John" , lastName: "Smith"},
      { id: 2, firstName: "Michael" , lastName: "Johnson"},
      { id: 3, firstName: "Mary", lastName: "Reed"},
  },
  local!insertPos: count(local!employees)+1,
  a!formLayout(
    label: "Employee Data",
    contents: {
      a!gridLayout(
        totalCount: count(local!employees),
        headerCells: {
          a!gridLayoutHeaderCell(label: "First Name" ),
          a!gridLayoutHeaderCell(label: "Last Name" ),
          a!gridLayoutHeaderCell(label: "" )
        },
        rows: a!forEach(
          items: local!employees,
          expression: a!gridRowLayout(
            contents: {
              a!textField(
                value: fv!item.firstName,
                saveInto: fv!item.firstName
              ),
              a!textField(
                value: fv!item.lastName,
                saveInto: fv!item.lastName
              ),
              a!imageField(
                label: "delete " & fv!index,
                images: a!documentImage(
                  document: a!iconIndicator("ADD"),
                  altText: "Add Employee",
                  caption: "Add Employee Here",
                  link: 
                    a!dynamicLink(
                      label: "Add Employee",
                      value: {
                        firstName: ""
                      },
                      saveInto: {
                        a!save(local!employees, insert(local!employees, save!value, fv!index))
                      }
                    )
                ),
                size: "ICON"
              )
            },
            id: fv!index
          )
        )
      )
    }
  )
)

Hope one of these solutions can help!

RE: Adding rows in between rows in a grid.

Vinay Kumar Rai — Mon, 15 Oct 2018 18:47:38 GMT

Hi,

Yes, you can add the row in between rows,

Use Insert function instead append

insert (<All Data>, <Data to Add>, <row Number>)

Thanks

Vinay