Department Directory Widget

Department Directory Widget

Last updated 12.04.25

The Department Directory widget presents data pulled from the Directory Application to display employee photos and names in rows. The employees displayed are governed by the departments to which they are assigned. Working with the widget first requires adding this data to the Directory Application. 
 
The Directory Application is a cross-referenced database of location, department and employee information. For this Department Directory widget to work properly there needs to be, at minimum, an employee photo, name and department in the database. 

Any changes in the Directory Application will propagate through the website automatically.  

Related Links & Videos

Add the Department Directory Widget to the page

1. Select where on the page you would like the widget to appear 
2. Click on the blue plus add widget icon   
3. Select the Department Directory widget from the widget pop up 
4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

Department Directory Properties

5. In the Department Directory properties pop up, adjust various settings including the order employees appear and which department to pull the information from.
6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to delete the Department Directory Widget

Hover over the Department Directory widget until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Department Directory Widget

Hover over the Department Directory widget until it displays the grab icon on the left. Simply drag and drop in a new location. 

Department Directory Widget Properties

PROPERTYDESCRIPTION
Order ByYou can choose from:
  • Priority Order - this is defined in the Directory Application. Often used to call out the leading contact first with the remaining department employees in alphabetical order
  • Last Name - Ascending (alphabetically by last name)
  • Item Order - Ascending
  • First Name - Ascending (alphabetically by first name)
Display Email IDCheckbox toggles between showing or hiding email address for all listed
Display Phone NumberCheckbox toggles between showing or hiding phone number for all listed
Items per row (Large screens)Enter number of items per row - 5-6 recommended for desktop
Items per row (Medium screens)Enter number of items per row - 3-4 recommended for tablet
Items per row (Small screens)Enter number of items per row - 1-2 recommended for mobile
TransformationYou can choose from:
  • Employee info with image - example below
  • Employee info without popup - example below
  • Employee info without image - example below
  • Employee info without location filter - example below
DepartmentSelect a department from the drop down menu – content is driven by the departments added to the Directory Application
No. of Items Per PageEntry field for number

Examples

Employee Info with Image Transformation

This example of the Department Directory Widget is pulling in employees who are flagged as being in the Leadership department. Departments are created in the Directory Application. This widget is using the Employee Info with Image transformation option. By clicking on an employee image below a small window pops up with contact details of that employee.

James Beatty
James Beatty
VP Energy

Employee Info without Popup Transformation

This widget is using the Employee Info without Popup transformation option.

James Beatty
James Beatty
VP Energy
Alma
Office: (888) 888-8888
Cell: (000) 000-0000
Test Employee Kap Emp
Test Employee Kap Emp
Senior Manager
La Vergne
Amy Brar
Amy Brar
Alma,La Vergne
img alt
Test Employee
Test Manager
Pine Island,test city1
Office: (111) 222-3333
Cell: (222) 333-4444
Fax: (100) 100-1000
Bhavya Test
Bhavya Test
Bhavya
Alma,Test
Office: (884) 245-2415

Employee Info Without Image Transformation

This widget is using the Employee Info without Image transformation option.

James Beatty
VP Energy
Test Employee Kap Emp
Senior Manager
Amy Brar
Test Employee
Test Manager
Bhavya Test
Bhavya
Test Alt Text Image Test

Employee Info with Location Filter Transformation

This widget is using the Employee Info with Location transformation option. This transformation allows the visitor to find people using a location filter in a drop-down menu. Pagination is automatic if required. A button is optional.

James Beatty
James Beatty
VP Energy
Alma
Office: 888-888-8888
Cell: (000) 000-0000
Test Employee Kap Emp
Test Employee Kap Emp
Senior Manager
La Vergne
Amy Brar
Amy Brar
Alma,La Vergne
img alt
Test Employee
Test Manager
Pine Island,test city1
Office: 111-222-3333
Cell: (222) 333-4444
Fax: (100) 100-1000
Bhavya Test
Bhavya Test
Bhavya
Alma,Test
Office: 884-245-2415
View All