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 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.