Challenge List - Recently Completed Template | Communifire Documentation

The Challenge List - Recently Completed template displays recent badge challenge activity. The template is a built-in template and comes with your Communifire site. To use the template:

1. Add a Content List Widget on a Page Builder page
2. Edit the widget
3. Filter by the challenge content type
4. Check Recent Challenges Completed
5. Select the Challenge List - Recently Completed template in the Template tab

Template HTML

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

<div class="axero-widget axero-widget-recognition-badge-list {{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 class="ax-challenge-list">
            {{#each Contents.Challenges}}
            <li>
                <div class="ax-badge-section">
                    <a class="ax-avatar" href="{{CompletedByProfileURL}}" title="{{{CompletedByDisplayName}}}">
                        <img src="{{CompletedByAvatarURL}}">
                    </a>
                    <a class="ax-badge" href="{{AwardContentURL}}" title="{{{AwardContentTitle}}}">
                        <img src="{{AwardContentImageURL}}">
                    </a>
                </div>
                <div class="ax-challenge-section">
                    <div class="ax-badge-name">
                        <a href="{{AwardContentURL}}">{{{ProcessTitle}}}</a>
                    </div>
                    <div class="ax-usr-name">
                        <a href="{{CompletedByProfileURL}}">{{{CompletedByDisplayName}}}</a>
                    </div>
                    <div class="ax-date-name">
                        {{DateCompletedString}}
                    </div>
                </div>
            </li>
            {{/each}}
        </ul>
    </div>
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
		{{{FooterHTML}}}
    </div>
    {{/if}}
</div>