How to make a card layout collapsable?

Certified Associate Developer

How to make a card layout collapsable?

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    That's not a feature of a!cardLayout().  You could potentially accomplish a similar effect with a!boxLayout(), though.

    Also note: there's nothing keeping you from implementing something like this in a!cardLayout() - manually, for yourself.  You could have a Rich Text Icon in your card somewhere which, when clicked, hides all contents of the card (other than a "reopen" icon).  That wouldn't be very difficult to do, wouldn't require any unusual workarounds, but isn't a built-in feature.

  • 0
    Certified Associate Developer
    in reply to Mike Schmitt

    I have a paragraphtext inside that card layout will it hide that too?

  • 0
    Certified Senior Developer
    in reply to faraza4154

    Can you use box layout as Mike explained above?

  • 0
    Certified Lead Developer
    in reply to faraza4154

    If you build this functionality manually, as I'd suggest if you *absolutely* need a Card Layout instead of a Box Layout, then you can hide or show whatever you want inside your card when collapsed.  As I said, you'd just need to do any hiding manually.

    Edit: here's a portable example of such a thing:

    a!localVariables(
      local!collapsed: false(),
      a!cardLayout(
        contents: {
          a!richTextDisplayField(
            labelPosition: "COLLAPSED",
            align: "RIGHT",
            value: {
              a!richTextIcon(
                icon: "angle-down-bold",
                showWhen: not(local!collapsed),
                size: "MEDIUM",
                linkStyle: "STANDALONE",
                link: a!dynamicLink(
                  saveInto: a!save(local!collapsed, true())
                )
              ),
              a!richTextIcon(
                icon: "angle-right-bold",
                showWhen: local!collapsed,
                size: "MEDIUM",
                linkStyle: "STANDALONE",
                link: a!dynamicLink(
                  saveInto: a!save(local!collapsed, false())
                )
              )
            }
          ),
          a!sectionLayout(
            label: "Card Contents",
            showWhen: not(local!collapsed),
            contents: {
              a!paragraphField(
                value: "paragraph" & char(10) & "text" & char(10) & "goes" & char(10) & "here",
                readOnly: true()
              )
            }
          )
        }
      )
    )

Reply
  • 0
    Certified Lead Developer
    in reply to faraza4154

    If you build this functionality manually, as I'd suggest if you *absolutely* need a Card Layout instead of a Box Layout, then you can hide or show whatever you want inside your card when collapsed.  As I said, you'd just need to do any hiding manually.

    Edit: here's a portable example of such a thing:

    a!localVariables(
      local!collapsed: false(),
      a!cardLayout(
        contents: {
          a!richTextDisplayField(
            labelPosition: "COLLAPSED",
            align: "RIGHT",
            value: {
              a!richTextIcon(
                icon: "angle-down-bold",
                showWhen: not(local!collapsed),
                size: "MEDIUM",
                linkStyle: "STANDALONE",
                link: a!dynamicLink(
                  saveInto: a!save(local!collapsed, true())
                )
              ),
              a!richTextIcon(
                icon: "angle-right-bold",
                showWhen: local!collapsed,
                size: "MEDIUM",
                linkStyle: "STANDALONE",
                link: a!dynamicLink(
                  saveInto: a!save(local!collapsed, false())
                )
              )
            }
          ),
          a!sectionLayout(
            label: "Card Contents",
            showWhen: not(local!collapsed),
            contents: {
              a!paragraphField(
                value: "paragraph" & char(10) & "text" & char(10) & "goes" & char(10) & "here",
                readOnly: true()
              )
            }
          )
        }
      )
    )

Children