Collapse

Certified Associate Developer

Hii, is there any way to collapse in cardlayout section. I have a requirement like inside cardlayout section we have four selected tab again in cardlayout one by one that tab enable after approve after enable last one how can we collapse by default.

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Senior Developer

    As we know cardlayout don't have collapsable property as that of boxLayout. But as per your requirement you can try below code, feel free to modify according to you. This is a custom collapsable cardlayout.

    a!localVariables(
      local!isOpen: true,
      {
        a!cardLayout(
          contents: a!cardLayout(
            contents: {
              a!sideBySideLayout(
                items: {
                  a!sideBySideItem(
                    item: a!richTextDisplayField(
                      labelPosition: "COLLAPSED",
                      value: {
                        a!richTextItem(text: "Attachments", size: "MEDIUM")
                      }
                    )
                  ),
                  a!sideBySideItem(
                    item: a!buttonArrayLayout(
                      buttons: {
                        a!buttonWidget(
                          icon: if(
                            local!isOpen,
                            "angle-down-bold",
                            "angle-right-bold"
                          ),
                          saveInto: a!save(local!isOpen, not(local!isOpen)),
                          size: "SMALL",
                          style: "LINK"
                        )
                      },
                      align: "END",
                      marginAbove: "NONE",
                      marginBelow: "NONE"
                    ),
                    width: "MINIMIZE"
                  )
                },
                alignVertical: "MIDDLE"
              )
            },
            style: "STANDARD",
            showBorder: false,
            showShadow: false,
            decorativeBarPosition: "END",
            decorativeBarColor: "#F0F0F0"
          ),
          style: "STANDARD",
          padding: "NONE",
          marginBelow: if(local!isOpen, "NONE", "STANDARD"),
          showShadow: true,
          decorativeBarPosition: "TOP",
          decorativeBarColor: "ACCENT"
        ),
        a!columnsLayout(
          columns: {
            a!columnLayout(width: "EXTRA_NARROW"),
            a!columnLayout(
              contents: {
                a!cardLayout(
                  contents: a!richTextDisplayField(
                    value: a!richTextBulletedList(
                      items: a!richTextListItem(
                        text: {
                          a!richTextItem(text: "Document 1"),
                          char(10),
                          char(10),
                          a!richTextItem(text: "Document 2"),
                          char(10),
                          char(10),
                          a!richTextItem(text: "Document 3")
                        }
                      )
                    )
                  ),
                  padding: "NONE",
                  showBorder: false,
                  showShadow: false,
                  decorativeBarPosition: "START",
                  decorativeBarColor: "ACCENT"
                )
              }
            )
          },
          showWhen: local!isOpen,
          marginBelow: "STANDARD"
        )
      }
    )

Reply Children