Adding rows in between rows in a grid.

Question

I know we can add rows at the end of the grid using addRowLink. Is it possible to add rows in between the grid rows? If yes, please explain. 
 Thanks, 
 Varsha

Vinay Kumar Rai · Accepted Answer

Hi, Yes, you can add the row in between rows, Use Insert function instead append insert (, , ) Thanks Vinay

Joubin Izadi · Answer

=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!