Working with Accordions
This page describes how to create an Accordion within one of your Evolve Site.
Accordions are used on Index Pages to display a list of objects, and then for each object a set of related information, such as the object's properties, its associations, which diagrams it appears on, and so on.
Accordions are usually configured to contain other layouts and behaviors inside them, which are exposed when the user expands the node.
You can also nest Accordions inside other Accordions, typically for listing Associated Objects.
What do you want to do?
Display a top-level Accordion in an Index Page
|
|
These instructions assume that you have already created a basic Object List Index Page which displays the list of objects you want to appear in your Accordion. |
|---|
To display a top-level Accordion in an Index Page:
-
Expand the node for the Index Page you want to add an Accordion to
-
Expand the Object Type node with the name of the Object Type, for example 'Process'
You should have a node representing the default layout 'Layout List (Simple)'. If not, right-click the layout node and select Switch Layout > CW > List (Simple)
-
Right-click the node 'Layout List (Simple)' and select Add Behaviors > Navigation > Accordion
A new sub-node is created under the layout node, titled 'Accordion'
-
Specify the settings for the Accordion
-
Remove accordion header if empty is only relevant if you are displaying another Accordion, nested inside this one, so this setting can be ignored if you only have one level.
If you do plan to have another Accordion nested inside this one, such as to list some Associated Objects, you can switch off this check-box to specify that you want the top-level Accordion item to be omitted from the displayed list if it does not have any Associated Objects.
-
Use Collapse by default to specify whether the Accordion is presented in a collapsed or expanded state when viewed.
-
Save your Site.
The changes are saved.
Display data inside an Accordion
Once you have an Accordion, you need to specify what you want to be displayed inside it when a user expands the node for each object.
You do this by adding one or more Property Groups to the parent node for the Accordion - this is usually the Object Type node for a top-level Accordion, or the Association Type node if the Accordion is nested.
|
|
For a full explanation of using Property Groups, see: Working with Property Groups. |
|---|
The instructions below detail how to add a generic Property Group.
-
Right-click the parent node for the Accordion and select New Property Group> Empty Group
The Property Group node is added.
-
In the Property Group's properties, choose the Layout you want and use the Selected Properties area to choose which properties to display
-
Save your Site
The changes are saved.
Display an Accordion nested inside another Accordion
|
|
These instructions assume that you have already created an Object List Index Page which includes a top-level Accordion displaying a list of objects, and that these objects have Associated Objects. |
|---|
To display an Accordion nested inside another Accordion:
-
Expand the node for the Index Page you want to add a nested Accordion to
-
Expand the Object Type node with the name of the Object Type, for example 'Process'
You should have a node representing the default layout 'Layout List (Simple)', under which you should find the top-level Accordion.
-
Right-click the Object Type node and select New Association > [Object Type] > [Association Type] to create an Association node
If you already have a node representing the Association Type you want to use with your nested Accordion, skip this step
-
Expand the Association node
-
Right-click the Layout List (Simple) node and choose Add Behaviors > Navigation > Accordion
The new Accordion node is created.
-
Specify the settings for the Accordion
-
Ignore Remove accordion header if empty as it cannot be used at this level.
-
Use Collapse by default to specify whether the accordion is presented in a collapsed or expanded state when viewed.
-
Save your Site.
The changes are saved.