Question
Expand and Collapse with Selection option
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 ---*/