Hi
I am trying to emulate the 'Corporate Raffle' tutorial in Appian with some changes in the requirements. I have to show a 'details' section within the 'summary' section. If user selects an item, product id and product description information has to be shown in the 'selection' column.
Right now, when I click on the 'checkbox', it selects all options and I can't display the selected item(s) in the "Selection" column.
Is there a way to include collapsible section within a grid? I am using card layout since I couldn't get the collapsible section with selectable grid layout.
Any suggestions or idea would be really appreciated.
Thank you.
a!localVariables( /*--- start of localVariables */ local!pageHeaderTextColor: "#44546A", local!sectionDividerColor: "#333F50", local!isSelected: { false() }, local!dataSummary: { { productId: "123", productDesc: "item Apple" }, { productId: "456", productDesc: "item Basketball" }, { productId: "789", productDesc: "item Computer" } }, local!dataDetail: { { productId: "123", brandOwner: "Apple Farmer Inc.", State: "NY", Zip: "12345" }, { productId: "456", brandOwner: "Nike Inc.", State: "OR", Zip: "97075" }, { productId: "789", brandOwner: "AST Computers", State: "CA", Zip: "90005" } }, { /*--- start of two columns ---*/ a!columnsLayout( columns: { a!columnLayout( /*--- start of product list column ---*/ width: "3X", contents: { a!sectionLayout( divider:"BELOW", dividerColor: local!sectionDividerColor, dividerWeight: "MEDIUM", /*--- section for selected product section layout ---*/ label: "Products List", labelSize: "LARGE", labelHeadingTag: "H1", labelColor: local!pageHeaderTextColor, contents: {} ), /*--- section to display selected products ---*/ /*--- start of interface ---*/ a!sectionLayout( contents: a!forEach( items: local!dataSummary, expression: { a!cardLayout( contents: { a!sideBySideLayout( items: { a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon( icon: "square-o", link: a!dynamicLink( saveInto: { a!save(local!isSelected, not(local!isSelected)) } ), linkStyle: "STANDALONE", showWhen: not(local!isSelected), size: "MEDIUM" ), a!richTextIcon( icon: "check-square-o-alt", link: a!dynamicLink( saveInto: { a!save(local!isSelected, not(local!isSelected)) } ), linkStyle: "STANDALONE", showWhen: local!isSelected, size: "MEDIUM" ) }, align: "LEFT" ) ), a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: local!dataSummary[fv!index].productId, size: "MEDIUM", style: "STRONG" ), char(10), a!richTextItem( text: local!dataSummary[fv!index].productDesc ) }, align: "RIGHT" ) ) }, alignVertical: "MIDDLE" ), a!sectionLayout( /*--- start of sectionLayout - product details ---*/ label: "Show Product Details", labelSize: "SMALL", labelHeadingTag: "H2", contents: { a!sideBySideLayout( /*--- product details ---*/ items: { a!sideBySideItem( item: a!textField( label: "Product ID", labelPosition: "COLLAPSED", value: local!dataDetail[fv!index].productId, readOnly: true ) ), a!sideBySideItem( item: a!textField( label: "Manufacturer", labelPosition: "COLLAPSED", value: local!dataDetail[fv!index].brandOwner, readOnly: true ) ), a!sideBySideItem( item: a!textField( label: "State", labelPosition: "COLLAPSED", value: local!dataDetail[fv!index].State, readOnly: true ) ), a!sideBySideItem( item: a!textField( label: "Zipcode", labelPosition: "COLLAPSED", value: local!dataDetail[fv!index].Zip, readOnly: true ) ) }, /*showWhen:local!isDetailVisible,*/ marginAbove: "STANDARD" )/*--- end of product summary sideByside layout */ }, isCollapsible: true() )/*--- end of sectionLayout - product details ---*/ }, /*--- end of contents for cardLayout ---*/ height: "AUTO", shape: "SEMI_ROUNDED", marginBelow: "NONE" )/*--- end of main section cardLayout ---*/ }/*--- end of expression attribute of forEach ---*/ ), /*--- closing forEach/main sectionLayout --*/ )/*--- end of top-level section layout ---*/ }/*--- matches with start of interface section ---*/ ), /*--- end of product list columnsLayout ---*/ a!columnLayout( /*--- column to display selected products ---*/ width: "1X", contents: { a!sectionLayout( divider:"BELOW", dividerColor: local!sectionDividerColor, dividerWeight: "MEDIUM", /*--- section for selected product section layout ---*/ label: "Selection", labelSize: "LARGE", labelHeadingTag: "H1", labelColor: local!pageHeaderTextColor, contents: {} )/*--- section to display selected products ---*/ }, /*--- start of selected product column --*/ ) }/*--- end of two columns ---*/ ) } )/*--- matches with start of localVariables ---*/
Discussion posts and replies are publicly visible
Hi, here is the code for your ask.
Note: This is not an optimized code, I just updated your code for your requirement.
a!localVariables( /*--- start of localVariables */ local!pageHeaderTextColor: "#44546A", local!sectionDividerColor: "#333F50", local!selectedIndex, local!selectedProduct, local!dataSummary: { { productId: "123", productDesc: "item Apple" }, { productId: "456", productDesc: "item Basketball" }, { productId: "789", productDesc: "item Computer" } }, local!dataDetail: { { productId: "123", brandOwner: "Apple Farmer Inc.", State: "NY", Zip: "12345" }, { productId: "456", brandOwner: "Nike Inc.", State: "OR", Zip: "97075" }, { productId: "789", brandOwner: "AST Computers", State: "CA", Zip: "90005" } }, { /*--- start of two columns ---*/ a!columnsLayout( columns: { a!columnLayout( /*--- start of product list column ---*/ width: "3X", contents: { a!sectionLayout( divider:"BELOW", dividerColor: local!sectionDividerColor, dividerWeight: "MEDIUM", /*--- section for selected product section layout ---*/ label: "Products List", labelSize: "LARGE", labelHeadingTag: "H1", labelColor: local!pageHeaderTextColor, contents: {} ), /*--- section to display selected products ---*/ /*--- start of interface ---*/ a!sectionLayout( contents: a!forEach( items: local!dataSummary, expression: { a!cardLayout( contents: { a!sideBySideLayout( items: { a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon( icon: "square-o", link: a!dynamicLink( saveInto: { a!save(local!selectedIndex, fv!index), a!save(local!selectedProduct, fv!item) } ), linkStyle: "STANDALONE", showWhen: tointeger(local!selectedIndex) <> fv!index, size: "MEDIUM" ), a!richTextIcon( icon: "check-square-o-alt", link: a!dynamicLink( saveInto: { a!save( {local!selectedIndex, local!selectedProduct}, null ) } ), linkStyle: "STANDALONE", showWhen: tointeger(local!selectedIndex) = fv!index, size: "MEDIUM" ) }, align: "LEFT" ) ), a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: local!dataSummary[fv!index].productId, size: "MEDIUM", style: "STRONG" ), char(10), a!richTextItem( text: local!dataSummary[fv!index].productDesc ) }, align: "RIGHT" ) ) }, alignVertical: "MIDDLE" ), a!sectionLayout( /*--- start of sectionLayout - product details ---*/ label: "Show Product Details", labelSize: "SMALL", labelHeadingTag: "H2", contents: { a!sideBySideLayout( /*--- product details ---*/ items: { a!sideBySideItem( item: a!textField( label: "Product ID", labelPosition: "COLLAPSED", value: local!dataDetail[fv!index].productId, readOnly: true ) ), a!sideBySideItem( item: a!textField( label: "Manufacturer", labelPosition: "COLLAPSED", value: local!dataDetail[fv!index].brandOwner, readOnly: true ) ), a!sideBySideItem( item: a!textField( label: "State", labelPosition: "COLLAPSED", value: local!dataDetail[fv!index].State, readOnly: true ) ), a!sideBySideItem( item: a!textField( label: "Zipcode", labelPosition: "COLLAPSED", value: local!dataDetail[fv!index].Zip, readOnly: true ) ) }, /*showWhen:local!isDetailVisible,*/ marginAbove: "STANDARD" )/*--- end of product summary sideByside layout */ }, isCollapsible: true() )/*--- end of sectionLayout - product details ---*/ }, /*--- end of contents for cardLayout ---*/ height: "AUTO", shape: "SEMI_ROUNDED", marginBelow: "NONE" )/*--- end of main section cardLayout ---*/ }/*--- end of expression attribute of forEach ---*/ ), /*--- closing forEach/main sectionLayout --*/ )/*--- end of top-level section layout ---*/ }/*--- matches with start of interface section ---*/ ), /*--- end of product list columnsLayout ---*/ a!columnLayout( /*--- column to display selected products ---*/ width: "1X", contents: { a!sectionLayout( divider:"BELOW", dividerColor: local!sectionDividerColor, dividerWeight: "MEDIUM", /*--- section for selected product section layout ---*/ label: "Selection", labelSize: "LARGE", labelHeadingTag: "H1", labelColor: local!pageHeaderTextColor, contents: { a!sideBySideLayout( showWhen: a!isNotNullOrEmpty(local!selectedProduct), items: { a!sideBySideItem( item: a!richTextDisplayField( label: "Product ID", value: local!selectedProduct.productId ) ), a!sideBySideItem( item: a!richTextDisplayField( label: "Product Description", value: local!selectedProduct.productDesc ) ) } ) } )/*--- section to display selected products ---*/ }, /*--- start of selected product column --*/ ) }/*--- end of two columns ---*/ ) } )/*--- matches with start of localVariables ---*/