People List Template | Axero Documentation

The people list template is used on the Connections and Direct Reports pages. You can customize the people list template in the Control Panel. You can add or remove profile fields, add any text, and rearrange the layout.

You can customize the people list template in the Control Panel.

1. Click the gear icon > Control Panel > People > User Profiles > People list template.
2. Edit the template.
   • Use the Insert token menu to add user profile fields. To add a system resource, start typing under Insert resource then click the resource. Tokens and resources are added where your blinking cursor is.
3. Click Save.

Example: Adding the Phone field to the people list template

1. In the editor, copy <div class="p-property p-location">{{{field:City}}}{{#if ||field:City||}}{{#if ||field:State||}}, {{/if}}{{/if}}{{{field:State}}}</div> .
2. After that line, hit enter and paste.
3. In the new line, delete p-location and {{{field:City}}}{{#if ||field:City||}}{{#if ||field:State||}}, {{/if}}{{/if}}{{{field:State}}} .
4. Keep the cursor between >< (the angled brackets).
5. In the Insert token menu, select Phone. {{{field:Phone}}} is added where the cursor is.
6. Click Save.

Result:

Template Syntax

See Page Builder Template Language Syntax for more details about template syntax.

Default People List Template

Below is the default people list template, for your reference.

<div class="p-photo">
    <a class="axero-user-card-link" href="{{{ProfileURL}}}" data-user="{{UserID}}">
        <img class="p-avatar" src="{{{field:Profile photo}}}" alt="{{{UserInfoDisplayName}}}">
    </a>
    <i title="{{ChatStatusText}}" class="icon-circle {{ChatStatusCSSClass}}"></i>
</div>
<div class="p-info">
    <div class="p-property p-name"><a data-user="{{UserID}}" class="axero-user-card-link" href="{{{ProfileURL}}}">{{{UserInfoDisplayName}}}</a></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>