Users are able to move Individual Rows Up and Down of a Dynamic Editable Grid

Question

Is it possible to achieve the users are able to move the order of rows vertically(up and down) in a dynamic editable interface?

ankushj · Answer

Yes U can,,, The below code is for moving Up, similarly you can do down also 
 
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 
 ) 
 ) 
 ) 
)