Header template

Description

The header template is used by the Header Widget.

Control classes

Class	Description	Required
mambo-ctrl-level	Indicates the element where the current level name should be injected	No
mambo-ctrl-simple-profile	When clicked, displays the Simple Profile with a summary of the user's primary level and points	No

Template data

Variable	Description	Type
user	The user data object containing all basic user information. For complete details, refer to the User API documentation	Object
isLoading	Flag indicating whether user data is still loading. If true, the template will re-render once loading completes	Boolean
primaryLevel	Contains progress information for the primary level (defined using levelGroups in widget initialisation). Includes current level, next level, percentage progress and more	Array
points	List of points unlocked by the current user	Array
userName	The user's name to be displayed, as determined by the Header Widget configuration	String

Implementation example

This example shows a basic header template with loading state handling:

JavaScript

<script type="text/template" id="header-template">
  <% if( isLoading ) { %>
      <div>Loading!</div>
  <% } else { %>
      <div class="mambo-ctrl-level">
          <%= ( primaryLevel && primaryLevel.curr && primaryLevel.curr.name  ) 
            ? primaryLevel.curr.name : '' %>
      </div>
      <% _.forEach( points, function( pt, idx ) { %>
          <div><%= pt.pts %> <%= pt.units %></div>
      <% }) %>
  <% } %>
</script>

<script type="text/javascript">
  // Use the Mambo Callbacks array
  var mamboCallbacks = window.mamboCallbacks || [];
  mamboCallbacks.push(function() {
      // Override the default Header template
      Mambo.updateTemplate( Mambo.Template.header, Mambo('#header-template').html() );
  });
</script>

Customisation options

Consider these enhancements for your header template:

• Adding profile images or avatars
• Including progress bars for level advancement
• Displaying recent achievements or rewards
• Adding interactive elements like dropdown menus
• Implementing responsive design for different screen sizes