Changing Position of Item in Editable Grid

RE: Changing Position of Item in Editable Grid

gilw — Fri, 04 Oct 2019 00:16:13 GMT

Hema, Thank you so much for posting this! I've been looking for a quick way to reorder CDTs in this way and your solution was exactly what I needed. 👍🏼

Gil

RE: Changing Position of Item in Editable Grid

Hema — Fri, 21 Dec 2018 04:19:12 GMT

Hi Sarah,

Please try the below code snippet,

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
    },
    
  },
  with(
    a!formLayout(
      label: "Grid Data",
      contents: {
        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"
            ),
            a!gridLayoutHeaderCell(
              label: ""
            ),
            a!gridLayoutHeaderCell(
              label: ""
            ),
            a!gridLayoutHeaderCell(
              label: ""
            )
          },
          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!gridLayoutColumnConfig(
              width: "ICON"
            ),
            a!gridLayoutColumnConfig(
              width: "ICON"
            )
          },
          rows: a!forEach(
            items: local!employees,
            expression: a!gridRowLayout(
              contents: {
                a!textField(
                  label: "first name " & fv!index,
                  value: fv!item.firstName,
                  saveInto: fv!item.firstName,
                  required: true
                ),
                a!textField(
                  label: "last name " & fv!index,
                  value: fv!item.lastName,
                  saveInto: fv!item.lastName,
                  required: true
                ),
                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
                ),
                a!textField(
                  label: "title " & fv!index,
                  value: fv!item.title,
                  saveInto: fv!item.title,
                  required: true
                ),
                a!textField(
                  label: "phone number " & fv!index,
                  placeholder: "555-456-7890",
                  value: fv!item.phoneNumber,
                  saveInto: fv!item.phoneNumber
                ),
                a!dateField(
                  label: "start date " & fv!index,
                  value: fv!item.startDate,
                  saveInto: fv!item.startDate,
                  required: true,
                  align: "RIGHT"
                ),
                a!imageField(
                  label: "delete " & fv!index,
                  images: a!documentImage(
                    document: a!iconIndicator(
                      "MOVE_UP"
                    ),
                    altText: "Up",
                    caption: "Move Up " & fv!item.firstName,
                    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"
                ),
                a!imageField(
                  label: "delete " & fv!index,
                  images: a!documentImage(
                    document: a!iconIndicator(
                      "MOVE_DOWN"
                    ),
                    altText: "Down",
                    caption: "Move Down " & fv!item.firstName,
                    link: a!dynamicLink(
                      value: fv!index,
                      saveInto: {
                        if(
                          fv!index = count(
                            local!employees
                          ),
                          {},
                          {
                            a!save(
                              local!employees,
                              insert(
                                local!employees,
                                fv!item,
                                fv!index + 2
                              )
                            ),
                            a!save(
                              local!employees,
                              remove(
                                local!employees,
                                fv!index
                              )
                            )
                          }
                        )
                      }
                    )
                  ),
                  size: "ICON"
                ),
                a!imageField(
                  label: "delete " & fv!index,
                  images: a!documentImage(
                    document: a!iconIndicator(
                      "REMOVE"
                    ),
                    altText: "Remove Employee",
                    caption: "Remove " & fv!item.firstName & " " & fv!item.lastName,
                    link: a!dynamicLink(
                      value: fv!index,
                      saveInto: {
                        a!save(
                          local!employees,
                          remove(
                            local!employees,
                            save!value
                          )
                        )
                      }
                    )
                  ),
                  size: "ICON"
                )
              },
              id: fv!index
            )
          ),
          addRowlink: a!dynamicLink(
            label: "Add Employee",
            value: {
              startDate: today() + 1
            },
            saveInto: {
              a!save(
                local!employees,
                append(
                  local!employees,
                  save!value
                )
              )
            }
          ),
          rowHeader: 1
        )
      }
    )
  )
)

Thanks!!!

Regards,

Hema

RE: Changing Position of Item in Editable Grid

SarahEvelynn — Thu, 20 Dec 2018 19:15:13 GMT

Thank you for this, this is not however a method to change position in the editable grid, only how to add, update or remove the data. I want to change the orderof the data in the editable grid after it is in there.

RE: Changing Position of Item in Editable Grid

ankushj — Thu, 20 Dec 2018 18:51:14 GMT

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