Top User List Template | Communifire Documentation

The Top User List template displays a leaderboard. The template is a built-in template and comes with your Communifire site. To use the template:

1. Add a People Widget on a Page Builder page
2. Edit the widget
3. Set the type to Top People List
4. Select the Top User List template in the Template tab

Template HTML

Below is the HTML of this template, for your reference.

<div class="axero-widget {{CustomCSSClass}}{{#if HideContainerBorder}} axero-widget-no-border{{/if}}">

    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
        <h3>{{{WidgetTitle}}}</h3>
    </div>
    {{/if}}
    
    <div class="axero-widget-content">
            <ul id="widgetTabs{{WidgetID}}" class="nav nav-tabs">
              <li {{#if (compare Contents.TopUsersActiveTab '==' 4)}}class="active" {{/if}}><a href="#alltime{{WidgetID}}" data-toggle="pill" data-range="4">{{Resources.TopContributorsAllTimeText}}</a></li>
              <li {{#if (compare Contents.TopUsersActiveTab '==' 3)}}class="active" {{/if}}><a href="#lastthirtydays{{WidgetID}}" data-toggle="tab" data-range="3">{{Resources.TopContributorsLastThirtyDaysText}}</a></li>
              <li {{#if (compare Contents.TopUsersActiveTab '==' 2)}}class="active" {{/if}}><a href="#thisweek{{WidgetID}}" data-toggle="tab" data-range="2">{{Resources.TopContributorsThisWeekText}}</a></li>
              <li {{#if (compare Contents.TopUsersActiveTab '==' 1)}}class="active" {{/if}}><a href="#today{{WidgetID}}" data-toggle="tab" data-range="1">{{Resources.TopContributorsTodayText}}</a></li>
            </ul>
            
            <div id="widgetTabsContent{{WidgetID}}" class="tab-content">
              <div class="tab-pane fade list {{#if (compare Contents.TopUsersActiveTab '==' 4)}} active in{{/if}}" id="alltime{{WidgetID}}">                
                
                <ul class="axero-top-contributors">
                   {{#each Contents.AllTime}}
                    <li>
                        <div class="axero-section-list-avatar">
                            <a href="{{ProfileURL}}" title="{{{UserInfoDisplayName}}}">
                                <img alt="{{{UserInfoDisplayName}}}" src="{{AvatarImageURL}}"></a>
                        </div>
                        <div class="axero-section-list-content">
                            <div class="axero-top-contributors-user-name">
                                <a class="axero-user-card-link" href="{{ProfileURL}}" data-pjax="" data-user="{{UserID}}">{{{trim UserInfoDisplayName ../TitleCharacterLength}}}</a>
                            </div>
                            <div class="axero-top-contributors-user-rank">
                                <img alt="{{{RankName}}}" src="{{RankImage}}">&nbsp;<span class="axero-user-rank-name">{{{RankName}}}</span> {{Points}} {{../Resources.GlobalPointText}}               
                            </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>               
                
              </div>
              <div class="tab-pane fade list {{#if (compare Contents.TopUsersActiveTab '==' 3)}} active in{{/if}}" id="lastthirtydays{{WidgetID}}">
                <ul class="axero-top-contributors">
                   {{#each Contents.LastThirtyDays}}
                    <li>
                        <div class="axero-section-list-avatar">
                            <a href="{{ProfileURL}}" title="{{{UserInfoDisplayName}}}">
                                <img alt="{{{UserInfoDisplayName}}}" src="{{AvatarImageURL}}"></a>
                        </div>
                        <div class="axero-section-list-content">
                            <div class="axero-top-contributors-user-name">
                                <a class="axero-user-card-link" href="{{ProfileURL}}" data-pjax="" data-user="{{UserID}}">{{{trim UserInfoDisplayName ../TitleCharacterLength}}}</a>                         
                            </div>
                            <div class="axero-top-contributors-user-rank">
                                <img alt="{{{RankName}}}" src="{{RankImage}}">&nbsp;<span class="axero-user-rank-name">{{{RankName}}}</span> {{Points}} {{../Resources.GlobalPointText}}               
                            </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>               

              </div>
              <div class="tab-pane fade list {{#if (compare Contents.TopUsersActiveTab '==' 2)}} active in{{/if}}" id="thisweek{{WidgetID}}">
                <ul class="axero-top-contributors">
                   {{#each Contents.ThisWeek}}
                    <li>
                        <div class="axero-section-list-avatar">
                            <a href="{{ProfileURL}}" title="{{{UserInfoDisplayName}}}">
                                <img alt="{{{UserInfoDisplayName}}}" src="{{AvatarImageURL}}"></a>

                        </div>
                        <div class="axero-section-list-content">
                            <div class="axero-top-contributors-user-name">
                                <a class="axero-user-card-link" href="{{ProfileURL}}" data-pjax="" data-user="{{UserID}}">{{{trim UserInfoDisplayName ../TitleCharacterLength}}}</a>                         
                            </div>
                            <div class="axero-top-contributors-user-rank">
                                <img alt="{{{RankName}}}" src="{{RankImage}}">&nbsp;<span class="axero-user-rank-name">{{{RankName}}}</span> {{Points}} {{../Resources.GlobalPointText}}                
                            </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>               
              </div>
              <div class="tab-pane fade list {{#if (compare Contents.TopUsersActiveTab '==' 1)}} active in{{/if}}" id="today{{WidgetID}}">
                <ul class="axero-top-contributors">
                   {{#each Contents.Today}}
                    <li>
                        <div class="axero-section-list-avatar">
                            <a href="{{ProfileURL}}" title="{{{UserInfoDisplayName}}}">
                                <img alt="{{{UserInfoDisplayName}}}" src="{{AvatarImageURL}}"></a>
                        </div>
                        <div class="axero-section-list-content">
                            <div class="axero-top-contributors-user-name">
                                <a class="axero-user-card-link" href="{{ProfileURL}}" data-pjax="" data-user="{{UserID}}">{{{trim UserInfoDisplayName ../TitleCharacterLength}}}</a>                         
                            </div>
                            <div class="axero-top-contributors-user-rank">
                                <img alt="{{{RankName}}}" src="{{RankImage}}">&nbsp;<span class="axero-user-rank-name">{{{RankName}}}</span> {{Points}} {{../Resources.GlobalPointText}}                
                            </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>               
              </div>
            </div> 
            
    </div>
    
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
    </div>
    {{/if}}
</div>

<script type="text/javascript">
    jQuery(function() {
        var $widgetTabs = $('#widgetTabs{{WidgetID}}')
            spinner = $('#spinner-absolute-center');
            
       $widgetTabs.click(function (e) {
            var me = $(e.target);
            var tabSelector = me.attr('href');
            var tab = $(tabSelector);
            if (tab.find('li').length == 0) {
                spinner.show();
                var range = me.attr('data-range');
                var url = Communifire.buildApiUrl('/pb/widgets/{{WidgetID}}/html');
                url = Communifire.Utilities.appendQueryString(url, 'filter', range);
                $.cfAjax({
                    type: 'GET',
                    url: url,
                    success: function (response) {
                        var newWidget = $(response);
                        var newTab = newWidget.find(tabSelector);
                        tab.find('ul').html(newTab.find('ul').html());
                        spinner.hide();
                    }
                });
            }
        });
    });
</script>