UI Collapse

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

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.

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