--- title: "Employee Directory Layouts: Details and Cards, Card Size, Card Fields and Group By" description: "How to choose between the Details (list) and Contact (cards) views in the Vitextra Employee Directory web parts, set the card size and card fields, configure columns and compact list, group people by a column, custom attribute or last-name letter, and show the search box and totals." url: https://vitextra.com/en/support/kb/10314 language: en published: 2026-10-18 modified: 2026-10-18 products: - "Employee Directory" author: "Vitālijs Kalniņš" tags: ["Employee Directory layout", "Details view", "cards view", "Contact view", "card size", "card fields", "Header Secondary Tertiary Optional", "Group by", "group employees by department", "last name letter", "Compact List", "Show Totals", "Display Search Box", "SharePoint employee directory customization"] --- # Employee Directory Layouts: Details and Cards, Card Size, Card Fields and Group By How to choose between the Details (list) and Contact (cards) views in the Vitextra Employee Directory web parts, set the card size and card fields, configure columns and compact list, group people by a column, custom attribute or last-name letter, and show the search box and totals. The Vitextra [Employee Directory](https://vitextra.com/en/products/employee-directory) web parts can present people as a sortable list or as a grid of contact cards, and both layouts can be split into groups — by department, office, manager, a custom attribute or the first letter of the last name. This article explains every layout setting in the **Appearance** and **Content Fields** sections of the property pane, how each option behaves on the page, and which options are available in which web part. ## Where the layout settings are Edit the page, select the web part, and open its property pane (the pencil icon). The layout is controlled by two sections: - **Appearance** — **Display Search Box**, **Show Totals**, **View**, **Group by**, **Size** (card size) and **Compact List**. In the **Employee Directory (Entra ID)** web part this section also contains **Show alphabetical navigation**. - **Content Fields** — the fields shown on each card: **Header**, **Secondary**, **Tertiary** and **Optional**. The columns themselves (which fields exist, their captions and order) are configured in the **Data Source** section with the **Columns** and **Custom Columns** editors. ![The Appearance section of the property pane](https://static.vitextra.com/articles/10314/appearance-settings-en.png) *The Appearance section of the property pane* 📝 **Note** Settings that do not apply to the selected view are greyed out rather than hidden: **Size** and the **Content Fields** dropdowns are available only in the cards view, and **Compact List** only in the **Details** view. Your values are kept, so switching the view back restores them. ## Details view Select **View** → **Details** to show people as a list (table) with one row per person and one column per field. **Which columns appear and in what order.** In **Data Source**, select **Configure** under **Columns**. For each field you can set the **Caption** (the column header text), turn **Show in list** on or off, and change the **Order**. Custom attributes are configured the same way under **Custom Columns** and are placed after the built-in columns. By default the list shows **Image**, **Status**, **Full Name**, **Job Title**, **Department**, **Location**, **Email** and **Business Phone**. **Sorting.** Select a column header to sort by that column; select it again to reverse the direction. The **Image** and **Status** columns cannot be sorted. The initial order comes from the **Sort by** and sort direction settings in **Data Source**. **Column width.** The list uses a justified layout: columns stretch to fill the width of the web part and can be resized by dragging the header borders. Columns are not hidden automatically on narrow pages — if the visible columns don't fit, the list scrolls horizontally. For a narrow page section or a mobile-first page, keep only a few columns or use the cards view instead. **Compact List.** Turn on **Compact List** to reduce the row height so more people fit on the screen. It is on by default for new web parts. Selecting a row opens the person's details pane; right-clicking a row opens the context menu with the actions enabled by the administrator. 💡 **Tip** To learn how to add your own profile properties or Microsoft Entra ID attributes as columns, see [KB10049. How to Add Custom Attributes to the Employee Directory Web Part](https://vitextra.com/en/support/kb/10049) and [KB10060. How to Display Custom Entra ID Attributes in the Employee Directory Web Part](https://vitextra.com/en/support/kb/10060). ## Cards view Select **View** → **Contact** to show each person as a contact card with a photo, a presence indicator and up to four lines of text. This is the default view for new web parts. The cards are arranged in a grid whose number of columns follows the width of the web part (not the width of the browser window): | Web part width | Cards per row | |---|---| | less than 641 px | 1 | | 641–1023 px | 2 | | 1024–1599 px | 3 | | 1600–1799 px | 4 | | 1800 px and wider | 5 | Selecting a card opens the person's details pane; selecting it again closes the pane. When you point to a card, its quick actions appear as icons in the top-right corner (a favorite star stays visible for people you have starred); right-clicking the card opens the context menu. Quick actions are shown in the cards view only — for what each action does and how to enable it, see [KB10315. Employee Actions in Employee Directory: Chat, Call, Email, Copy Email, Schedule a Meeting and vCard](https://vitextra.com/en/support/kb/10315). ### Card size The **Size** slider (0–5) sets the size of the photo and, with it, how many lines of text a card can show. The slider does not display a number; position 0 is the far left. | Size | Photo | Lines of text shown | |---|---|---| | 0 | 24 px | Header | | 1 | 32 px | Header | | 2 | 40 px | Header, Secondary | | 3 | 48 px | Header, Secondary | | 4 (default) | 72 px | Header, Secondary, Tertiary | | 5 | 100 px | Header, Secondary, Tertiary, Optional | Small sizes (0–1) give a dense name list, ideal for a sidebar or a narrow column. Sizes 4–5 give classic contact cards with job title, department and location. ![Contact cards at different sizes](https://static.vitextra.com/articles/10314/card-sizes-en.png) *Contact cards at sizes 1, 3 and 5* ### Card fields The **Content Fields** section lets you choose which field fills each line of the card. Only the dropdowns that the selected size can show are displayed: | Dropdown | Shown when Size is | Default field | |---|---|---| | **Header** | always | Full Name | | **Secondary** | 2 or more | Job Title | | **Tertiary** | 4 or more | Department | | **Optional** | 5 | (Empty) | Each dropdown lists **(Empty)** (leave the line blank) and the configured columns — built-in fields and your custom columns — except **Image** (and, in the **Employee Directory** web part, **Status**). Fields that hold several values, such as skills, are shown comma-separated. If a person has no value for the selected field, the line stays empty. 📝 **Note** The card fields are independent of the **Show in list** setting of the columns: a field can be shown on the cards even if it is hidden in the **Details** view. A custom column, however, must exist in the **Custom Columns** configuration to be offered in the dropdowns. ## Group by The **Group by** dropdown splits the results into groups with a header for each value. It works in both the **Details** and the cards view. The options are: - **No grouping** — the default; a single flat list. - **Last name (first letter)** — groups by the first letter of the last name (if a person has no last name, the first letter of the full name is used). This gives an address-book style A, B, C… layout. - **Built-in columns** — any configured built-in column, for example **Job Title**, **Department**, **Location**, **Office Location**, **Company name**, **Country/Region**, **City** or **Manager** (grouped by the manager's name). The following columns are not offered because they are unique per person or not meaningful as groups: **Image**, **Status**, **Full Name**, **Email**, **Business Phone**, **Cell phone**, **Home Phone**, **User Name**, **Address**, **ZIP/Postal Code** and **Employee ID**. - **Custom columns** — every column configured under **Custom Columns**. The list of options follows the column configuration: a column appears in **Group by** as soon as it is configured, whether or not it is shown in the list. ![Details view grouped by Department](https://static.vitextra.com/articles/10314/details-grouped-en.png) *The Details view grouped by Department* ### How groups are displayed - **Order of groups.** Groups are sorted alphabetically by their value (case-insensitive). People without a value form the last group, labeled **(Empty)**. - **Details view.** Each group has a header with the value and the number of people. Groups are expanded initially and can be collapsed and expanded with the chevron in the header. - **Cards view.** Each group has a heading with the value and the number of people, followed by its own grid of cards. Card groups cannot be collapsed. - **Multi-value fields.** When a field holds several values (for example skills), a person is placed in the group of the first value only. ![Cards grouped by the first letter of the last name](https://static.vitextra.com/articles/10314/cards-grouped-en.png) *Cards grouped by the first letter of the last name* ### Grouping, sorting, search and filters Grouping is applied last — to the people currently shown after search, quick filters, the refinement panel and the alphabetical navigation have done their work. So when you search for "manager" or select **My department**, the groups are rebuilt from the matching people only, and empty groups are not shown. Sorting still works inside groups: the groups keep their alphabetical order, and the people within each group follow the current sort order (the **Sort by** setting or the column header you selected in the **Details** view). ❗ **Important** Grouping is applied to the results loaded on the page, not to the whole directory. When results are shown in pages (**Display items in pages of**), a group contains only the people loaded so far, and its count grows when you select **Show More Results...**. If you want complete groups on a single screen, increase the page size; in the **Employee Directory (Entra ID)** web part you can set it to 0 to show all people at once. ## Search box and totals Two toggles at the top of the **Appearance** section control the elements around the results: - **Display Search Box** — shows the search box above the results. Turn it off for a fixed list, such as a page that always shows one department through a saved query or filter. When the search box is hidden, people can still use quick filters, the refinement panel and the alphabetical navigation, if they are enabled. - **Show Totals** — shows **Total number of results:** with the number of people that match the current search and filters. The total counts all matching people, not only those already loaded on the page. Both toggles are on by default. ## Which options are available in which web part | Setting | Employee Directory | Employee Directory (Entra ID) | New Employees | |---|---|---|---| | Display Search Box, Show Totals | Yes | Yes | No | | View (Details / Contact) | Yes | Yes | No — always cards | | Group by | Yes | Yes | No | | Show alphabetical navigation | No | Yes | No | | Size | 0–5 | 0–5 | 1–5 | | Compact List | Yes | Yes | No | | Content Fields (Header, Secondary, Tertiary, Optional) | Yes — configured columns | Yes — configured columns | Yes — fixed list of fields | In the **New Employees** web part the **Size** slider starts at 1 and shows its current value. The **Content Fields** dropdowns there offer a fixed set of standard fields — **Full Name**, first and last name, **Job Title**, **Department**, **Location**, **Office Location**, **Email**, the phone numbers and **User Name** — because that web part has no column configuration. 💡 **Tip** For the rest of the web part settings, see [KB10309. How to Add and Configure the Employee Directory Web Part](https://vitextra.com/en/support/kb/10309), [KB10311. How to Configure the Employee Directory (Entra ID) Web Part: Filters, Exclusions and A–Z Navigation](https://vitextra.com/en/support/kb/10311) and [KB10207. How to Showcase New Hires with the New Employees Web Part](https://vitextra.com/en/support/kb/10207).