RE: Expand and Collapse with Selection option

Naresh — Wed, 01 Mar 2023 05:05:49 GMT
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 ---*/