Accordion Behavior
Contents
See Also
Accordion Sections (Video), CatalogView Options, Lianja 3 App Inspector (Video), Page Attributes, Section Attributes, Understanding Lianja UI Navigation, Using the showdocument() function and Lianja.showDocument() method
Overview
Accordion Behavior is ideal for making the most of the available screen space. When a section in an accordion is selected, it is expanded and all other sections in the accordion are automatically collapsed.
Here, using the 'Lianja Web UI Demo' (example_webapp2) App in Tablet App View the 'Employee Information' section is selected and expanded and the other two sections are collapsed, with only their headers displayed.
Clicking on the 'Employee Notes' section header expands that section and collapses the others.
And clicking on the 'Employee Documents' section header expands that section and collapses the others.
Page Attributes
The following Page Attributes configure Accordion Behavior.
Accordion behavior
Render as accordion sections (True | False).
Checking the Accordion Behavior page attribute causes the sections on the Page to be displayed as an accordion.
See also Exclude from accordion below.
Use Accordions
Render as accordion sections on low resolution displays.
The Use Accordions attribute works in conjunction with the Use Accordions height attribute.
If Use Accordions is checked (true), it causes the sections on the Page to be displayed as an accordion if the display resolution is less than the Use Accordions height.
Here, the Use Accordions height is set to 800 (pixels), but the current resolution is higher, so the sections are not displayed in an accordion.
Use Accordions height
Render as accordion sections on low resolution displays less than this height.
The Use Accordions height attribute works in conjunction with the Use Accordions attribute.
If Use Accordions is checked (true), it causes the sections on the Page to be displayed as an accordion if the display resolution is less than the Use Accordions height.
Here, the Use Accordions height is set to 1200 (pixels) and the current resolution is lower, so the sections are displayed in an accordion.
Stacked behavior at runtime
Treat accordion sections as stacked at runtime allowing the sections to be made raised using showdocument() or from the Navigation Panel.
Here, in the 'Example Accordion Stack' (example_accordionstack) demo App, the 'Employee Information' page has three sections with fields from the southwind!employees table.
The photo and notes fields are each in their own section and the other fields in a third section.
Using the Page navigation bar, all sections are affected, but because the Stacked behavior at runtime attribute is checked (true), each section is allowed to fill the available screen space - here, shown in Phone App View.
Footer menus on the sections allow each section to be selected using showdocument().
Here, in the 'Lianja Tablet Web UI Demo' (example_webapp1) App, shown in Tablet App View, page and section selection is controlled from the Navigation Panel menu.
The 'Employees' page has the Stacked behavior at runtime attribute checked (true) and four sections. Each section can be selected individually from the Navigation Panel menu and allowed to fill the available screen space.
See also Accordion Sections (Video).
Section Attributes
The following Section Attributes further configure Accordion Behavior.
Hide form Navigation Bar at runtime if this section is in an Accordion Stack (True | False).
Here, in the 'Lianja Tablet Web UI Demo' (example_webapp1) App, the 'Employees' page has a visible navigation bar at the bottom of the page.
The Hide form NavBar section attribute allows the navigation bar to be hidden for individual Accordion Stack sections and shown for others.
The 'Employee List' CatalogView Section does not require the Page navigation bar, so Hide form NavBar is checked (true).
The Page navigation bar is required for the other 'Employees' page sections, so Hide form NavBar is unchecked (false)
Exclude from accordion
The section is excluded from accordion behavior at runtime (True | False).
The Accordion Behavior and Use Accordions page attributes affect all sections on the page, but individual sections can be excluded from the accordion.
Here, the 'Employee Information' section has the Exclude from accordion section attribute checked (true).
The 'Employee Notes' and 'Employee Documents' sections are still displayed in an accordion.
Selecting the 'Employee Documents' section expands it and collapses 'Employee Notes'.
'Employee Information' remains expanded.
Hide SearchBox
Hide the Page Header Instant Search box when this section is selected in an Accordion Stack (True | False). From v5.4.
- Supported on all clients.
Notes on Client Support
| Attribute | Notes |
|---|---|
| Accordion behavior | - |
| Use Accordions | - |
| Use Accordions height | - |
| Stacked behavior at runtime | - |
| Hide form NavBar | - |
| Exclude from accordion | Supported on the Desktop client only. |
