DecSoft App Builder

Navbar description

The Navbar control allows to show a navigation bar into the app views or app frames. The navigation bar can have any number of items and subitems. It's responsive and customizable with the properties that you can see below.

There is a Navbar sample app included with the installation of DecSoft App Builder. Take a look to see this control in action!

Navbar CSS rules

This control has a default style, and, some control JavaScript properties (see below), can also changes the control style, not to mention the Classes property, that you can use to establish one or more CSS classes to be applied to the control.

In addition to that style, you can also set custom CSS rules for the control by using the IDE controls style inspector. If this is not enough, you can include any number of CSS stylesheets in the app by using the app files manager.

If you want to use CSS stylesheets, you need to know how to refer to the control, so take a look at the Runtime selectors help topic.

Navbar at designtime

The Navbar control put at your disposition the below designtime properties or variables. Designtime means here that these properties are only available in designtime and not in runtime.

Navbar at runtime

The Navbar control put at your disposition the below runtime properties or variables. You can set almost all these variables in designtime, and, they are also available to be use when the app is running. Note that we named here these variables in a capitalized way, because is like you can see it in the designtime control's inspector, however, at runtime we use the lower camel case way.

Navbar events

The Navbar control put at your disposition the below events handlers:

Navbar designtime properties

Navbar Top property

Designtime. Integer variable. The Top property stores the top position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Navbar Left property

Designtime. Integer variable. The Left property stores the left position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Navbar Width property

Designtime. Integer variable. The Width property stores the width of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Navbar Height property

Designtime. Integer variable. The Height property stores the height of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Navbar Locked property

Designtime. Boolean variable. The Locked property determines if the control can be moved or resized in app view designer or not. Set a "false" value mean the control can be moved and resized. Set a "true" value (by default) mean the control cannot be moved nor resized. Remember that this control property is only for designtime and is not available in runtime.

Navbar runtime properties

Navbar Name property

Runtime. String variable. The Name control property stores the name of the Navbar control as you set in designtime. The Name property value must be unique for the same app view, dialog or frame, that is, it's possible to have more than one "navbar1" in the app, if that controls resides in different app views, dialogs or frames. Note that you must consider this variable as read only: change the name of a control in runtime can cause unexpected results.

Navbar Items property

Runtime. Array of objects variable. The Items control property stores all the items and subitems of the Navbar control. This variable is an array of objects, since every Navbar item must be an object. You can set this property at runtime, but, also at designtime, by using the Navbar Items dialog These objects / items can have the below properties:

Name Type Description
text String Mandatory. It's the item's text, like you want to show in the Navbar.
class String Optional. One or more separated CSS classes to be applied to the item.
icon String Optional. One of the available Fontawesome icon classes, eg. "fas fa-info-circle".
items Array of objects Optional. One or more subitems to be show below the item.

As you can see in the above table, every Navbar "item" can optionally contain one or more "subitems". These subitems can have the below properties:

Name Type Description
text String Mandatory. It's the subitem's text, like you want to show in the Navbar.
class String Optional. One or more separated CSS classes to be applied to the subitem.
icon String Optional. One of the available Fontawesome icon classes, eg. "fas fa-info-circle".
disabled Boolean Optional. You can set this variable to "true" in order to disable the subitem. Disabled elements cannot be clicked by the user.
actived Boolean Optional. You can set this variable to "true" in order to made the subitem appear activated (with a different background color).
Note something important: above you can see the mandatory and optional Navbar items properties, however, you can add your own properties to this items too. So, in the ItemClick event, you can access to the pressed item properties, including your own ones.

Navbar Item property

Runtime. Object variable. This variable is "null" by default, but, it's filled with the pressed Navbar Item in the ItemClick event. Take a look at the Items property, in which you can see the mandatory and optionals properties for every item in the Navbar control.

Navbar ItemIndex property

Runtime. Number variable. This variable is "-1" by default, but, it's filled with the pressed Navbar Item index in the ItemClick event. This item index is the index (starting by zero) of the pressed item, in the Navbar Items property.

Navbar ItemSubindex property

Runtime. Number variable. This variable is "-1" by default, but, it's filled with the pressed Navbar Subitem index in the ItemClick event. This subitem index is the index (starting by zero) of the pressed subitem.

Navbar Size property

Runtime. String variable. "lg" (large) by default. This property determines the responsive breakpoint size of the Navbar control, and, you can set it by using one of the available app Size constant values.

Navbar Color property

Runtime. String variable. This variable is a empty string by default, means the Background property is used instead of any other color. If you wanted, can set this variable to an HTML color string ("red", "#FFFF00"), in order to apply that color to the Navbar control, ignoring the Background property.

Navbar Background property

Runtime. String variable. This property determines the background color of the Navbar control, and, you can set it by using one of the available app Kind constant values. This property can be overwrite if you set the Color property.

Navbar Position property

Runtime. String variable. This property determines the position of the Navbar control, and, you can set it by using one of the available app NavbarPos constant values.

Runtime. String variable. This property determines the style of the Navbar control, and, you can set it by using one of the available app NavbarStyle constant values.

Navbar BrandText property

Runtime. String variable. The BrandText property stores the optional "brand text" to be show at the left of the Navbar control.

Navbar BrandImageUrl property

Runtime. String variable. The BrandImageUrl property stores the "brand image" URL, which is show at the left of BrandText property. Note this image must have a predetermined size of 30x30 pixels.

Navbar Event property

Runtime. Mixed variable. The Event control property stores the "event" variable received in all the control events. This variable can contain the target (HTML element of the control) that fire the event and more useful stuff.

Navbar Title property

Runtime. String variable. The Title control property stores some small but descriptive text, mainly to be used to be show that text when the user place the mouse cursor into the control.

Navbar Classes property

Runtime. String variable. The Classes control property stores one or more additionals CSS classes (space separated) to be applied to the control.

Navbar Hidden property

Runtime. Boolean variable. The Hidden control property determines if the control appear visible to the user or not. Set to "true" to hide the control, or to "false" to show the control (by default).

Navbar events

Navbar ItemClick event

The ItemClick event handler is fired when the user click in one of the Navbar items. The pressed item is stored in the Navbar Item property. See also the available events variables.

Navbar BrandClick event

The BrandClick event handler is fired when the user click in the Navbar brand text or brand image. See also the available events variables.

Navbar ToggleClick event

The ToggleClick event handler is fired when the user click in the Navbar brand Toggle button, which is used to show and hide the Navbar items. See also the available events variables.

Navbar Click event

The Click event handler is fired when the user click or tap into the Navbar control. See also the available events variables.

Navbar DblClick event

The DblClick (Double Click) event handler is fired when the user double click or double tap into the Navbar control. See also the available events variables.

Navbar MouseUp event

The MouseUp event handler is fired when the user up the mouse into the Navbar control. See also the available events variables.

Navbar MouseDown event

The MouseDown event handler is fired when the user down the mouse into the Navbar control. See also the available events variables.

Navbar MouseMove event

The MouseMove event handler is fired when the user move the mouse into the Navbar control. See also the available events variables.

Navbar MouseEnter event

The MouseEnter event handler is fired when the user enter the mouse into the Navbar control. See also the available events variables.

Navbar MouseLeave event

The MouseLeave event handler is fired when the user leave the mouse from the Navbar control. See also the available events variables.

Navbar ContextMenu event

The ContextMenu event handler is fired when the browser must shown the context menu of the the Navbar control, which occur when the user click with the right mouse button into the Navbar control. See also the available events variables.

Navbar events variables

The below JavaScript variables are available in all the referred Navbar control events handlers:

Name Type Description
event Mixed This variable is received in almost all control events. You can use this variable to stop the propagation of the event, to access the HTML element who fire the event and more.
self Object Stores the control object. This is a shortcut to the control variable, and it's available since we are talking about specific control events.
view Object

Stores the current app view or dialog. This variable allow us to access to that view or dialog properties and methods and also their controls properties and methods. For example, you can access to a control properties using the variable "view.yourControlName", suposing the control is named "yourControlName".

views Object Stores all the loaded app views. Note that loaded views mean that the app views has been previously show to the user. It's possible to access to the app view controls properties like "views.view1.yourControlName", suposing the view is named "view1" and the control is named "yourControlName". In the same way we can access to other controls of the view and to other loaded views and their controls.
frames Object Stores all the app frames. You can use this variable to access to all the app frames and their controls.
dialogs Object Stores all the app dialogs. You can use this variable to access to all the app dialogs and their controls.
app Object Stores all the app properties and methods. You can use this variable to access to all the app properties and app methods.