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
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.
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?