UI Collapse

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

Section layouts can be made collapsible.

Hi,

a!sectionLayout(
label: "Click to Expand/Collapse",
contents: {
a!richTextDisplayField(
value: "Here are the details you can hide or show."
)
},
isCollapsible: true, /* This enables the section to be collapsible */
isInitiallyCollapsed: true /* This sets the default state as collapsed */
)

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.

a!localVariables(
local!showSidePanel: false,
a!sectionLayout(
contents: {
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!textField(
label: "Main Content Area",
value: "This is the main area of the interface.",
readOnly: true
)
}
),
a!columnLayout(
contents: {
a!textField(
label: "Collapsible Side Panel",
value: "Details shown here can be hidden.",
readOnly: true,
showWhen: local!showSidePanel
)
}
)
}
),
a!buttonLayout(
primaryButtons: a!buttonWidget(
label: if(local!showSidePanel, "Hide Details", "Show Details"),
style: "SOLID",
size: "SMALL",
saveInto: {
a!save(local!showSidePanel, not(local!showSidePanel))
}
)
)
}
)
)

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

Hi Rahul,

I don't think Appian provides ant OOTB for this. need to look into some options with some SAIL hack.

Can you help with more details about this requirement?