One of the most critical pages an organization, large or small, should have to influence efficient productivity is an Employee Directory. It acts a singular location to help employees understand who they should contact by authority and how to reach them. SharePoint and Teams don’t quite offer an out-of-the-box solution, so organizations often rely upon SharePoint Lists, Excel spreadsheets, or even PDF documents to visualize their employee directory. In this article, I’m going to walk you through how I created a very simple employee directory app in Microsoft Power Apps that can be accessed on the web, as an app embedded on any SharePoint site and Microsoft Teams. As a prerequisite, you will need a Microsoft Office 365 F1, E1, E3, and E5 licenses which is great because you likely have this powerful low code tool at your disposal already.
To get started, make your way to the Power Apps maker portal at http://make.powerapps.com and log into your Office 365 account with your typical credentials. Once you’ve made it to the main portal page, select Blank app.
Power apps give you the ability to make 3 different types of apps: Canvas apps, Model-Driven apps, and Portal apps. For our purposes, we’re going to choose a blank canvas app which is meant for building apps completely from scratch.
Next, you’ll choose the format and name the app. I typically build Tablet apps as I’m most likely to access it on a tablet or desktop computer. It is worth noting that Power Apps gives some options to scale the app to fit certain aspect ratios, but you’re still going to be working with Phone or Tablet formats.
Alright! We’ve made it to our workspace. The first thing we’ll need to do is connect a data source to pull in our employee data. Our data will be coming from the Office 365 Users data connection. As I’m sure you’ve guessed, this connector will pull in user profile information found in your organization’s Office 365 accounts.
Next, select the Tree View to view our main Screen and the elements it will contain. Power Apps shares some similarities to Adobe Photoshop in that screens and elements are layered on top of each other. You can bring forward or move backward screens and elements as necessary. Keep this in mind as we build our app. Select Insert either at the top or left side menu bar > choose Blank vertical gallery underneath the layout group.
Now that you’ve inserted the gallery element onto our Screen1, we’re going to change the layout to 3 columns. To do that, select Gallery from the Tree view and open up the editor on the right side of the screen. You can also find the layout menu at the top of the screen as well.
Select your Screen1 and insert a Text Input element found underneath the Input group. Place the top of the screen because this will serve as our search bar to locate employees. Be sure to label this Text Input to avoid any confusion later with formulas we’ll be using. For now, I’m going to label my Text Input to EmployeeTxt. Delete the Text input from the formula bar at the top, but leave the quotation marks.
With the layout updated, we can start with adding formulas to make our search for users. Select Gallery in the Tree view and paste in the following formula:
Filter(Office365Users.SearchUser({searchTerm:””,top:999}), EmployeeTxt.Text in DisplayName || EmployeeTxt.Text in Department || EmployeeTxt.Text in JobTitle || EmployeeTxt.Text in BusinessPhones || EmployeeTxt.Text in UserPrincipalName, AccountEnabled= true And !IsBlank(JobTitle) And !IsBlank(Department))
I’ll break down how this formula works. Firstly, the base code function, Office365Users.SearchUser({searchTerm:””}), is performing an API call via the Office 365 Users data connector we added earlier to search all users. This is why we removed the Text Input text earlier from the search bar. The next part, ,top:999, is designed to find and present the first 999 users in your organization. The next part must be paired with the filter function at the beginning of our query formula to find the results of Department, Job Title, Business Phone, and Email (User Principal Name). Stay with me because we’ll add these fields shortly. The last piece, AccountEnabled= true And !IsBlank(JobTitle) And !IsBlank(Department), may or may not apply to how your organization functions. It’s designed to hide recently terminated employees who are not enabled and service accounts in Office 365 that are missing a job titles and departments.
Next, we need to get some profile pictures loaded in. Select the Image element underneath Gallery in the Tree View and replace the CustomGallerySample with the following formula:
Office365Users.UserPhoto(ThisItem.Id)
You should see employee photos flowing in now. For a bit more flair, change the OnSelect property for the photo to launch Microsoft Delve, but adding this formula:
Launch(“https://nam.delve.office.com/?u=”&ThisItem.Id&”&v=work”)
Delve is a useful service that allows you to manage some of your Office 365 information as well as a few other interesting details such as an org chart and recently accessed documents.
Resize, reposition, and change the shape of your profile pictures either on the right side menu under advanced or in the upper right corner next to the formula (fx) bar.
Let’s add in the employee information we’re missing. Select the Gallery in the Tree view and then choose the pen icon to edit the Gallery. Insert 3 Text Labels underneath the Display group.
Underneath Properties > Data Source, Edit the Fields one by one. The Office 365 Users connector will give you options in the Data panel to choose. I labeled the text labels to match the data populated within the fields, since this will match our lengthy formula in the Gallery.
If you wish to add some visibility to business phone numbers, you can do so by adding the following code to the text property of the Text Label:
First(ThisItem.BusinessPhones).Value
If you’re curious why we used the First function here, it’s because Business Phones are listed in an array data type rather than a String like we saw with the other values. This means that you will need a function to choose which phone number to display, and Business Phones happens to be first.
Let’s add a bit of style and depth to the app by adding some shapes underneath the text and profile pictures. Buttons offer radius controls to round out the corners, so we’ll add those to the Gallery and send them to the bottom of our list, so they sit behind our picture and text.
I’ve added some icons here because an Employee Directory would not be complete without functional icons. We do this by using Deep Linking code to give the icons the ability to launch Teams calls, Teams chat, and Outlook. First, we’ll want Power Apps to determine how the user is accessing our app in order to launch a Teams call or chat from the appropriate place. We’ll do this by using a bit of code Microsoft provides to us here.
Set(gblIsHostClientWeb,Param(“hostClientType”)=”web”)
Take the above code and select the App in the Tree view. Now change the App property in the drop-down menu located in the upper left corner to OnStart. The OnStart menu tells Power Apps to perform specific functions that you code when the app is launched each time.
Now we can code our call and chat icons. Select the icon, change the property for the icons to OnSelect and then enter the following:
Phone: If(gblIsHostClientWeb, Launch(“https://teams.microsoft.com/l/call/0/0?users=”&Gallery1.Selected.UserPrincipalName, {},LaunchTarget.New),
Launch(“msteams://teams.microsoft.com/l/call/0/0?users=”&Gallery1.Selected.UserPrincipalName, {}, LaunchTarget.New))
Chat: If(gblIsHostClientWeb, Launch(“https://teams.microsoft.com/l/chat/0/0?users=”&Gallery1.Selected.UserPrincipalName, {},LaunchTarget.New),
Launch(“msteams://teams.microsoft.com/l/chat/0/0?users=”&Gallery1.Selected.UserPrincipalName, {}, LaunchTarget.New))
Coding the email icon is pretty straightforward. You’ll use the following code:
Email: Launch(“mailto:” & ThisItem.UserPrincipalName)
Now we just need to tighten up the UI to make it look a bit cleaner to finish. Now that we’re finished building our app, we can publish the app and share it to make it available to everyone. In the upper right-hand side, choose the publish button.
Choose wither you want to share the app with individual employees, groups, or organization wide based on your organization’s setup.
The best part about Power Apps is the deep integration with other Microsoft products. Your new employee directory can now be used on the web through the Power Apps portal, on SharePoint via the Power Apps webpart, as an within Teams, and on iOS or Android tablets with the dedicated Power Apps application (not pictured).
Employee Directory from the web (Power Apps site)
Employee Directory in Teams
Employee Directory in Sharepoint
Power Apps offers some interesting features to quickly solve problems that would normally require a development team or purchasing services or apps from a vendor. If you’d like to try this yourself, check out my GitHub.
Leave a Reply