Index Pages Explained
Working with Index Pages
Index Pages are the top-level pages in your Site. They are generally the starting point for users browsing your Site. For navigation purposes, in order to view an Index Page it must be linked to a Menu.
Index Pages essentially display lists or representations of objects which can be expanded on by supporting Object Pages which show more information about the object in question.
So users typically find objects they are interested in on Index Pages and follow links to Object Pages providing more detail.
Index Pages are generally tied to a specific Object Type, but you can have multiple Index Pages per Object Type.
There are three types of Index Page:
-
Object listing pages, such as lists, grids, and accordions
-
Graphical pages, such as bar charts, maps, pie charts and roadmaps
-
Diagram pages, showing CW Modeler diagrams or visualization diagrams.
What do you want to do?
Create an Object List Index Page
Use Tabs to organize content on an Index Page
Create Multiple Index Pages for an Object Type
Extend display options with Layouts and Behaviors
Create an Object List Index Page
The instructions on this page detail how to create a basic Index Page which displays a simple list of objects. This is the default display setting for all new Index Pages.
Basic Object List Index Pages only display the Name of the objects listed within them.
|
|
While these instructions describe how to create a basic Object List page, Evolve offers many different options for how you want to display content in your pages. To find out more about these different display options and how to configure them, see Working with Page Layouts and Behaviors. |
|---|
Creating a basic Object List Index Page is a two-step process. Follow the steps below.
Step 1 - Create the page
To create a new Index Page:
-
In Evolve Designer, expand the Site node.
-
Right-click the Index Pages node.
-
Select Add Index Page for Object Type.
-
Scroll through the pop-up list to select an Object Type to base the Index Page on
The new Index Page is created and is placed at the bottom of the list of Index Pages in the tree. It is given a default name of index_<object-type-name>.
If you close and reopen Evolve Designer, then the new page will be listed alphabetically.
Step 2 - Specify the page properties
Once you have made an Index Page you should configure its properties.
To specify the page properties:
-
Select the node for the Index Page
The right-hand panel shows the properties for the page
-
Edit the page's properties:
-
Use Page Name to specify the name of the page as it appears in the URL.
Please note you can only use lower case letters with no spaces.
|
|
The Page Name must be unique, but generally you can leave it as the default. The only time you will need to edit the Page Name is if you have more than one Index Page per Object Type. See Creating Multiple Index Pages for an Object Type for more information. If you change the Page Name and you already have a Menu linking to the page, you must also change the Menu Link as it is not updated automatically. |
|---|
-
Use Page Display Name to set the name of the page as it appears in Evolve web pages, in Menus.
-
Page Title is not available for index pages.
-
Use Add Page Filter to specify if you want the filter control available on the page - so a user can filter the displayed list of objects.
-
Use Has Image to specify the image and styling to be used when the page appears in a menu.
Selecting Has Image enables the following properties:
-
Use the Custom Image drop-down list to select an icon to be displayed alongside the Page Display Name in the published web pages. These icons are part of the Theme applied to your Site.
-
If you chose a Custom Image, use Apply Color Transformation to specify the color transformation to the icon
-
If you chose to Apply Color Transformation, select the color to use from the Color Transformation drop-down list
-
To apply a hover effect to the icon, use the Apply hover effect to the image check box.
-
Save your Site.
The Index Page's properties are saved.
|
|
Remember that to view your page you must have a Menu which links to it. See Create and Edit a Menu for more details. |
|---|
Related Topics
Use Page Queries and Filters to display just the objects you want
Use a Custom Display String to show more than just the object Name
Display your data using different Layouts and Behaviors
Create an Empty Index Page
The instructions on this page detail how to create an empty Index Page that is not linked to any Object Type.
You might want to do this if you are creating some of the more complex page types, such as Cluster Bubble Charts and so on.
Once you have created the page, you can then add an Object Type node, a Tab Controller, or both, depending on what the behavior you plan to use requires.
What do you want to do?
Create an empty Index Page
To create an empty Index Page:
-
Right-click on the Index Pages node and choose Add Index Page.
A new Index Page node is added to the bottom of the list of Index Pages
-
Select the new Index Page node and edit its settings accordingly, particularly Page Name and Page Display Name
-
Use Page Name to specify the name of the page as it appears in the URL.
|
|
The page Name must be unique and can only contain lower case letters, numbers, dashes and underscores, with no spaces. If the Page Name is not unique, or it contains illegal characters, you will see an error when you try to Save the Site. |
|---|
-
Use Page Display Name to set the name of the page as it appears in Evolve web pages, such as for its title or in Menus.
-
Save your Site.
|
|
Remember that to view your page you must have a Menu which links to it. See Create and Edit a Menu for more details. |
|---|
Add an Object Type node to an empty Index Page
To add an Object Type node to an empty Index Page:
-
Right click the Index Page node and choose New Object List > [object-type]
Where [object-type] is the name of the Object Type you want to add.
An Object Type node is added to the Index Page.
-
Save your Site.
Add a Tab Controller to an empty Index Page
To add a Tab Controller to an empty Index Page:
-
Right-click on the Index Page node and choose New Tabs Controller
A new Tabs node is added.
-
Save your Site.
Related Topics
Use Page Queries and Filters to display just the objects you want
Use a Custom Display String to show more than just the object Name
Display your data using different Layouts and Behaviors
Create a Diagram Index Page
A Diagram Index Page is used to display either a single CW Modeler diagram, or a Visualization diagram.
Shapes in the diagram are clickable, linking through to the relevant Object Pages for the Object Type selected.
|
|
In order to display diagrams in Evolve Sites, you must ensure you have a template diagram in your model which has the same Rule and Category as the diagram you want to display. If you do not have an equivalent template diagram, the diagram will not be able to be displayed. |
|---|
What do you want to do?
Display a CW Modeler Diagram on an Index Page.
|
|
These instructions assume you know how to Create a basic Object List Index Page. |
|---|
To display a CW Modeler Diagram on an Index Page:
-
Create a new Index Page for the Object Type 'Diagram'.
-
On the 'Diagram' node, use the Filter Properties area to specify exactly which diagram you want to show.
We recommend you use the ID property as the reference and specify the ID of the diagram you want.
Remember that any properties you reference in the Filter Properties area should also be selected in the Selected Properties area.
-
Right-click the Layout node and choose Switch Layout > CW > Diagram.
-
Right-click the Layout node and choose Add Behaviors > CW Modeler Diagram.
-
On the CW Modeler Diagram node, use the Full Screen setting to specify that the diagram is displayed in full-screen mode.
-
Save your Site.
|
|
If you plan to publish your Site as a Static Site, you must ensure you use the Export Diagram Images option on the Site node settings toensure images of your diagrams are generated. |
|---|