Changing Position of Item in Editable Grid

Question

If any of you have seen the functionality in User Start Pages, I want to implement the functionality to move a line of the editable grid up or down. I think I can do it via a dynamic link but it seems like possibly an expression rule may be an easier way? I looked around for examples and recipes and was not able to see any. 
 Anyone have any guidance on this? Any resources I could use to find an example for next steps? 
 Thanks!

ankushj · Answer

load( 
local!employees: { 
{ id: 1, firstName: "John" , lastName: "Smith" , department: "Engineering" , title: "Director" , phoneNumber: "555-123-4567" , startDate: today()-360 }, 
{ id: 2, firstName: "Michael" , lastName: "Johnson" , department: "Finance" , title: "Analyst" , phoneNumber: "555-987-6543" , startDate: today()-360 }, 
{ id: 3, firstName: "Mary", lastName: "Reed" , department: "Engineering" , title: "Software Engineer" , phoneNumber: "555-456-0123" , startDate: today()-240 }, 
}, 
a!formLayout( 
label: "Example: Add,Update, or Remove Employee Data", 
contents: { 
a!textField( 
label: "", 
instructions: local!employees, 
readOnly: true() 
), 
with( 
a!gridLayout( 
totalCount: count(local!employees), 
headerCells: { 
a!gridLayoutHeaderCell(label: "First Name" ), 
a!gridLayoutHeaderCell(label: "Last Name" ), 
a!gridLayoutHeaderCell(label: "Department" ), 
a!gridLayoutHeaderCell(label: "Title" ), 
a!gridLayoutHeaderCell(label: "Phone Number" ), 
a!gridLayoutHeaderCell(label: "Start Date", align: "RIGHT" ), 
/* For the "Remove" column */ 
a!gridLayoutHeaderCell(label: "" ) 
}, 
/* Only needed when some columns need to be narrow */ 
columnConfigs: { 
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ), 
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ), 
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ), 
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ), 
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ), 
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ), 
a!gridLayoutColumnConfig(width: "ICON") 
}, 
/* 
* a!forEach() will take local!employee data and used that data to loop through an 
* expression that creates each row. 
* 
* When modifying the recipe to work with your data, you only need to change: 
* 1.) the number of fields in each row 
* 2.) the types of fields for each column (i.e. a!textField() for text data elements) 
* 3.) the fv!item elements. For example fv!item.firstName would change to fv!item.yourdata 
*/ 
rows: a!forEach( 
items: local!employees, 
expression: a!gridRowLayout( 
contents: { 
/* For the First Name Column*/ 
a!textField( 
/* Labels are not visible in grid cells but are necessary to meet accessibility requirements */ 
label: "first name " & fv!index, 
value: fv!item.firstName, 
saveInto: fv!item.firstName, 
required: true 
), 
/* For the Last Name Column*/ 
a!textField( 
label: "last name " & fv!index, 
value: fv!item.lastName, 
saveInto: fv!item.lastName, 
required:true 
), 
/* For the Department Column*/ 
a!dropdownField( 
label: "department " & fv!index, 
placeholderLabel: "-- Select -- ", 
choiceLabels: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" }, 
choiceValues: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" }, 
value: fv!item.department, 
saveInto: fv!item.department, 
required:true 
), 
/* For the Title Column*/ 
a!textField( 
label: "title " & fv!index, 
value: fv!item.title, 
saveInto: fv!item.title, 
required:true 
), 
/* For the Phone Number Column*/ 
a!textField( 
label: "phone number " & fv!index, 
placeholder:"555-456-7890", 
value: fv!item.phoneNumber, 
saveInto: fv!item.phoneNumber 
), 
/* For the Start Date Column*/ 
a!dateField( 
label: "start date " & fv!index, 
value: fv!item.startDate, 
saveInto: fv!item.startDate, 
required:true, 
align: "RIGHT" 
), 
/* For the Removal Column*/ 
a!imageField( 
label: "delete " & fv!index, 
images: a!documentImage( 
document: a!iconIndicator("MOVE_UP"), 
altText: "Remove Employee" , 
caption: "Remove " & fv!item.firstName & " " & fv!index, 
link: a!dynamicLink( 
value: fv!index, 
saveInto: { 
if(fv!index =1, 
{}, 
{ 
a!save(local!employees,insert(local!employees,fv!item,fv!index-1)), 
a!save(local!employees, remove(local!employees, fv!index+1)) 
} 
) 
} 
) 
), 
size: "ICON" 
) 
}, 
id: fv!index 
) 
), 
addRowlink: a!dynamicLink( 
label: "Add Employee", 
/* 
* For your use case, set the value to a blank instance of your CDT using 
* the type constructor, e.g. type!Employee(). Only specify the field 
* if you want to give it a default value e.g. startDate: today()+1. 
*/ 
value: { 
startDate: today() + 1 
}, 
saveInto: { 
a!save(local!employees, append(local!employees, save!value)) 
} 
), 
rowHeader: 1 
) 
) 
}, 
buttons: a!buttonLayout( 
primaryButtons: a!buttonWidget( 
label: "Submit", 
submit: true 
) 
) 
) 
)

Changing Position of Item in Editable Grid

Top Replies