In this article
The Page Navigator component enables the report viewer to move from one report page to another. The "default" type is Tree. You can choose between four different types of navigators. Double-click on the Navigator object to open its Properties page, then select the desired Navigator Type.
- Tree - displays links to the report pages in a tree structure.
- PrevNext- the viewer moves from page to page by clicking on the Previous and Next buttons.
- DropDown- displays links to the report pages in a drop-down menu.
- Menu- displays links to the report pages in a horizontal or vertical drop-down menu, where the top level report menu is displayed and the sub-items are accessed by clicking on the top level report items.
- CSS Menu - (default for Reportal v17.5) renders a more semantically correct UL/LI html structure instead of tables, making it easier to apply styles to the items in the menu.
Tree Navigator Type
The Tree component displays links to the report pages in a tree structure. The report viewer simply clicks the page they wish to view, and the Page Master Area (Page Target) updates automatically .
Figure 1 - Example of a Tree component
Double-click on the Navigator object to open its Properties page .
Figure 2 - The Tree navigator's properties
The properties are as follows:
- Clear Drilldown Path and Report Base - check this box if you want the drill-down path to be reset each time the viewer clicks on the navigator.
- Reset Report Parameters - check this box to reset all report parameters each time the viewer clicks on the navigator.
- Navigator Type - the layout for the navigation control the viewers use to move from page to page.
Previous/Next Navigator Type
This navigator contains buttons that enable the report viewer go to the previous page, the next page, the very first or very last page of the report, from the current page. The viewer can also type a page number into the field and go to any page in the report .
The Previous/Next navigation component
Double-click on the Navigator object to open its Properties page .
Figure 3 - The Previous/Next navigator type's properties
The properties are as follows:
- Clear Drilldown Path and Report Base - check this box if you want the drill-down path to be reset each time the viewer clicks on the navigator.
- Reset Report Parameters - check this box to reset all report parameters each time the viewer clicks on the navigator.
- Navigator Type - the layout for the navigation control the viewers use to move from page to page.
- Style - select the desired button style from the drop-down list. The styles available are defined in the Layout and Styles toolbox (go to HTML Styles for more information).
DropDown Navigator Type
This navigator component provides the report viewer with a drop-down menu, from which he/she can choose the page that is to be displayed .
Figure 4 - Example of the Dropdown component in use
Double-click on the Navigator object to open its Properties page .
Figure 5 - The Dropdown navigator type's properties
The properties are as follows:
- Clear Drilldown Path and Report Base - check this box if you want the drill-down path to be reset each time the viewer clicks on the navigator.
- Reset Report Parameters - check this box to reset all report parameters each time the viewer clicks on the navigator.
- Navigator Type - the layout for the navigation control the viewers use to move from page to page.
- Style - select the desired menu style from the drop-down list. The styles available are defined in the Layout and Styles toolbox (go to HTML Styles for more information).
Menu Navigator Type
This navigator component provides the report viewer with a drop-menu from which he/she can choose the page that is to be displayed .
Figure 6 - Example of a Drop menu navigation component in use
When you create a Menu navigation component, a property sheet with various layout settings is available . To access this page, right-click on the navigation component and select Properties.
Figure 7 - Example of the Menu component's Properties page
The properties are as follows:
- Include Admin Menu - check this box if you want the page navigator to include the Admin menu commands.
- Clear Drilldown Path and Report Base - check this box if you want the drill-down path to be reset each time the viewer clicks on the navigator.
- Reset Report Parameters - check this box to reset all report parameters each time the viewer clicks on the navigator.
- Navigator Type - the layout for the navigation control the viewers use to move from page to page.
- Look and Feel - choose among predefined styles of drop menus.
- Vertical Layout - the menu items/report pages are listed vertically.
- Collapse item borders - an HTML style that does not display all the borders. It is recommended to choose this option if Border Color has been specified, in order to avoid double borders.
- Show hierarchy level - check this box so that when a Personalized filter question property is chosen in Report properties, the hierarchy will be listed as an item in the menu. All levels in the hierarchy will be listed as sub-levels.
- Font family - specifies the font type that is to be used to display the menu items.
- Font size - defines the size of the characters in the menu items.
- Width - specifies the width of the container where the top elements are stored. The width can be specified in both pixels and percent. When you want to use percent, add the % symbol after the number. The top level menu items will be placed next to each other (depending on specifications in Top Item Spacing) when no width is specified.
- Top item spacing - specifies the spacing between the top-level items.
- Top item padding - specifies the padding around the top-menu items, that is, the space between the menu item text and the border.
- Text color - specifies the color of the text to be used in the menu items.
- Background color - defines the background color for the menu items.
- Hover-item background - defines the background color of the top-level menu items when the user holds the mouse pointer over the item.
- Selected-item background - defines the background color of the top-level menu items when the sub-items are displayed, that is, when the top-level item is selected.
- Selected-item text - defines the color of the top-level menu item text when the sub-items are displayed.
- Sub-item background - defines the background color of the sub-items.
- Sub-item hover background - defines the background color of the sub-items when the user holds the mouse pointer over the item.
- Sub-item hover text - defines the text color of the sub-items when the user holds the mouse pointer over the item.
CSS Menu Navigator Type
The CSS Menu Navigator type will render a more semantically correct UL/LI html structure instead of tables, making it easier to apply styles to the items in the menu. This navigator type will be set by default for new menus created.
The menu uses a YUI 3 component to control the menu behavior, and gives you several classes to control the layout; including a style to be applied to the selected item in the menu .
If you use this menu type, then it is recommended that you set your report to use the HTML 5 doctype (go to Report Master Property Sheet for more information).
Figure 8 - The CSS Menu navigator type's properties
The properties are as follows:
- Include Admin Menu - check this box if you want the page navigator to include the Admin menu commands.
- Clear Drilldown Path and Report Base - check this box if you want the drill-down path to be reset each time the viewer clicks on the navigator.
- Reset Report Parameters - check this box to reset all report parameters each time the viewer clicks on the navigator.
- Navigator Type - the layout for the navigation control the viewers use to move from page to page.
- Look and Feel - choose among a number of predefined styles of drop menus.
- Container Style Name - the style setting for the overall placeholder of the menu navigator component.
- Top-Item Style Name - the style setting for menu items at the top level (i.e. report pages not placed in folders).
- Sub-Item Style Name - the style setting for menu sub-items (i.e. report pages contained in folders or sub-folders).
- Hover Top-Item Style Name - the style setting for when the mouse cursor hovers over a top-level menu item.
- Hover Sub-Item Style Name - the style setting for when the mouse cursor hovers over a sub-level menu item.
- Selected Top-Item Style Name - the style setting for the selected (i.e. the active page) top-level menu item.
- Selected Sub-Item Style Name - the style setting for the selected (i.e. the active page) top-level menu item.
- Responsive layout - turns the menu into a drop-down list for screens smaller than 500px wide.
- Disable JavaScript - select to disable the YUI menu component, making the menu more or less static and allowing the designer to either apply a different JavaScript behavior, or control the menu completely by CSS.