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.
- Selected Value
- A View State Parameter for the selected button
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.
If buttons have Fixed Size checked, set Columns to 1.
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'
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.
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.
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 of buttons inside Navigation component: left, right or center
- 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
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.
Details of individual buttons
- Open Dashboard on Select
- Have the button open a different dashboard – or a screen in
<this>, the current one.
Customizing the dashboard
- 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)
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 for common settings