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

Certified Lead Developer

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

  Discussion posts and replies are publicly visible

  • 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
    )
    )
    )
    )