UI Collapse

Hi Appian User,

How Can I collapse the UI vertically?"

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

  Discussion posts and replies are publicly visible

  • 0
    Certified Senior Developer

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

  • 0
    Certified Lead Developer

    Section layouts can be made collapsible.

  • 0
    Certified Senior Developer

    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.

  • 0
    Certified Senior Developer
    in reply to rahulk9545

    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))
    }
    )
    )
    }
    )
    )

  • 0
    Certified Senior Developer
    in reply to rahulk9545

    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

  • 0
    Certified Senior Developer

    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?