Overview

The page hierarchy establishes a parent-child relationship between the pages in the application. Portofino uses the parent-child concept to support two navigation/visualization modes:

The following table compares the two modes.

  Child pages in navigation Embedded child pages
Visual appearance of the child pages in the parent page Child pages listed in the parent's sidebar Child pages visually embedded as components inside the parent  page
URLs Each parent/child page has a distinct URL One URL only (the parent's URL)
From the parent to a child page Click on the child page's link in the parent's sidebar View the child page directly in the parent page
Viewing the child page On its own page Embedded in the parent page

Apart from the differences, all parent or child pages behave in the same way as far as interaction and configuration are concerned, regardless of the navigation/visualization mode.

To manage child pages, visit the parent page and click on the "Page children" button in the editor's toolbar. 

 

Child pages in navigation

Child pages in navigation allow you to display a child in the parent's sidebar.

Consider the following example. Each project has a number of associated issues. The project's page is the parent. The list of issues is the child page. The child page is listed as a link in the parent page's sidebar, as shown in the picture below. 

To set up this configuration you must select the "show in navigation?" checkbox and deselect the "embed in parent?" checkbox.

Embedded child pages

Embedded child pages allow you to display a child page embedded inside the parent page.

Consider the following example. Each project has a number of associated issues. The project's page is the parent. The list of issues is the child page. Embedding the child page makes it visible directly in the parent's page, as shown in the picture below.

To set up this configuration you must deselect the "show in navigation?" checkbox and select the "embed in parent?" checkbox.

 

You can use embedded child pages to create rich dashboards. A dashboard is a composition of several charts, reports or visual components in single page, usually arranged in a two-column layout.

To create a dashboard you must:

  • Create a page for the main component of the dashboard. Often, the main component is simply a text page with a help message.
  • Create a child page for all the other components of the dashboard (charts, etc).
  • On the parent page, click on "Page children" in the editor's toolbar and set all child pages as embedded.
  • Arrange the components in a layout.

 

Changing the order of child pages

When child pages are marked as "show in navigation", they are listed in the sidebar. To change the order in which they appear, drag and drop the rows according to your needs. 

Deactivating child pages

To completely deactivate a child page so that it no longer responds to its URL, uncheck the Active checkbox.