Navbar

The Navbar component wraps a bootstrap navbar (see here for details) into a component usable directly from within Servoy.

Navbar

A Navbar is a simple navigation bar that offers

• an optional branding logo on the left (the Servoy logo in the example above)

• an optional branding text on the left ("Servoy Navbar" in the example above)

• two bars with any number of

• plain texts

• single clickable menu entries

• dropdown menus showing a menu (one level)

• buttons

• text fields (optionally as type aheads)

One of the two bars is aligned to the left, the other to the right. Either one or both can be set.

Each item in the bar is a MenuItem javascript object with a position ("LEFT" or "RIGHT") and a displayType (e.g. "BUTTON") that controls how the single entry is displayed. Depending on the displayType a MenuItem's properties can have component specific meaning (for example the text property is used as placeholder text for an input field).

Content under construction

Table of contents

• Navbar properties

• MenuItem type

  • Display type MenuItem

  • Display type Text

  • Display type Button

  • Display type Input

  • Display type Inputgroup

• SubMenuItem type

• Navbar events

• Navbar API

Navbar properties

Navbar properties can be found here.

Custom types of the Navbar component can be found here.

MenuItem type

MenuItem is a custom type of the Navbar component describing an entry in the navbar. MenuItem properties can be found here.

Display type MenuItem

Simple clickable entry in the navbar.

Example with just the text:

MenuItem Text

Example with icon and submenus:

MenuItem Dropdown

Example of an opened submenu:

MenuItem Dropdown opened

For an item of displayType "MENU_ITEM" the MenuItem properties are used as:

Property	Usage
dataProvider	not used
iconName	icon to the left of the entry's name
inputButtonStyleClass	not used
inputButtonText	not used
subMenuItems	When set, the item will be shown as a dropdown menu
valuelist	not used
onAction	Fired when the user clicks on the item or selects an item from the dropdown menu

Display type Text

Plain text shown in the bar:

Text

For an item of displayType "TEXT" the MenuItem properties are used as:

Property	Usage
dataProvider	not used
iconName	icon to the left of the entry's name
inputButtonStyleClass	not used
inputButtonText	not used
subMenuItems	not used
valuelist	not used
onAction	not fired

Display type Button

A normal button.

Example with text "Button 1", iconName "glyphicon glyphicon-camera" and styleClass "btn-primary":

Button

For an item of displayType "BUTTON" the MenuItem properties are used as:

Property	Usage
dataProvider	not used
iconName	icon to the left of the entry's name
inputButtonStyleClass	not used
inputButtonText	not used
subMenuItems	not used
valuelist	not used
onAction	fired when the user clicks on an item
styleClass	Button style class. Typically one of bootstraps button classes ("btn-default", "btn-primary", "btn-success", "btn-info", "btn-warning", "btn-danger", "btn-link"). Default is "btn-default".

Display type Input

An item of type "INPUT" adds a text field to the navbar. The text field can have an optional button grouped next to it when the inputButtonText or iconName (or both) property is set.

Example with iconName and inputButtonText:

Input

For an item of displayType "INPUT" the MenuItem properties are used as:

Property	Usage
dataProvider	used to assign the dataprovider of the field
iconName	When set a button with that icon is shown next to the input field. Any glyhicon or font awesome icon can be used (e.g. "glyphicon glyphicon-search" or "fa fa-car").
inputButtonStyleClass	Used for the optional button. Typically one of bootstraps button classes ("btn-default", "btn-primary", "btn-success", "btn-info", "btn-warning", "btn-danger", "btn-link"). Default is "btn-default".
inputButtonText	When set a button with the text is shown next to the input field.
subMenuItems	not used
valuelist	When set, the input will show a typeahead list.
onAction	fired when the user hits enter in the field, leaves the field or clicks on the optional button next to the field.

Display type Inputgroup

An item of type "INPUT_GROUP" behaves the same as INPUT except that the field is rendered along with optional button as an inputgroup. There is no spacing between the field and the button.

Example with iconName and inputButtonText:

Inputgroup

SubMenuItem type

SubMenuItem is a custom type of the Navbar component describing an entry of a submenu of a MenuItem of displayType MENU_ITEM. SubMenuItem properties can be found here.

Navbar events

Navbar events can be found here.

Navbar API

Navbar API methods can be found here.

setMenuItems

Sets all menu items of the navbar. The branding remains untouched.

Example code

var menuItems = [];

menuItems.push({itemId: '1', text: 'Accounts', tooltip: 'Accounts'});
menuItems.push({itemId: '2', text: 'Invoices', tooltip: 'Invoices'});
menuItems.push({itemId: '3', text: 'Click me', displayType: 'BUTTON', tooltip: 'Button'});
menuItems.push({text: 'Payables', tooltip: 'Payables'});
menuItems.push({itemId: '5', text: 'Search account...', displayType: 'INPUT', iconName: 'glyphicon glyphicon-search', tooltip: 'Search'});
menuItems.push({itemId: '6', text: 'Menu', position: 'RIGHT', tooltip: 'A submenu', subMenuItems: [{itemId: '6.1', text: 'Action'}, {itemId: '6.2', text: 'More action'}, {isDivider: true}, {itemId: '6.3', text: 'Last action'}]});
menuItems.push({itemId: '7', text: 'Logged in as John Doe', tooltip: 'just text', displayType: 'TEXT', position: 'RIGHT'});

elements.navbar.brandText = 'Accounting';
elements.navbar.setMenuItems(menuItems);

addMenuItem

Adds the given item to the navbar.

Example code

/** @type {bootstrapextracomponents-navbar.menuItem} */
var itemToAdd = {
	itemId: application.getUUID().toString(), 
	text: 'Item added'
}
elements.navbar.addMenuItem(itemToAdd);

removeMenuItem

Removes the item with the given itemId from the bar.

setMenuSelected

Sets the item with the given ID as selected (sets the isActive property). Items of type MENU_ITEM will be rendered with a different background color when selected.

getSelectedMenu

Returns the currently selected menu item.

Related Articles

The following articles are recommended for additional reading

• Navbar Reference Documentation

• Styling and Themes

• Scripting the UI