Skip to content

Navigation

The Navigation component can be used as a menu for navigation between dashboard screens, or as a landing page to offer a selection of dashboards.

Basics

Screenshot

Selected Value
A View State Parameter for the selected button
Columns

Screenshot

The number of columns to use for button layout when buttons do not have Fixed Size checked. Each column represents a button and will autosize according to the width of the navigation component.

Fixed-size buttons

If buttons have Fixed Size checked, set Columns to 1.

Overflow

Scrollbar behavior for navigation tool bar:

Choice Behavior
Hidden No scroll bar and visible buttons determined by component size.
Auto Best fit of Navigation buttons with vertical scroll bar if required.
Scroll Best fit of Navigation buttons include two scroll bars for vertical and horizontal axis.
Overflow Best fit of Navigation buttons with reordering on rescale.
Use Data Source
When checked, buttons are generated from the Data Source and the Data Source Mapping
Data Source
A data source
Data Source Mapping

All of the following variables must be mapped to columns in the Data Source.

variable description
Icon URL Reference for icon image
Header Text Descriptive header text for Navigation Button
Content Text Main body text for Navigation Button
TargetDashboardId Reference ID of Target Dashboard; e.g. 'New Dashboard'
TargetScreenId Reference to Screen of Target Dashboard; e.g. 'Screen 1'
ButtonColor Hex color reference to background button color; e.g. '#ffffff'
IconColor Hex color reference to icon color; e.g. '#ffffff'
BorderColor Hex color reference to border color; e.g. '#ffffff'
TextColor Hex color reference to text color; e.g. '#ffffff'

Action

Actions

Viewstate mapping

Screenshot

Viewstate Mapping transfers values of View State Parameters from the source dashboard to View State Parameters in destination dashboards.

Create destination View State Parameters first

Viewstate Mapping can only map to existing View State Parameters in the destination dashboard; it does not create them.

Button defaults

Where buttons are not generated from a Data Source, they can be defined individually from the Buttons dialog: Button Defaults are applied across all of them.

Screenshot
Example buttons

Screenshot

Layout

The orientation order for icons and text

layout position
North-South Icon aligned on top with text beneath
South-North Icon aligned underneadth text
East-West Icon left aligned, text to right
West-East Icon right aligned, text to left

The relative positioning of icons and text depends also on the button size as icon and text are wrapped within the button width.

Alignment
Alignment of buttons inside Navigation component: left, right or center
Background
Background color of button
Button Margin
Space (in pixels) around outside of button
Icon Margin

Space (in pixels) around icon, within the button

Disappearing button text

Icon margins can put text ‘out-of-view’ in the button. If combining icon and text, keep icon margins small.

Button Padding
Defines space (in pixels) between button icon and text and the border of the button.
Border Width, Border Color, Border Rounding

Screenshot
Example: Border Width: 1; color: #ffffff; Rounding: 10

A button’s border appears inside its edges. Its width is set in pixels. Rounding sets in pixels the radius of its corners

Text %
Percentage of the button width allocated to Content Text. The default value of 75% means button text will occupy three quarters of the width of the button.
Text Color
Text color for Content Text
Icon Color
Icon color
Icon Size
Icon size in pixels
Align Position
Alignment of text and icons inside the button
Show Tooltip
When checked, a tooltip is shown. The tooltip is configured in Navigation in the Style dialog.
Fixed size

When Fixed Size is checked, buttons will have the height and width given (in pixels) Fixed Width and Fixed Height.

If Fixed Size is not checked, the number of buttons will be determined by Columns in Basics and the height of the Navigation panel.

Buttons

Details of individual buttons

Screenshot

Open Dashboard on Select
Have the button open a different dashboard – or a screen in <this>, the current one.
Customizing the dashboard
Icon
Screenshot
Header Text
Bold header text for the button
Content Text
Body text beneath Header Text, displayed within the widthset by Text % in Button Defaults.
Dashboard Info
(Not currently in use)
Customization

When Customize is checked, the Button Defaults are overridden by Button Color, Icon Color, Border Color, and Text Color.

Updating button defaults

If Button Defaults are later updated they will overwrite individual customizations. Best to customize individual buttons after Button Defaults are complete.

Style

Custom tooltips

Margins, Format

Style for common settings