Aug 05

 Nav

The Nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

WaveMaker Nav widget is used in the implementation of the default leftnav and rightnav when the page layout is chosen to include the same. Within an app, it can be used in two ways:

  1. Bind the dataset for the nav elements using the Value property and setting the Action Items by mapping the properties from the value dataset to the action properties such as label, icon, link, badge value, sub actions.
  2. Add Widgets: Provides widget to be added to the nav panels such as Anchor, Menu, Popover, Button. Depending upon the widgets added to the nav various properties can be set:
    1. Anchor: can have hyperlink to specify the destination link, target where the linked document should be opened
    2. Menu: can specify the layout, position and valueaction combination. Click here for more on menu usage
    3. Popover: can set the content source and content for further action. Click here for Popover usage.
    4. Button: on click event can be set for page navigation

Nav Types & Layouts

From the Properties panel,  you can set the Nav Types and Layout

Properties

Action IconClass for the icon. Choose from the options available based upon the structure of the Dataset Value.

Property Description
Name The name is a unique identifier for Nav widget.
Type Defines the display style, choose between navbarpills (default) or tabs.
Add Widget This action button allows you to add widgets within the Nav. The available options are Anchor, Menu, Popover, or Button.
Layout
Width The width of your widget can be specified in px or % (i.e 50px, 75%).
Height The height of your widget can be specified in px or % (i.e 50px, 75%).
Layout This property controls how contained widgets are displayed within this widget container. It can be stacked or justified
Dataset
Value Set this property to a variable to populate the list of values to display. It can be bound to any Variable
Order by This allows for multiple selections for ordering the display of rows based on fields in asc or desc order – up arrow for asc and down arrow for desc. The fields are auto-populated based upon the structure of Dataset Value
Actions
Action Label Label for menu items. Choose from the options available based upon the structure of the Dataset Value.
Action Icon Class for the icon for menu items. Example- ‘fa fa-ban’ or ‘glyphicon glyphicon-cloud’
Action Link Link for the anchor widget. Choose from the options available based upon the structure of the Dataset Value.
Action Task Task for nav items. This is the action that will be triggered when the user clicks on the Nav Item. It can be a script like: Variables.v1.invoke()
Execution order on click of Node:

  1. If provided onSelect will be executed first.
  2. If provided Action will be executed next.
  3. If provided Action link will be executed last.
User Role Role for menu items generated dynamically. You can assign a property to ‘userrole’ which contains comma separated user roles. Each item will be evaluated with given ‘userrole’ for that item to that of the logged in user roles, from security. If any of the user roles bound to ‘userrole’ property matches then that menu item will be shown else will be hidden.
Item Badge Badge value to be displayed. Choose from the options available based upon the structure of the Dataset Value.
Sub Actions When a menu widget is required the sub items can be mentioned in the children. Choose from the options available based upon the structure of the Dataset Value.
Behavior
Show Showing determines whether or not a component is visible. It is a bindable property.
Load on Demand
(visible only when show property is bound to a variable)
When this property is set and show property is bound, the initialization of the widget will be deferred till the widget becomes visible. This behavior improves the load time. Use this feature with caution, as it has a downside (as we will not be able to interact with the widget through script until the widget is initialized). When show property is not bound the widget will be initialized immediately.
Auto Close This property defines the behavior of menu closing, it can be:

  • outsideClick – close the menu when clicked outside of the menu,
  • always – when a menu item is selected or on click outside menu, or
  • disabled – do not close once opened.
Format
Horizontal Align Set text alignment horizontally.

Event

Each anchor widget events are available for adding functionality to this layout. For more on Anchor widget see here.

 
We use cookies to provide you with a better experience. By using our website you agree to the use of cookies as described in our Privacy Policy.