Click on Images to Expand Them
The Navigation Panel lists links to the pages of the wizard. It can be displayed at the top of the wizard (horizontal layout) or on the left side of it (vertical layout). The list displays either the page name or the label defined in Page Settings.
Note: In a horizontal layout, the pages are numbered in their defined order (as described in Configuring the Order of Pages). The currently open page is highlighted, and the previous pages are marked as complete.
Tip: To change the visual look and field of the Navigation Panel, use CSS and Global CSS tabs, and define custom styles.
Example of a horizontal Navigation Panel
Example of a vertical Navigation Panel
Example of a Navigation Panel with additional CSS
To configure a Navigation Panel for each of the pages that will appear in it, proceed as follows:
Step 1: Update Page Settings
1.1. Open the Wizard tab of the Docupace Start screen.
1.2. click on the name of the page in the Pages Tree
1.3. click the Page Settings button.
1.4. Configure these settings for each page in the wizard.
Configuring Page Settings
Setting | Description |
|---|---|
Enable in-page section based navigation | Select this checkbox to show a navigation panel on this page. |
Navigation panel layout | If Navigation panel is enabled, then there are two ways, how to display it to end-users. Options: vertical (on top of the page), horizontal (on the left side of the page). Tip: Use the same layout consistently for all pages within the wizard. Navigation that jumps from horizontal to vertical between pages of the same wizard will be confusing to the users. |
Show in navigation panel | Boolean JavaScript expression. If the result evaluates to TRUE, the page will be shown in the navigation panel. You may simply type If left empty or if the value will be false, the page will be excluded from the navigation list. |
Navigation panel label | A name used for this page in the navigation panel. If this field is left empty, by default page name will appear in the navigation panel. |
Navigation Panel Settings for a page
Step 2: Save the Changes
2.1. Save your work.
2.2 Close the Widget