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
Discussion posts and replies are publicly visible
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" ) }
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" ) } ) )
Thank you, Aman and Naresh!! The solution that I was looking for is Naresh's Option 2. Aman's worked for alignment of the components but the checkbox value disappeared when the component lost focus - I realize that is a simple fix but for a newbie it took time.