UI Collapse

Question

Hi Appian User, 
 How Can I collapse the UI vertically?" 
 
 " i want collapse on the right and not upwards., how can we do that."

Konduru Chaitanya · Answer

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

UI Collapse

Top Replies