People Directory - List Template | Communifire Documentation

The People Directory - List template displays people, work information, and location. The template is a built-in template and comes with your Communifire site.

How to use the People Directory - List template

To use the template in People Directory :

1. In Control Panel > People > User Profiles, edit the People Directory page
2. Edit the People widget
3. Select the People Directory - List template in the Template tab

To use the template on any other page:

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

Template HTML

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

<div class="people-directory">
    <ul class="ax-content-list" infinite-scroll='loadMore()' data-widgetid='{{WidgetID}}'>
        {{#each Contents}}
        <li data-userid="{{User.UserID}}">
            <div class="row-fluid">
                <div class="span7">
                    <div class="p-photo" data-userid='{{User.UserID}}'>
                        <a class="axero-user-card-link" data-user="{{User.UserID}}" href="{{{User.ProfileURL}}}">
                            <img class="p-avatar" src="{{field:Profile photo}}">
                        </a>
                        <i title="{{{User.ChatStatusText}}}" class="icon-circle {{User.ChatStatusCSSClass}}"></i>
                    </div>
                    <div class="p-info">
                        <div class="p-property p-name"><a class="axero-user-card-link" data-user="{{User.UserID}}" href="{{{User.ProfileURL}}}">{{{User.UserInfoDisplayName}}}</a> {{#if RankName}}<img class="p-rank" src="{{User.RankImageURL}}" alt="{{{User.RankName}}}">{{/if}}</div>
                        <div class="p-property p-department">{{{field:Occupation}}}{{#if ||field:Occupation||}}{{#if ||field:Department||}} - {{/if}}{{/if}}{{{field:Department}}}</div>
                        <div class="p-property p-location">{{{field:City}}}{{#if ||field:City||}}{{#if ||field:State||}}, {{/if}}{{/if}}{{{field:State}}}</div>
                    </div>
                </div>
				{{#if (or User.InOrgChart User.CanChat) }}
                <div class="span5 visible-desktop">
                    <div class="dropdown pull-right">
                        <a class="dropdown-toggle btn btn-ellipsis" data-toggle="dropdown" href="#"><span class="icon-ellipsis-vertical"></span></a>
                        <ul class="dropdown-menu pull-right">
                            {{#if User.CanChat}}<li><a href="{{../SiteURL}}/chat/user/{{User.UserID}}" target="_blank"><i class="icon-comment"></i> {{../Resources.GlobalForwardMessageText}}</a></li>{{/if}}
                            {{#if User.InOrgChart}}<li><a href="{{../SiteURL}}/people/{{{User.UserName}}}/organizational-chart"><i class="icon-sitemap"></i> {{../Resources.OrgChartText}}</a></li>{{/if}}
                        </ul>
                    </div>
                </div>
				{{/if}}
            </div>
        </li>
        {{/each}}
    </ul>
    <span class="no-entries hide">{{Resources.GlobalNoMembersFoundText}}</span>
</div>