Difference between revisions of "Accordion Behavior"
Yvonne.milne (Talk | contribs) |
Yvonne.milne (Talk | contribs) |
||
| Line 8: | Line 8: | ||
[[{{ns:file}}:accordion1.png|450px|thumb|left|link={{filepath:accordion1.png}}|Accordion Behavior]] | [[{{ns:file}}:accordion1.png|450px|thumb|left|link={{filepath:accordion1.png}}|Accordion Behavior]] | ||
| + | |||
| + | |||
| + | |||
| + | Here, in '''Tablet App View''' the Employee Information section is selected and expanded and the other two sections are collapsed, with only their headers displayed. | ||
| + | |||
<br clear=all> | <br clear=all> | ||
[[{{ns:file}}:accordion2.png|450px|thumb|left|link={{filepath:accordion2.png}}|Accordion Behavior]] | [[{{ns:file}}:accordion2.png|450px|thumb|left|link={{filepath:accordion2.png}}|Accordion Behavior]] | ||
| + | |||
| + | |||
| + | |||
| + | Clicking on the Employee Notes section header expands that section and collapses the others. | ||
| + | |||
<br clear=all> | <br clear=all> | ||
[[{{ns:file}}:accordion3.png|450px|thumb|left|link={{filepath:accordion3.png}}|Accordion Behavior]] | [[{{ns:file}}:accordion3.png|450px|thumb|left|link={{filepath:accordion3.png}}|Accordion Behavior]] | ||
| + | |||
| + | |||
| + | |||
| + | And clicking on the Employee Documents section header expands that section and collapses the others. | ||
<br clear=all> | <br clear=all> | ||
| Line 21: | Line 35: | ||
[[{{ns:file}}:accordion4.png|450px|thumb|left|link={{filepath:accordion4.png}}|Attribute: Accordion Behavior]] | [[{{ns:file}}:accordion4.png|450px|thumb|left|link={{filepath:accordion4.png}}|Attribute: Accordion Behavior]] | ||
| + | |||
| + | |||
| + | |||
| + | Checking the '''Accordion Behavior''' [[Page Attributes|Page attribute]] causes the sections on the Page to be displayed as an accordion. | ||
| + | |||
| + | See also [[#Exclude from accordion|Exclude from accordion]] below. | ||
<br clear=all> | <br clear=all> | ||
| Line 27: | Line 47: | ||
[[{{ns:file}}:accordion5.png|450px|thumb|left|link={{filepath:accordion5.png}}|Attribute: Use Accordions]] | [[{{ns:file}}:accordion5.png|450px|thumb|left|link={{filepath:accordion5.png}}|Attribute: Use Accordions]] | ||
| + | |||
| + | |||
| + | |||
| + | The '''Use Accordions''' attribute works in conjunction with the [[#Use Accordions height|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. | ||
<br clear=all> | <br clear=all> | ||
| Line 33: | Line 61: | ||
[[{{ns:file}}:accordion6.png|450px|thumb|left|link={{filepath:accordion6.png}}|Attribute: Use Accordions height]] | [[{{ns:file}}:accordion6.png|450px|thumb|left|link={{filepath:accordion6.png}}|Attribute: Use Accordions height]] | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | The '''Use Accordions height''' attribute works in conjunction with the [[#Use Accordions|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. | ||
<br clear=all> | <br clear=all> | ||
Revision as of 06:20, 26 October 2016
Under construction
Contents
See Also
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, 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.
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).
Exclude from accordion
The section is excluded from accordion behavior at runtime (True | False).
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. |
