Simple profile template

Description

The simple profile template renders the simplified version of the user profile. See the Header Widget documentation for an example.

Control classes

Class	Description	Required
mambo-ctrl-simple-profile	Identifies the container element for the simple profile. Used to position the profile in the center of the screen and reapplied whenever the screen is resized	No
mambo-ctrl-close	Detaches the simple profile from the DOM when clicked	No
mambo-ctrl-earn	Displays the "How do I earn points?" popup when clicked	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
userName	The user's name to be displayed, as determined by the Header Widget configuration	String
isLoading	Flag indicating whether user data is still loading. If true, the template will re-render once loading completes	Boolean
levelsLoading	Flag indicating whether levels are still loading. Once loaded, control classes are used to inject level information into the view	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

Implementation example

This example shows a basic simple profile template:

JavaScript

<script type="text/template" id="simple-template">
  <div class="mambo-ctrl-simple-profile">
      <%= ( !isLoading ) ? user.firstName : '' %>
      <div class="mambo-ctrl-close">Close</div>
      <div class="mambo-ctrl-earn">How do I earn points?</div>
  </div>
</script>

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

Customisation options

Consider these enhancements for your simple profile template:

• Adding user avatar or profile picture
• Displaying level progress bars
• Including achievement badges or recent rewards
• Showing total points across multiple point types
• Adding links to full profile or account settings