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.

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]">
        <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>
      ... more info elements
      <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>

Navbar structure

Element	Use	Multiples instances	Description
info	Optional	Yes	Graphical element to show information
info-button	Optional	Yes	Navbar button for execute task. Same as button element in Awe
info-criteria	Optional	Yes	Navbar criteria to get input from the user and send it to the application server (business logic) . Same as criteria element in Awe
avatar	Optional	Yes	Navbar component which shows the user image. It can be used as button or as navbar dropdown menu

info attributes

Attribute	Use	Type	Description	Values
id	Required	String	Info element identifier. For reference purposes
field	Optional	String	Name of model attribute to get value of target-action	Ex.: field="label" Get label attribute of target-action data result
title	Optional	String	Info static text show when over	Note: You can use i18n files (locales)
label	Optional	String	Info text (outside the criterion)	Note: You can use i18n files (locales)
style	Optional	String	Info CSS classes
dropdown-style	Optional	String	Info dropdown box CSS classes
icon	Optional	String	Icon identifier	Note: You can check all iconsets at icons screen
unit	Optional	String	Info unit. Use it with info icon to show a number as stacked style
session	Optional	String	Session variable to load the criterion	Session variable identifier
value	Optional	String	Info default value
property	Optional	String	Property variable to load the criterion	Property variable identifier
server-action	Optional	String	Server action call	See server action list
target-action	Optional	String	Target to call on the server

info-button attributes

Attribute	Use	Type	Description	Values
title	Optional	String	Static text show when over button	Note: You can use i18n files (locales)
info-style	Optional	String	Css style of info-button container

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

info-criteria attributes

Attribute	Use	Type	Description	Values
title	Optional	String	Static text show when over criteria	Note: You can use i18n files (locales)
info-style	Optional	String	Css style of info-criteria container	Ex.: info-style="form-group"

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

avatar attributes

Attribute	Use	Type	Description	Values
title	Optional	String	Static text show when over element	Note: You can use i18n files (locales)
show-label	Optional	Boolean	Whether to show or not the label next to the user image	The default value is true
image	Optional	String	Relative 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.

Note: in the React engine, the avatar shows the name of its value when it has one (the label stays as its hint), and its description as a second line under it. The connectedUser query returns the profile of the user as description. Without an image, the avatar shows its icon or, without icon, the initials of its label (the first letter of its first and last words).

Examples

• Navigation bar with some info elements and 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

<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 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

<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>