a!localVariables(
/*
* local!employess is provided in this recipe as a way to start with hard-coded
* data. However, this data is identical to the data created from the entity-backed
* tutorial. Replace the hard-coded data with a query to the employee data store
* entity and all of the employee records from the tutorial will appear.
*
* To replace this data with your own, replace (ctrl+H or cmd+H) all references to
* local!employees with your data source, either via rule input or local variable.
*/
local!tempEmployHolder,
local!employees: {
a!map(
id: 1,
firstName: "John",
lastName: "Smith",
department: "Engineering",
title: "Director",
phoneNumber: "555-123-4567",
startDate: today() - 360,
sequence: 1
),
a!map(
id: 2,
firstName: "Michael",
lastName: "Johnson",
department: "Finance",
title: "Analyst",
phoneNumber: "555-987-6543",
startDate: today() - 360,
sequence: 2
),
a!map(
id: 3,
firstName: "Mary",
lastName: "Reed",
department: "Engineering",
title: "Software Engineer",
phoneNumber: "555-456-0123",
startDate: today() - 240,
sequence: 3
),
},
a!formLayout(
label: "Example: Add,Update, or Remove Employee 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"),
/* For the "Remove" column */
a!gridLayoutHeaderCell(label: ""),
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!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,
placeholder: "-- 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 Moving Column Up*/
a!richTextDisplayField(
value: a!richTextIcon(
icon: "arrow-circle-o-up",
altText: "Move " & fv!index,
caption: "Move " & fv!item.firstName & " " & fv!item.lastName,
link: a!dynamicLink(
value: fv!index,
saveInto: {
local!employees[fv!index - 1].sequence,
a!save(
local!employees[fv!index].sequence,
fv!index - 1
),
a!save(
local!tempEmployHolder,
index(local!employees, fv!index - 1, null())
),
a!save(
local!employees,
a!update(
local!employees,
fv!index - 1,
index(local!employees, fv!index, null())
)
),
a!save(
local!employees,
a!update(
local!employees,
fv!index,
local!tempEmployHolder
)
),
a!save(local!tempEmployHolder, null())
}
),
linkStyle: "STANDALONE",
color: "NEGATIVE",
showWhen: not(fv!isFirst)
)
),
a!richTextDisplayField(
value: a!richTextIcon(
icon: "arrow-circle-down",
altText: "Move " & fv!index,
caption: "Move " & fv!item.firstName & " " & fv!item.lastName,
link: a!dynamicLink(
value: fv!index,
saveInto: {
local!employees[fv!index + 1].sequence,
a!save(
local!employees[fv!index].sequence,
fv!index + 1
),
a!save(
local!tempEmployHolder,
index(local!employees, fv!index + 1, null())
),
a!save(
local!employees,
a!update(
local!employees,
fv!index + 1,
index(local!employees, fv!index, null())
)
),
a!save(
local!employees,
a!update(
local!employees,
fv!index,
local!tempEmployHolder
)
),
a!save(local!tempEmployHolder, null())
}
),
linkStyle: "STANDALONE",
color: "NEGATIVE",
showWhen: not(fv!isLast)
)
)
},
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)
)
)
)
