Skip to main content
Version: Next

Navigation Bar

The navigation bar is used to add visual elements with logic functions in the top zone of application. This part is displayed in all application screens.

You can add info elements to show more info and info-button elements as buttons with actions. Also, you can put info-criteria elements inside info elements as criteria for show more info.

You also can user avatar component to show the user image, and of course use it as dropdown menu.

NavBar

Xml structure

The xml structure of navigation bar component is the following:

<tag type="div" id="main-navbar-collapse" style="collapse navbar-collapse main-navbar-collapse">
<tag type="div" style="right clearfix">
<tag type="ul" style="nav navbar-nav pull-right right-navbar-nav">
<info id="[id]" icon="[icon]" title="[info-title]">
... more info elements
<info id="[id]" icon="[icon]" title="[info-title]">
<info-criteria id="[id]" icon="[icon]" title="[info-criteria-title]" component="[component]" initial-load="[initial-load]"
target-action="[target-action]" session="module" style="[style]" info-style="[info-style]">
<dependency/>
</info-criteria>
... more info criteria elements
</info>
<info-button id="[id]" icon="[icon]" title="[button-title]">
<button-action type="[action-type]" />
... more button.action
</info-button>
... more info-button
</tag>
</tag>
</tag>

Nabvar structure

ElementUseMultiples instancesDescription
infoOptionalYesGraphical element to show information
info-buttonOptionalYesNavbar button for execute task. Same as button element in Awe
info-criteriaOptionalYesNavbar criteria to get input from the user and send it to the application server (business logic) . Same as criteria element in Awe
avatarOptionalYesNavbar component which shows the user image. It can be used as button or as navbar dropdown menu

info attributes

AttributeUseTypeDescriptionValues
idRequiredStringInfo element identifier. For reference purposes
fieldOptionalStringName of model attribute to get value of target-actionEx.: field="label" Get label attribute of target-action data result
titleOptionalStringInfo static text show when overNote: You can use i18n files (locales)
labelOptionalStringInfo text (outside the criterion)Note: You can use i18n files (locales)
styleOptionalStringInfo CSS classes
dropdown-styleOptionalStringInfo dropdown box CSS classes
iconOptionalStringIcon identifierNote: You can check all iconsets at icons screen
unitOptionalStringInfo unit. Use it with info icon to show a number as stacked style
sessionOptionalStringSession variable to load the criterionSession variable identifier
valueOptionalStringInfo default value
propertyOptionalStringProperty variable to load the criterionProperty variable identifier
server-actionOptionalStringServer action callSee server action list
target-actionOptionalStringTarget to call on the server

info-button attributes

AttributeUseTypeDescriptionValues
titleOptionalStringStatic text show when over buttonNote: You can use i18n files (locales)
info-styleOptionalStringCss style of info-button container

Note: info-button element has other attributes as button element. You can see more info here.

info-criteria attributes

AttributeUseTypeDescriptionValues
titleOptionalStringStatic text show when over criteriaNote: You can use i18n files (locales)
info-styleOptionalStringCss style of info-criteria containerEx.: info-style="form-group"

Note: info-criteria element has the same attributes as criteria element. You can see more info here.

avatar attributes

AttributeUseTypeDescriptionValues
titleOptionalStringStatic text show when over elementNote: You can use i18n files (locales)
show-labelOptionalBooleanWhether to show or not the label next to the user imageThe default value is true
imageOptionalStringRelative or absolute of the image to use as avatar

Note: avatar element has the same attributes as button element. You can see more info here.

Examples

  • Navigation bar with some info elements and info button
Info-button
<tag type="div" id="main-navbar-collapse" style="collapse navbar-collapse main-navbar-collapse">
<tag type="div" style="right clearfix">
<tag type="ul" style="nav navbar-nav pull-right right-navbar-nav">
<info id="ButUsrAct" icon="user" field="Val" server-action="data" target-action="ConUsr"/>
<info-button id="ButLogOut" icon="sign-out" title="BUTTON_LOGOUT">
<button-action type="logout" />
</info-button>
</tag>
</tag>
</tag>
  • Navigation bar with one info with info-criteria elements
Info-criteria
<tag type="div" id="main-navbar-collapse" style="collapse navbar-collapse main-navbar-collapse">
<tag type="div" style="right clearfix">
<tag type="ul" style="nav navbar-nav pull-right right-navbar-nav">
<info id="ButUsrAct" icon="user" field="Val" server-action="data" target-action="ConUsr">
<info-criteria icon="image" title="PARAMETER_THEME" component="select" id="theme" initial-load="query"
target-action="ThmSelVal" session="theme" style="col-xs-12 no-label" info-style="form-group">
<dependency>
<dependency-element id="theme" />
<dependency-action type="server" server-action="maintain-silent" target-action="SesVarThm" silent="true" />
<dependency-action type="change-theme" target="theme" />
</dependency>
</info-criteria>
<info-criteria icon="language" title="PARAMETER_LANGUAGE" component="select" id="language" initial-load="enum"
target-action="Lan" session="language" style="col-xs-12 no-label" info-style="form-group">
<dependency>
<dependency-element id="language" />
<dependency-action type="server" server-action="maintain-silent" target-action="SesVarLan" silent="true" />
<dependency-action type="change-language" target="language" />
</dependency>
</info-criteria>
</info>
</tag>
</tag>
</tag>
  • Info with unit and dependencies
Info_unit
<info id="Dab" icon="database" unit="3" style="nav-icon-btn-success">
<dependency source-type="criteria-text" target-type="label" target-action="database" initial="true">
<dependency-element id="database"/>
</dependency>
</info>
  • Avatar element with dropdown
Avatar
<tag type="div" id="main-navbar-collapse" style="collapse navbar-collapse main-navbar-collapse">
<tag type="div" style="right clearfix">
<tag type="ul" style="nav navbar-nav pull-right right-navbar-nav">
<avatar id="ButUsrAct" image="/images/logo/logo-awe-nuevo.svg" icon="user" field="Val" server-action="data" target-action="ConUsr"/>
<info-button id="ButLogOut" icon="sign-out" title="BUTTON_LOGOUT">
<button-action type="logout" />
</info-button>
</tag>
</tag>
</tag>