Welcome to the Alfresco Builder Network

Our technical resource site is still being improved. We'd love to hear your feedback. Tell us what you think

Shows a list of users (people).

ADF People List

Basic Usage

Populate the users in the component class:

import { UserProcessModel } from '@alfresco/adf-core';

class SomeComponent implements OnInit {

    people: UserProcessModel[] = [
          id: 1,
          email: '[email protected]',
          firstName: 'John',
          lastName: 'Doe'
          id: 2,
          email: '[email protected]',
          firstName: 'Jane',
          lastName: 'Doe'
    onClickPeopleRow(user: UserProcessModel) {
        console.log('Clicked row: ', user);
    onClickPeopleAction($event: Event) {
        console.log('Clicked action: ', $event);

You can use column templates with the people list component, since it is based on the Datatable component:

    <data-column key="firstName" class="people-pic">
      <ng-template let-entry="$implicit">
          {{entry.row.obj.firstName + ' ' + entry.row.obj.lastName}}
    <data-column key="email" class="full-width">
      <ng-template let-entry="$implicit">
        <div class="adf-people-email">{{ entry.row.obj.email }}</div>

Class members


NameTypeDefault valueDescription
actionsbooleanfalseToggles whether or not actions should be visible, i.e. the 'Three-Dots' menu.
usersUserProcessModel[]The array of user data used to populate the people list.


clickActionEventEmitter<UserEventModel>Emitted when the user clicks in the 'Three Dots' drop down menu for a row.
clickRowEventEmitter<UserProcessModel>Emitted when the user clicks a row in the people list.

Interested in trying Alfresco?

Try Now