Skip to main content
B
balajib2826
February 24, 2023
Question

UI Validation

  • February 24, 2023
  • 1 reply
  • 0 views

Hi Team, just got this Requirement So when i click the Collaspe all button The box layout which is below should get Collapsed.

Any one can help me with this

I made like after clicking this button a local variable is changed to true and after that i wrote that in iscollapsible condition but not working

1 reply

U
ujjwalr0002
Participating Frequently
February 24, 2023

Hi, FYI

You can create a custom card layout similar to the box layout and use that to achieve this.

a!localVariables(
  local!isInitiallyCollapsed: false(),/*can not be null*/
  {
    a!buttonArrayLayout(
      buttons: a!buttonWidget(
        label: if(
          local!isInitiallyCollapsed,
          "SHOW ALL",
          "COLLAPSE ALL"
        ),
        saveInto: a!save(
          local!isInitiallyCollapsed,
          not(local!isInitiallyCollapsed)
        )
      )
    ),
    a!cardLayout(
      contents: {
        a!sideBySideLayout(
          items: {
            a!sideBySideItem(
              item: a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                align: "LEFT",
                value: { a!richTextItem(text: "BOX 1", ) }
              )
            ),
            a!sideBySideItem(
              showWhen: not(
                rule!BCT_IsBlank(value: local!isInitiallyCollapsed)
              ),
              item: a!richTextDisplayField(
                align: "RIGHT",
                labelPosition: "COLLAPSED",
                value: {
                  a!richTextIcon(
                    showWhen: local!isInitiallyCollapsed = false,
                    icon: "minus-square",
                    caption: "Collapse",
                    color: "ACCENT",
                    size: "MEDIUM",
                    linkStyle: "STANDALONE",
                    link: a!dynamicLink(
                      saveInto: {
                        a!save(local!isInitiallyCollapsed, true)
                      }
                    )
                  ),
                  a!richTextIcon(
                    showWhen: local!isInitiallyCollapsed = true,
                    icon: "plus-square",
                    caption: "Expand",
                    color: "ACCENT",
                    size: "MEDIUM",
                    linkStyle: "STANDALONE",
                    link: a!dynamicLink(
                      saveInto: {
                        a!save(local!isInitiallyCollapsed, false)
                      }
                    )
                  )
                }
              )
            )
          }
        ),
        if(
          local!isInitiallyCollapsed = true,
          {},
          {
            a!sectionLayout(divider: "ABOVE", marginBelow: "NONE"),
            a!textField(label: "TEST"),
            /* Create a interface and resue it for the below code*/
            a!cardLayout(
              contents: {
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        align: "LEFT",
                        value: { a!richTextItem(text: "BOX 2", ) }
                      )
                    ),
                    a!sideBySideItem(
                      showWhen: not(
                        rule!BCT_IsBlank(value: local!isInitiallyCollapsed)
                      ),
                      item: a!richTextDisplayField(
                        align: "RIGHT",
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextIcon(
                            showWhen: local!isInitiallyCollapsed = false,
                            icon: "minus-square",
                            caption: "Collapse",
                            color: "ACCENT",
                            size: "MEDIUM",
                            linkStyle: "STANDALONE",
                            link: a!dynamicLink(
                              saveInto: {
                                a!save(local!isInitiallyCollapsed, true)
                              }
                            )
                          ),
                          a!richTextIcon(
                            showWhen: local!isInitiallyCollapsed = true,
                            icon: "plus-square",
                            caption: "Expand",
                            color: "ACCENT",
                            size: "MEDIUM",
                            linkStyle: "STANDALONE",
                            link: a!dynamicLink(
                              saveInto: {
                                a!save(local!isInitiallyCollapsed, false)
                              }
                            )
                          )
                        }
                      )
                    )
                  }
                ),
                if(
                  local!isInitiallyCollapsed = true,
                  {},
                  {
                    a!sectionLayout(divider: "ABOVE", marginBelow: "NONE"),
                    a!textField(label: "TEST")
                  }
                )
              },
              
            )
          }
        )
      },
      
    )
  }
)

    Terms & ConditionsAccessibility statement