erwin Evolve 2023.1.0 - User Guide

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:

1. Object listing pages, such as lists, grids, and accordions

2. Graphical pages, such as bar charts, maps, pie charts and roadmaps

3. Diagram pages, showing CW Modeler diagrams or visualization diagrams.

What do you want to do?

Create an Object List Index Page

Create an Empty Index Page

Create a Diagram Index Page

Create a Graphical 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.

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:

1. In Evolve Designer, expand the Site node.

2. Right-click the Index Pages node.

3. Select Add Index Page for Object Type.

4. 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:

1. Select the node for the Index Page

The right-hand panel shows the properties for the page

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

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

3. Save your Site.

The Index Page's properties are saved.

Related Topics

Use Page Queries and Filters to display just the objects you want

Use Tabs to present your data

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:

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

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

   

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

3. Save your Site.

Add an Object Type node to an empty Index Page

To add an Object Type node to an empty Index Page:

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

2. Save your Site.

Add a Tab Controller to an empty Index Page

To add a Tab Controller to an empty Index Page:

1. Right-click on the Index Page node and choose New Tabs Controller

A new Tabs node is added.

2. Save your Site.

Related Topics

Use Page Queries and Filters to display just the objects you want

Use Tabs to present your data

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.

What do you want to do?

Display a CW Modeler Diagram on an Index Page.

To display a CW Modeler Diagram on an Index Page:

1. Create a new Index Page for the Object Type 'Diagram'.

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

3. Right-click the Layout node and choose Switch Layout > CW > Diagram.

4. Right-click the Layout node and choose Add Behaviors > CW Modeler Diagram.

5. On the CW Modeler Diagram node, use the Full Screen setting to specify that the diagram is displayed in full-screen mode.

6. Save your Site.