Expand and Collapse with Selection option

Question

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 ---*/

Naresh · Answer

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 ---*/