What's New Template | Communifire Documentation

The What's New template displays a tabbed list of new activity and content in the top level community. The template is a built-in template and comes with your Communifire site. To use the template:

1. Add a What's New Widget on a Page Builder page
2. Edit the widget
3. Select the What's New template in the Template tab

Template HTML

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

<div class="axero-widget axero-widget-tabbed {{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="myTab" class="nav nav-tabs">
              <li class="active"><a href="#activities{{WidgetID}}" data-toggle="tab">{{Resources.HomePageActivityText}}</a></li>
              {{#if Contents.ShowBlogs}}<li><a href="#blogs{{WidgetID}}" data-toggle="tab">{{Resources.HomePageBlogsText}}</a></li>{{/if}}
              {{#if Contents.ShowForumPosts}}<li><a href="#forumposts{{WidgetID}}" data-toggle="tab">{{Resources.ForumPostForumText}}</a></li>{{/if}}
              {{#if Contents.ShowArticles}}<li><a href="#articles{{WidgetID}}" data-toggle="tab">{{Resources.HomePageArticlesText}}</a></li>{{/if}}
              {{#if Contents.ShowEvents}}<li><a href="#events{{WidgetID}}" data-toggle="tab">{{Resources.EventDefaultText}}</a></li>{{/if}}
              {{#if Contents.ShowJobs}}<li><a href="#jobs{{WidgetID}}" data-toggle="tab">{{Resources.HomePageJobsText}}</a></li>{{/if}}
              {{#if Contents.ShowWikis}}<li><a href="#wikis{{WidgetID}}" data-toggle="tab">{{Resources.HomePageWikiText}}</a></li>{{/if}}
              {{#if Contents.ShowVideos}}<li><a href="#videos{{WidgetID}}" data-toggle="tab">{{Resources.VideoDefaultHeaderText}}</a></li>{{/if}}
              {{#if Contents.ShowPhotos}}<li><a href="#photos{{WidgetID}}" data-toggle="tab">{{Resources.PhotoAlbumHeaderH2Text}}</a></li>{{/if}}
            </ul>
            
            <div class="tab-content">
              <div class="tab-pane fade in active list" id="activities{{WidgetID}}">                
                
                <ul>
                   {{#each Contents.Activities}}
                    <li>
                        <div class="axero-section-list-avatar">
                            <a href="{{UserProfileURL}}" title="{{{UserDisplayName}}}">
                                <img alt="{{{UserDisplayName}}}" src="{{UserAvatarFullUrl}}"></a>
                        </div>
                        <div class="axero-section-list-content">
                        <div class="axero-section-list-content-title">
                            <a class="axero-user-card-link" href="{{UserProfileURL}}" data-user="{{UserID}}">{{{UserDisplayName}}}</a>  {{{ActivityText}}}                       
                        </div>
                        <div class="axero-section-list-content-date">
                           {{DateTimeSpan}} {{#if SpaceID}} {{../../Resources.WallInText}} <a href="{{SpaceURL}}" title="{{{SpaceName}}}">{{{SpaceName}}}</a>{{/if}}                  
                        </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>               
                
              </div>
             {{#if Contents.ShowBlogs}} 
             <div class="tab-pane fade in list" id="blogs{{WidgetID}}">                
                
                <ul>
                   {{#each Contents.Blogs}}
                    <li>
                        <div class="axero-section-list-avatar">
                            <a href="{{AuthorProfileUrl}}" title="{{{AuthorDisplayName}}}">
                                <img alt="{{{AuthorDisplayName}}}" src="{{AuthorAvatarImageUrl}}"></a>
                        </div>
                        <div class="axero-section-list-content">
                        <div class="axero-section-list-content-title">
                            <a href="{{ContentURL}}" data-pjax="" data-user="{{UserID}}">{{{ContentTitle}}}</a>                     
                        </div>
                        <div class="axero-section-list-content-date">
                           {{DateCreatedString}} {{../Resources.GlobalPublishOrPostBy}} <a class="axero-user-card-link" href="{{AuthorProfileUrl}}" data-user="{{UserID}}" title="{{{AuthorDisplayName}}}">{{{AuthorDisplayName}}}</a>
                           - {{../Resources.GlobalViewText}}: {{ViewCount}} 
                           - {{../Resources.GlobalCommentHeaderText}}: <a href="{{ContentURL}}#comments" title="{{CommentCount}}">{{CommentCount}}</a>  
                        </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>               
                
              </div>              
              {{/if}}
			 {{#if Contents.ShowForumPosts}} 
               <div class="tab-pane fade in list" id="forumposts{{WidgetID}}">                
                
                <ul>
                   {{#each Contents.ForumPosts}}
                    <li>
                        <div class="axero-section-list-avatar">
                            <a href="{{AuthorProfileUrl}}" title="{{AuthorDisplayName}}">
                                <img alt="{{AuthorDisplayName}}" src="{{AuthorAvatarImageUrl}}"></a>
                        </div>
                        <div class="axero-section-list-content">
                        <div class="axero-section-list-content-title">
                            <a href="{{ContentURL}}">{{ContentTitle}}</a>                     
                        </div>
                        <div class="axero-section-list-content-date">
                           {{DateCreatedString}} {{../Resources.GlobalPublishOrPostBy}} <a class="axero-user-card-link" href="{{AuthorProfileUrl}}" data-user="{{UserID}}" title="{{AuthorDisplayName}}">{{AuthorDisplayName}}</a>
                        </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>               
                
              </div>              
              {{/if}}
              {{#if Contents.ShowArticles}} 
               <div class="tab-pane fade in list" id="articles{{WidgetID}}">                                
                <ul>
                   {{#each Contents.Articles}}
                    <li>
                        <div class="axero-section-list-avatar">
                            <a href="{{AuthorProfileUrl}}" title="{{{AuthorDisplayName}}}">
                                <img alt="{{{AuthorDisplayName}}}" src="{{AuthorAvatarImageUrl}}"></a>
                        </div>
                        <div class="axero-section-list-content">
                        <div class="axero-section-list-content-title">
                            <a href="{{ContentURL}}" data-pjax="" data-user="{{UserID}}">{{{ContentTitle}}}</a>                     
                        </div>
                        <div class="axero-section-list-content-date">
                           {{DateCreatedString}} {{../Resources.GlobalPublishOrPostBy}} <a class="axero-user-card-link" href="{{AuthorProfileUrl}}" data-user="{{UserID}}" title="{{{AuthorDisplayName}}}">{{{AuthorDisplayName}}}</a>
                           - {{../Resources.GlobalViewText}}: {{ViewCount}} 
                           - {{../Resources.GlobalCommentHeaderText}}: <a href="{{ContentURL}}#comments" title="{{CommentCount}}">{{CommentCount}}</a>  
                        </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>               
                
              </div>    
              {{/if}}
              {{#if Contents.ShowJobs}} 
              <div class="tab-pane fade in list" id="jobs{{WidgetID}}">     
                <ul>
                     {{#each Contents.Jobs}} 
                        <li>
                            <div class="axero-section-list-avatar">
                
                                <a title='{{{UserDisplayName}}}' href='{{UserProfileURL}}' ><img src="{{UserAvatarFullUrl}}" /></a>                                        
                            </div>
                            <div class="axero-section-list-content">
                                <div class="axero-section-list-content-title">
                                    <a class="bold" title='{{{PositionTitle}}}' href="{{JobURL}}" >{{{PositionTitle}}}</a>                        
                                </div>
                                <div class="axero-section-list-content-date">
                                   {{DateTimeSpan}}&nbsp;{{../Resources.GlobalPublishOrPostBy}}&nbsp;
                                    <a title='{{{UserDisplayName}}}' href='{{UserProfileURL}}' >{{{UserDisplayName}}}</a>
                                    &nbsp;-&nbsp;{{../Resources.GlobalViewText}}:&nbsp;{{Views}}
                                </div>
                                <div class="axero-section-list-content-date">
                                    {{../Resources.JobCompanyNameText}}: {{{CompanyName}}}
                                    &nbsp;-&nbsp;{{../Resources.EventLocationText}}:&nbsp;{{{Location}}}
                                    &nbsp;-&nbsp;{{../Resources.JobPostCategoryText}}:&nbsp;<a href="{{JobCategoryURL}}" title="{{{Category}}}" >{{{Category}}}</a>
                                </div>
                                <div class="axero-section-list-content-summary">
                                    {{{Description}}}
                                </div>
                            </div>
                        </li>
                  {{/each}}       
                </ul>  
               </div>     
               {{/if}}
               {{#if Contents.ShowWikis}} 
               <div class="tab-pane fade in list" id="wikis{{WidgetID}}">                
                
                <ul>
                   {{#each Contents.Wikis}}
                    <li>
                        <div class="axero-section-list-avatar">
                            <a href="{{AuthorProfileUrl}}" title="{{{AuthorDisplayName}}}">
                                <img alt="{{{AuthorDisplayName}}}" src="{{AuthorAvatarImageUrl}}"></a>
                        </div>
                        <div class="axero-section-list-content">
                        <div class="axero-section-list-content-title">
                            <a href="{{ContentURL}}" data-pjax="" data-user="{{UserID}}">{{{ContentTitle}}}</a>                     
                        </div>
                        <div class="axero-section-list-content-date">
                           {{DateCreatedString}} {{../Resources.GlobalPublishOrPostBy}} <a class="axero-user-card-link" href="{{AuthorProfileUrl}}" data-user="{{UserID}}" title="{{{AuthorDisplayName}}}">{{{AuthorDisplayName}}}</a>
                           - {{../Resources.GlobalViewText}}: {{ViewCount}} 
                           - {{../Resources.GlobalCommentHeaderText}}: <a href="{{ContentURL}}#comments" title="{{CommentCount}}">{{CommentCount}}</a>  
                        </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>               
                
              </div>                
               {{/if}}
               {{#if Contents.ShowEvents}} 
               <div class="tab-pane fade in list" id="events{{WidgetID}}">                
                
                
                    <ul>
                    {{#each Contents.Events}} 
                        <li>
                            <div class="axero-section-list-avatar">
                                <a title='{{{UserDisplayName}}}' href='{{UserProfileURL}}' ><img src="{{UserAvatarFullUrl}}" /></a>                    
                            </div>
                            <div class="axero-section-list-content">
                                <div class="axero-section-list-content-title">
                                    <div class="right">
                                        
                                    </div>
                                <a class="bold" title='{{{Title}}}' href="{{EventURL}}" >{{{Title}}}</a>                                                
                                </div>
                                <div class="axero-section-list-content-date">
                                    {{DateTimeSpan}}&nbsp;{{../Resources.GlobalPublishOrPostBy}}
                                    <a title='{{{UserDisplayName}}}' href='{{UserProfileURL}}' >{{{UserDisplayName}}}</a>
                                    &nbsp;-&nbsp;{{../Resources.GlobalViewText}}:&nbsp;{{Views}}
                                    &nbsp;-&nbsp;{{../Resources.GlobalCommentHeaderText}}:&nbsp;<a title='{{CommentCount}}' href="{{EventURL}}#comments" >{{CommentCount}}</a>                                                                     
                                </div>
                                <div class="axero-section-list-content-date bold">
                                   <asp:literal id="litEventDateTime" runat="server" />
                                    {{../Resources.EventTimeDateText}}:&nbsp;{{StartDateText}} {{../Resources.GlobalToCamelText}} {{EndDateText}} 
                                </div>
								{{#if VenueName}}
                                <div class="axero-section-list-content-date bold">
                                     {{../../Resources.EventLocationText}}:&nbsp;{{{VenueName}}} 
                                </div>
								{{/if}}
                                <div class="axero-section-list-content-summary">
                                    {{{Description}}}
                                </div>
                            </div>
                        </li>
                    {{/each}}
                    </ul>             
                
              </div>   
               {{/if}}
              {{#if Contents.ShowVideos}} 
                <div class="tab-pane fade in" id="videos{{WidgetID}}">
                    <div class="row-fluid">
                        <div class="span12">
                            <ul class="thumbnails featured-thumbnails">
                              {{#each Contents.Videos}}
                                <li class="span4">
                                    <div class="thumbnail">
                                        <a class="photo" href="{{ContentURL}}" title="{{{ContentTitle}}}">
                                            <img width="100%" alt="{{{ContentTitle}}}" src="{{ContentThumbImageFullURL}}">
                                        </a>
                                        <div class="axero-media-grid-item-meta">
                                            <div class="media-name">{{{ContentTitle}}}</div>
                                            <div class="media-user">
                                                {{../Resources.GlobalPublishOrPostBy}}:&nbsp;<a title="{{{AuthorDisplayName}}}" href="{{AuthorProfileUrl}}">{{{AuthorDisplayName}}}</a>
                                            </div>
                                            <div class="media-date">{{../Resources.SpaceCreatedOnText}}: {{DateCreatedString}}</div>
                                        </div>
                                    </div>
                                </li>
                            {{/each}}
                            </ul>
                        </div>
                    </div>
                </div>
            {{/if}}
              {{#if Contents.ShowPhotos}} 
                <div class="tab-pane fade in" id="photos{{WidgetID}}">
                    <div class="row-fluid">
                        <div class="span12">
                            <ul class="thumbnails featured-thumbnails">
                              {{#each Contents.Photos}}
                                <li class="span4">
                                    <div class="thumbnail">
                                        <a class="photo" href="{{ContentURL}}" title="{{{ContentTitle}}}">
                                            <img width="100%" alt="{{{ContentTitle}}}" src="{{ContentThumbImageFullURL}}">
                                        </a>
                                        <div class="axero-media-grid-item-meta">
                                            <div class="media-name">{{{ContentTitle}}}</div>
                                            <div class="media-user">
                                                {{../Resources.GlobalPublishOrPostBy}}:&nbsp;<a title="{{{AuthorDisplayName}}}" href="{{AuthorProfileUrl}}">{{{AuthorDisplayName}}}</a>
                                            </div>
                                            <div class="media-date">{{../Resources.SpaceCreatedOnText}}: {{DateCreatedString}}</div>
                                        </div>
                                    </div>
                                </li>
                            {{/each}}
                            </ul>
                        </div>
                    </div>
                </div>
{{/if}}
         </div>      
              
            
    </div>
    
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
        
    </div>
    {{/if}}
    
</div>