Use Tabs to Present your Data
Tabs are used as a way of grouping and controlling the way you present different information in your Index Pages and Object Pages.
For example, on an Object Page, you might have a Tab showing the General properties of an object, then use another Tab to show a list of Associated Objects, or Diagrams that the object appears on.
On an Index Page you might want to display some charts and a Table, offering different views of the same information.
By using Tabs you can include much more information than the basic object list or object details, but all content on the page must be displayed on a Tab.
|
|
Please note that having multiple Tabs each referencing different Object Types could impact the performance of your page, so we recommend being careful about not overloading the page with content. |
|---|
What do you want to do?
Add Tabs to an Object Page
|
|
These instructions assume you do not yet have any Tabs, but you do have a clean Object Page node, with an Object Type node already set to an Object Type, and a Layout set to Object Page. |
|---|
To add Tabs to an Object Page:
-
Under the Object Page node, right-click the Object Type node and choose New Tab Controller.
A new Tab node is added to the tree.
-
Select the Tab node and use the Side drop-down to choose whether you want the tabs to be displayed Horizontally or Vertically in your page.
-
Right-click the Tab node and choose New Tab
A new Tab titled 'Tab' is added to the tree
-
Select the 'Tabo' node and edit the Tab Name to what you want to be displayed in the web page.
Repeat steps 3 to 4 to add multiple Tabs to your page.
-
Save your Site.
Add content to a Tab on an Object Page
Once you have one or more Tabs, you can choose what content to display in them. Within a Tab you can display Property Groups, or Associated Objects displayed as a list, Table, or other layout option.
When you add new content, you use the Tab itself as the parent node.
See Working with Property Groups to find out how to add Property Groups to a Tab.
See Working with Layouts and Behaviors to find out the different display options within Object Pages.
Add Tabs to an Index Page
|
|
You cannot add Tabs to an Index Page that already includes content - you must either Delete the existing content first, or create a new Index Page. |
|---|
If you want to add Tabs to an Index Page, the Tab node must be the top-level node for that page in Evolve Designer.
There are two ways to achieve this:
-
Create a new Index Page, but instead of using the Add Index Page for Object Type option, use Add Index Page
-
Use an existing Index Page, but Delete the Object Type node and everything below it - do this by right-clicking the Object Type node and choosing Delete. All previous content will be lost if you do this.
|
|
The instructions below assume you have a clean Index Page node with no other nodes beneath it. |
|---|
To add Tabs to an Index Page:
-
Right click the Index Page node and choose New Tabs Controller.
A Tabs node is added below the Index Page node.
-
Select the Tabs node and use the Side drop-down to specify whether you want the Tabs to be displayed Horizontally or Vertically on the page.
-
Right-click the Tabs node and choose New Tab.
A new Tab node is added.
-
Select the Tab node and use the Tab Name field to specify the name of the Tab as you would like it too be displayed in the web page.
-
Right-click the Tab node and choose New Object List > [object-type]
An Object Type node and a Layout node are created.
-
Save your Site.
You can now configure the content in the same way as you would for a normal Index Page without Tabs.
Add content to a Tab on an Index Page
Once you have a Tab on an Index Page, you must create an Object Type node for the Tab - until you have an Object Type node you cannot add any content.
To do this:
-
Right-click the Tab node and choose New Object List > [object-type]
An Object Type node and a Layout node are created.
Once you do have an Object Type node, you can add content just as you would for any Index Page.
See Working with Layouts and Behaviors for instructions on adding the different content types.
Add a new Tab to an existing Tabs Controller
To add a new Tab to an existing Tabs Controller:
-
Right-click on the Tabs node and choose New Tab
A new Tab is added to the bottom of the list of Tabs.
Change the order of Tabs in your page
You can change the order of Tabs in your page by dragging and dropping Tabs to the parent Tab node. When you do this, the Tab you moved is placed at the bottom of the list. By dragging and dropping Tabs in the same order you want them to appear on the page, you can make the tree show them in the correct order.
Delete a Tab
To Delete a Tab:
-
Right-click the Tab you want to delete and choose Delete.
A confirmation dialog is displayed.
-
Click Yes.
The Tab is deleted.