Grid and Flexbox layout

Question

Hello: 
 I am trying to create an interface - similar to the Maintenance Request example in Appian but I would like to add a "Select" checkbox that is (vertically) aligned in the center with the text (in this case, 2019 Lexus E350). Also, is there a way to include a check box without providing an option name since I would like the "Select Product" to be the column header. I am creating a set of card layouts using a 'forEach() function. 
 Is there a way to implement Flexbox layout - I went through the SAIL document but the search yielded no results. 
 Thank you for your help. 
 Ma

Naresh · Accepted Answer

Try with this code It might helpful. 
 Option 1 
 a!localVariables(
 local!isSelected: false,
 a!sectionLayout(
 label: "Select a Product",
 isCollapsible: true,
 contents: {
 a!cardLayout(
 contents: {
 a!sideBySideLayout(
 alignVertical: "MIDDLE",
 items: {
 a!sideBySideItem(
 item: a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 align: "RIGHT",
 value: {
 a!richTextIcon(
 showWhen: not(local!isSelected),
 icon: "square-o",
 size: "MEDIUM",
 linkStyle: "STANDALONE",
 link: a!dynamicLink(
 saveInto: {
 a!save(local!isSelected, not(local!isSelected))
 }
 )
 ),
 a!richTextIcon(
 showWhen: local!isSelected,
 icon: "check-square-o-alt",
 size: "MEDIUM",
 linkStyle: "STANDALONE",
 link: a!dynamicLink(
 saveInto: {
 a!save(local!isSelected, not(local!isSelected))
 }
 )
 ),
 char(9),
 a!richTextItem(
 text: "2019 Lexus ES350",
 style: "STRONG",
 size: "MEDIUM"
 ),
 char(10),
 a!richTextItem(
 text: "Time for tire rotation"
 )
 }
 )
 )
 }
 )
 },
 height: "AUTO",
 style: "ACCENT",
 marginBelow: "STANDARD"
 )
 }
 )
) 
 Option 2 
 a!localVariables(
 local!isSelected: false,
 a!sectionLayout(
 label: "Select a Product",
 isCollapsible: true,
 contents: {
 a!cardLayout(
 contents: {
 a!sideBySideLayout(
 alignVertical: "MIDDLE",
 items: {
 a!sideBySideItem(
 item: a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 align: "LEFT",
 value: {
 a!richTextIcon(
 showWhen: not(local!isSelected),
 icon: "square-o",
 size: "MEDIUM",
 linkStyle: "STANDALONE",
 link: a!dynamicLink(
 saveInto: {
 a!save(local!isSelected, not(local!isSelected))
 }
 )
 ),
 a!richTextIcon(
 showWhen: local!isSelected,
 icon: "check-square-o-alt",
 size: "MEDIUM",
 linkStyle: "STANDALONE",
 link: a!dynamicLink(
 saveInto: {
 a!save(local!isSelected, not(local!isSelected))
 }
 )
 )
 }
 )
 ),
 a!sideBySideItem(
 item: a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 align: "RIGHT",
 value: {
 a!richTextItem(
 text: "2019 Lexus ES350",
 style: "STRONG",
 size: "MEDIUM"
 ),
 char(10),
 a!richTextItem(
 text: "Time for tire rotation"
 )
 }
 )
 )
 }
 )
 },
 height: "AUTO",
 style: "ACCENT",
 marginBelow: "STANDARD"
 )
 }
 )
)

Amaan Shekh · Answer

try this {
 a!cardLayout(
 contents: {
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 /*this will work as margin*/
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: { repeat(1, char(10)) },
 marginBelow: "NONE"
 ),
 a!checkboxField(
 labelPosition: "ABOVE",
 choiceLabels: { "" },
 choiceValues: { 1 },
 saveInto: {},
 validations: {}
 )
 }
 ),
 a!columnLayout(contents: {}),
 a!columnLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: { "2019 Lexus OP" },
 size: "LARGE",
 style: { "STRONG" }
 ),
 char(10),
 a!richTextItem(
 text: { "Lorem Ipsum Random text" },
 size: "MEDIUM"
 )
 },
 align: "CENTER"
 )
 }
 )
 }
 )
 },
 height: "AUTO",
 style: "ACCENT",
 padding: "EVEN_LESS",
 marginBelow: "STANDARD"
 )
}

Grid and Flexbox layout

Top Replies