SAIL to mimic grid column definition in interface designer

Question

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.

Konduru Chaitanya · Accepted Answer

Hello dylanfulmer 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
 ),
 )
 )
 )
 )
 }
 )
 }
 )
 }
 )
)

SAIL to mimic grid column definition in interface designer

Top Replies