UI Collapse

Hi rahulk9545  Could please share more context about your requirement, what do you mean by collapsing UI vertically

i want collapse on the right and not upwards., how can we do that.

i want collapse on the right and not upwards., how can we do that.

Create a custom look alike layout using, columns layout, section layout.

a!localVariables(
  local!isCollapse: true(),
  a!cardLayout(
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            a!richTextDisplayField(
              value: {
                a!richTextItem(
                  text: if(
                    local!isCollapse,
                    "Click to Expand",
                    "Click to Collapse"
                  ),
                  link: a!dynamicLink(
                    value: if(local!isCollapse, false, true),
                    saveInto: local!isCollapse
                  ),
                  linkStyle: "STANDALONE",
                  size: "MEDIUM_PLUS"
                ),
                repeat(2, char(32)),
                a!richTextIcon(
                  icon: if(
                    local!isCollapse,
                    "arrow-circle-right-alt",
                    "arrow-circle-down-alt"
                  ),
                  link: a!dynamicLink(
                    value: if(local!isCollapse, false, true),
                    saveInto: local!isCollapse
                  ),
                  linkStyle: "STANDALONE",
                  size: "MEDIUM_PLUS"
                )
              }
            )
          ),
          a!columnLayout(
            contents: {
              a!richTextDisplayField(
                value: a!richTextIcon(
                  icon: if(
                    local!isCollapse,
                    "arrow-circle-right-alt",
                    "arrow-circle-down-alt"
                  ),
                  link: a!dynamicLink(value: true, saveInto: local!isCollapse),
                  linkStyle: "STANDALONE",
                  size: "MEDIUM_PLUS"
                ),
                align: "RIGHT"
              )
            }
          )
        }
      ),
      a!sectionLayout(
        contents: { a!textField(label: "My Contents here",value: "Remove the rich text icon which is not desired") },
        showWhen: not(local!isCollapse)
      )
    }
  )
)

If you mean on right side

a!localVariables(
  local!isCollapse: true(),
  a!cardLayout(
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: a!cardLayout(
              height: "TALL_PLUS",
              style: "STANDARD",
              contents: a!richTextDisplayField(
                value: {
                  a!richTextItem(
                    text: if(
                      local!isCollapse,
                      "Click to Expand",
                      "Click to Collapse"
                    ),
                    link: a!dynamicLink(
                      value: if(local!isCollapse, false, true),
                      saveInto: local!isCollapse
                    ),
                    linkStyle: "STANDALONE",
                    size: "MEDIUM_PLUS"
                  ),
                  repeat(2, char(32)),
                  a!richTextIcon(
                    icon: if(
                      local!isCollapse,
                      "arrow-circle-right-alt",
                      "times-circle"
                    ),
                    link: a!dynamicLink(
                      value: if(local!isCollapse, false, true),
                      saveInto: local!isCollapse
                    ),
                    linkStyle: "STANDALONE",
                    size: "MEDIUM_PLUS"
                  )
                }
              )
            ),
            width: "NARROW_PLUS"
          ),
          a!columnLayout(
            contents: {
              a!sectionLayout(
                contents: {
                  a!textField(
                    label: "My Contents here",
                    value: "A  similar layout is available in the design patterns of the interface"
                  )
                },
                showWhen: not(local!isCollapse)
              )
            }
          )
        }
      )
    }
  )
)

You can also see the patterns available in the interface designer