Rewards & KPIs grid template

Description

The grid template renders lists of rewards and KPIs in the Profile Widget. It's used across multiple areas:

• KPIs
• Missions, Levels and Achievements
• Mission Details
• Custom Tabs

Control classes

Class	Description	Required
mambo-ctrl-card	Wrapper for each card in the grid	Yes
mambo-ctrl-close	Removes the mission rewards container when clicked (only when viewing mission details)	No
mambo-ctrl-flip	Applies a horizontal rotating transition to the parent card when clicked. Requires mambo-card-front and mambo-card-back classes	No
mambo-ctrl-progress	Wrapper for progress-related controls that can create expanding effects	No
mambo-ctrl-progress-header	When clicked, expands the progress details	No
mambo-ctrl-progress-details	Contains detailed progress information shown when header is clicked	No
mambo-ctrl-expired-header	Clickable area that displays expiration dates for rewards (used on card back)	No
mambo-ctrl-expired-details	Container for reward expiration dates	No
mambo-ctrl-date	Input element for the date picker used to filter KPIs by calendar date	No
mambo-ctrl-period-item	Element that provides period value for KPI filtering via data-period attribute (e.g., <div data-period="monthly">). Valid periods: daily, weekly, monthly, quarterly, yearly	No

Template data

Variable	Description	Type
grid	Information about the grid displaying the rewards list	Object
data	Array of missions, levels or achievements to display. See Users Reward APIs documentation for object details	Array
isLoading	Flag indicating whether data is still loading. The template re-renders when loading completes	Boolean
currentIdx	For levels: index of user's current level. For linear mission rewards: index of next reward to unlock	Integer
isDetails	True when displaying mission details	Boolean

Implementation example

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

JavaScript

<style type="text/css">
  .grid-item {
      margin: 3px;
      border: 1px solid #ccc;
      width: 150px;
      height: 50px;
  }
</style>

<script type="text/template" id="grid-template">
  <% if( isLoading ) { %>
      <div>Loading!</div>
  <% } else { %>
      <div>
          <% _.forEach( data, function( item, idx ) { %>
              <div class="mambo-ctrl-card" class="grid-card"><%= item.name %></div>
          <% }); %>
      </div>
  <% } %>
</script>

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

Customisation options

Consider these enhancements:

• Implementing card flipping animations for reward details
• Adding progress bars for missions and levels
• Creating filter controls for different reward types
• Adding sorting options for rewards
• Implementing responsive grid layouts