Header

Description

A header navigation bar with a branding on the left and the common menus on the right. You can customize what comes in the center with ng-transclude.

Usage

This widget depends an authentication service (provided in camunda-commons-ui - lib/auth).

Options

@ brand-name
The brand name for the application
@ app-name
The application name
@ current-app
Indicate on which app the user currently is (used to limit the choices in the app switch dropdown).
= authentication
can be passed to customize the dropdown menus (showing or not the account and limit the choices of apps the user can switch to according to its authorizations).
= user-name
can be passed to load user full name.
@? sign-out
a string to be place in the Log out link, by default: Log out.
@? toggle-navigation
a string to be place in the navigation toggle link, by default: Toggle navigation.
@? myProfile
a string to be place in the link to the user profile, by default: My profile.

Examples

Without content

<div cam-widget-header
     brand-name="Cammunda Commons UI"></div>

With content

<div cam-widget-header
     brand-name="Cammunda Commons UI">
  <ul>
    <li>
      <a href>Awesome</a>
    </li>
    <li class="active">
      <a href>Sweet</a>
    </li>
    <li>
      <a href>Marvellous</a>
    </li>
  </ul>
</div>

Anonymous

Should show the app switch dropdown with all the links except Admin.
<div cam-widget-header
     authentication="auth"
     brand-name="Cammunda Commons UI"
     current-app="{{ ctrlCurrentApp }}">
  You are on `{{ ctrlCurrentApp }}` app.
</div>
You are on `{{ ctrlCurrentApp }}` app.

Authenticated

Should show the app switch dropdown with a link to Admin.
<div cam-widget-header
     authentication="auth"
     my-profile="Your profile"
     sign-out="Log out"
     user-name="fullName"
     brand-name="Camunda Commons UI"
     current-app="{{ ctrlCurrentApp }}">
  <ul>
    <li>
      <a href>Awesome</a>
    </li>
    <li class="active">
      <a href>Sweet</a>
    </li>
    <li><!-- as in cockpit -->
      <view>
        <a href>Marvellous</a>
      </view>
    </li>
  </ul>
</div>
<div class="row">
  <div class="col-xs-12">
    testAuthenticatedController scope.ctrlCurrentApp: `{{ ctrlCurrentApp }}`<br />
    testAuthenticatedController scope.auth.authorizedApps: `{{ auth.authorizedApps }}`
  </div>
</div>
testAuthenticatedController scope.ctrlCurrentApp: `{{ ctrlCurrentApp }}`
testAuthenticatedController scope.auth.authorizedApps: `{{ auth.authorizedApps }}`

Authenticated on Welcome app

Should not show the app switch dropdown.
<div cam-widget-header
     authentication="auth"
     my-profile="Your profile"
     sign-out="Log out"
     user-name="fullName"
     brand-name="Cammunda Commons UI"
     current-app="welcome">
</div>

Authenticated, 1 app access

Should not show the app switch dropdown.
<div cam-widget-header
     authentication="auth"
     my-profile="Your profile"
     sign-out="Log out"
     user-name="fullName"
     brand-name="Cammunda Commons UI"
     current-app="tasklist">
</div>

Authenticated, 1 app access

Should only show the authorized (Tasklist) app link.
<div cam-widget-header
     authentication="auth"
     my-profile="Your profile"
     sign-out="Log out"
     user-name="fullName"
     brand-name="Cammunda Commons UI"
     current-app="admin">
</div>