Employee Directory (List based)

This Employee Directory WebPart displays all your Employees as a Directory list with predefined filters from a SharePoint List

Build your Employee Directory based on a SharePoint list


WebPart Properties
Property NameDescription
Site URL Specify the full URL to the Site, serving the List.
List Name Choose your List from the available DropDownList (Picture Libraries and Custom Lists available!).
View Name Choose a list view (optional)
Field Template defines the listFields in order and renamed by a pipe character.
Example: id;Title|Object;
exclude listFields from beeing displayed, but also searchable: Set a "!" character in front of the FieldName:

=fileicon, set the proper field to be an icon
=open, will add a link on the item to open it on click
=%, will display percentual fields more correctly
[ATFjpg]=value.jpg will display the first Attachment file with its name value.jpg as an item (image)
=userdetails will use the userdetails field template to create a dialog with this item.
A-Z Fieldname enter a title (altered) column name to link the A-Z Filter to
Filter fields define searchboxes to filter columns.
Example: FieldName1;@FieldName2;#CLEAR FILTERS this will create a normal text input box for list column FieldName1 and a dropdown box for list column name FieldName2. At the end will be a button to clear the filters named; CLEAR FILTERS
Default page length define how many items should be listed on each page (pagination enabled)
Date Format change the output string of the DateTime fields.
Show search box enable / disable the universal searchbox.
Image width (px) set the users image size
Custom CSS Style the Table with CSS
enable Export to Excel Creates a button to export the whole list to excel
Default order by column Nbr. Select the order by column as a number from the FieldTemplate (starts with 0)
Sort direction Ascending / Descending
User Details
FieldTemplate define your userdetails dialog with HTML and CSS. List fields are used with surrounding curly brackets: {FieldName}
Table CSS
Header CSS Style the table header row with CSS
Header Column CSS Style the table header column with CSS
Filter fields CSS Style the filter fields section with CSS
A-Z Container CSS Style the A-Z Container with CSS
A-Z Items CSS Style the A-Z Items with CSS
A-Z Items (Active) CSS Style the active A-Z Items with CSS
A-Z Items (available letters) CSS Style the available A-Z Items with CSS
Filter fields CSS Style the filter fields section with CSS
Buttons CSS Style the buttons (Export, Clear Filters) with CSS
Cache retention time Set the Cache duration in Minutes. Set it to “0” to disable the Cache.
License Key Please enter your Paypal "Profile ID" or "Automatic payment ID" to unlock your WebPart. (Format: I-1A11SSBB2241)

Get a license

We offer different kinds of license

  • a PayPal subscription
  • a conservative invoice for a defined time period

  • Office 365


    Select your seats count (All active accounts having access to your tenant)
    If your seats count is over 2499, please request an Offer!

    SharePoint URL*
    Request an Offer

    Post a comment

    03/16/2020 20:36
    I am trying to set the picture to be displayed on the employee directory list based. On my list I have a column that is called photo, with links to a .jpeg file. How would I code this to display this image?
    03/17/2020 08:32

    to set the list field photo as a picture field within the web part, please use the following syntax:
    FieldTempalte: photo=photo|;
    Andrew Chambers
    01/22/2021 23:48
    Is there a way to load the card view by default? Also, is it possible to only load the card view and disable the list view?
    Raphael Meng
    01/25/2021 11:50

    you can set the web part property options to: setcardview=1| to have the card view set as default.
    And to hide the card view button, please use the web part property custom css with the following parameters: .viewswitch{display:none !important;}
    Andrew Chambers
    02/20/2021 21:30
    I have a few questions about setting up this web part. How do I add the icons for Email, Phone and Teams on the list view? Is there a way to make the image clickable to open the popup? Is there a way to close the popup by clicking outside of it versus clicking the x? Lastly, is it possible to open link in new tab versus popup? I was looking for additional configuration details on the site but I could only find this page re: the specific web part. Are there more detailed configuration instructions somewhere else? Thanks!
    02/23/2021 11:19
    Andrew ,

    Here we have built an example for you with promoted icons:

    And also created two FAQ entries about Icons / Links to build: https://sp2019.bitalus.com/employeedirectorylist/SitePages/Frequently-asked-Questions.aspx

    But unfortunately the photo is not clickable at this moment.
    We need to perform an update to make this available.