My use case is to have the ability to add, remove and reorder items in a list similar to what we see for defining the columns in a grid in interface designer.
Is something like this possible using SAIL? I would think so, but having a hard time envisioning this. Is it a series of cards with rich text-based links to manipulate the positioning? Thanks in advance.
Hello [mention:14503de2be774f38b558454b24e8a1fe:e9ed411860ed4f2ba0265705b8793d05]
I guess, It can be done. You will have to play around with icons and dynamic links.
Below is a code that I have tried and is working fine. You can try updating id according to your requirement and check if it helps. Also ensure you follow best practices. I have missed few as I wrote the below as an example to show that it is doable in Appian.
But what is the requirement? Displaying data will be a little complicated and you will have to figure out. I cannot do the part for data as I am using map. Are you planning to use this for an editable grid?
a!localVariables(
local!columns: {
a!map(name: "ID", index: 1),
a!map(name: "Name", index: 2),
a!map(name: "Age", index: 3),
a!map(name: "Gender", index: 4),
},
local!updatedorder: a!refreshVariable(
value: todatasubset(
local!columns,
a!pagingInfo(
startIndex: 1,
batchSize: - 1,
sort: a!sortInfo(field: "index", ascending: true)
)
).data,
refreshOnReferencedVarChange: true
),
a!columnsLayout(
columns: {
a!columnLayout(
width: "WIDE_PLUS",
contents: {
a!gridField(
label: "Read-only Grid",
labelPosition: "ABOVE",
data: local!updatedorder,
columns: {
a!forEach(
items: local!updatedorder,
expression: a!gridColumn(label: fv!item.name, value: {})
)
},
validations: {}
)
}
),
a!columnLayout(
contents: {
a!cardLayout(
contents: {
a!forEach(
items: local!updatedorder,
expression: a!localVariables(
local!isEditable: false,
a!cardLayout(
shape: "ROUNDED",
showShadow: true(),
contents: a!columnsLayout(
showDividers: true,
columns: {
a!columnLayout(
contents: if(
local!isEditable,
a!textField(
label: "Column Name "&fv!index,
value: fv!item.name,
saveInto: {
{
local!columns[fv!index].name,
}
}
),
a!richTextDisplayField(
label: "Column Name"&fv!index,
value: a!richTextItem(
text: fv!item.name,
)
)
)
),
a!columnLayout(
contents: a!richTextDisplayField(
value: {
a!richTextIcon(
icon: "arrow-circle-up",
link: if(
fv!isFirst,
{},
a!dynamicLink(
value: fv!item.index - 1,
saveInto: {
local!columns[fv!index].index,
a!save(
local!columns[fv!index - 1],
a!update(
local!columns[fv!index - 1],
"index",
tointeger(
index(local!columns.index, fv!index - 1, null)
) + 1
)
)
}
)
)
),
char(09),
a!richTextIcon(
icon: "arrow-circle-down",
link: if(
fv!isLast,
{},
a!dynamicLink(
value: fv!item.index + 1,
saveInto: {
local!columns[fv!index].index,
a!save(
local!columns[fv!index + 1].index,
tointeger(
index(local!columns.index, fv!index + 1, null)
) - 1
)
}
)
)
),
char(09),
a!richTextIcon(
icon: if(local!isEditable, "check-circle", "pen"),
link: a!dynamicLink(value: if(local!isEditable, false, true),saveInto: local!isEditable)
),
char(09),
a!richTextIcon(
icon: "times-circle",
color: "NEGATIVE",
link: a!dynamicLink(
saveInto: a!save(
local!columns,
remove(
local!columns,
fv!index
)
)
)
)
}
),
)
}
)
)
)
),
a!buttonArrayLayout(
align: "CENTER",
buttons: a!buttonWidget(
width: "FILL",
label: "Add Column",
icon: "plus-circle",
saveInto: a!save(
local!columns,
append(
local!columns,
a!map(
name:"Column "&length(local!columns)+1,
index:length(local!columns)+1
),
)
)
)
)
}
)
}
)
}
)
)
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.