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

Parents Reply Children
  • 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