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?
    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.
    Andrew Chambers
    04/06/2021 16:18
    I am having issues with the user details pop up. How do I set the pop-up to allow for scrolling depending on screen size? For example, on larger screens there is no issue, but on smaller screens the lower portion of the pop-up is cut off and the user is not able to scroll to see the rest of the details.

    Also, I attempted to link to the user details from the image but was not able to get it to work. Any ideas of what I may be doing wrong? Happy to send screen shots if that helps.

    04/06/2021 16:32

    on which version of the web part are you currently working on?

    Version 1312 was facing the update to have the ability to link the photo to the userdetails dialog.
    We now have published a new update for you facing the dialog issue you described.
    Please update to the most recent version 1313.

    To have the photo linked to the userdetails dialog, please use the following syntax:
    Andrew Chambers
    04/29/2021 11:52
    Is there a way to use the filter field to select from a multi-choice dropdown field? For example, when I add the field if any of the items have multiple choices, it lumps them all into one line versus each individual option being a line.

    Also, is there a way to reference a list item from another? For example, I've added Manager & Direct Report relationships between the list items but am not sure how to make that linkable. I can make it a text-only option and visible on the expanded profile popup, but don't know how to go back and forth between the two list items.
    05/05/2021 16:32

    to get a lookup column configured please use the following syntax within your field template: LookupColumnInternalName:TargetLookupColumn;
    Unfortunately there is currently no option implemented to split a multyvalue field into single values to filter on.
    We will create a internal ticket to have a look at this for the next release.
    Eric Stepek
    06/18/2021 14:46
    Just downloaded the staff directory list web part (v1313) and I don't see the option to turn off the search box:

    Show search box enable / disable search box
    06/18/2021 14:56

    we have verified with version 1313 and the checkbox to enable / disable the generic searchbox is just below the Date Format property.