PowerApps Employee Directory

In this PowerApps Tutorial, We will discuss everything on PowerApps Employee Directory like what is an Employee Directory in Microsoft PowerApps and how to create an Employee Directory in a PowerApps.

Also, We will see how to design the Powerapps Employee directory by using the Color property and how to display Active Employees in Employee Directory in PowerApps.

Microsoft PowerApps Employee Directory

PowerApps Employee directory helps to store each and every individual profile of employees in your organization. An Employee Profile means, it can store either the Employee Job title, Department, Email, Display Name or Profile picture, etc.

Suppose in your company, you have around 500 employees. You want to create an Employee directory that stores their Email, Profile picture, Job Title, Department, etc in which they work.

For pulling the Employee Directory Information from PowerApps, it provides a Data Source Connector named “Office365Users“.

Create an Employee Directory in PowerApps

To create an Employee Directory in PowerApps, We need to do these below things:

  • Open the Power Apps page through the Browser. Sign in your PowerApps using a Microsoft account.
  • In the Power Apps page, Select + New app -> Canvas.
  • Choose Tablet layout under the Blank app section as shown below.
PowerApps Employee Directory
PowerApps Employee Directory
  • Then a PowerApps page (with tablet layout) will appear with the new blank screen.
  • Now you need to add the Data source connector to the PowerApps Screen. Go to View tab -> Data sources -> + Add data -> Search Office 365 Users -> Add a New connector or existing connector.
Create an Employee Directory in PowerApps
Create PowerApps Employee Directory
  • Insert a Vertical Gallery ( go to Insert tab -> Gallery -> Vertical) on the Power Apps screen.
Microsoft PowerApps Employee Directory
Create an Employee Directory in PowerApps
  • The Vertical Gallery screen will appear as shown below screenshot. Select the Office365Users Data source connector for the Vertical Gallery.
Microsoft PowerApps Employee Directory
How to create PowerApps Employee Directory
  • Add a Text input control (Insert -> Text -> Text input) to the PowerApps Screen. This Text input control should be present outside of the vertical gallery.
How to create PowerApps Employee Directory
Create PowerApps Employee Directory
  • Select the text input control and rename it to “EmployeeTxt“.
  • Apply only blank space (” “) to its Default property. (By default it was “Text input”)
  • Go to the Properties tab (from the right section) and add a Hint text as “Search an Employee“. So that the Hint text will appear inside the Text input control.
employee directory powerapps
How to create an employee directory in PowerApps
  • Now select the Vertical Gallery control and apply this below formula on its Items property as:
Items = Office365Users.SearchUser({searchTerm:EmployeeTxt.Text,top:5})

Where,

  • SearchUser = It helps to retrieve search results of user profiles.
  • searchTerm:EmployeeTxt.Text = This defines to search the text inside the Text input control. That means you need to search the name of any user inside the Text box.
  • top:5 = It will show the first or top 5 users or Employees who are present in Office365Users connector. Also, you can take any top values like 10, 15, etc.
Create an Employee Directory in PowerApps
PowerApps Employee Directory
  • Select the Vertical gallery and go to the Properties tab (from the right section of the page).
  • You can see the default Layout is “Image, title, and subtitle”. If you want to change the layout, then you can change over here.
  • Click on the Edit from the Fields section. Select these below fields as:
  1. Image1: Let it be the SampleImage.
  2. Subtitle1: Select the Subtitle that you need to display under the Title. You can select the Subtitle as JobTitle, Department, Email, etc.
  3. Title1: Select the Title as DisplayName. It helps to display the name of an employee.
powerapps office365users
PowerApps Employee Directory Example
  • Now you can see all the Employees in the vertical gallery as like the below screenshot. There will be display only the Employee name and their JobTitle.
  • As we did not set the image profile yet, that’s why the image portion is appearing as blank.
powerapps search office 365 users
Create an Employee Directory in PowerApps
  • To set the Image Profile property, Select the image and apply the below formula on its Image property as:
Image = Office365Users.UserPhoto(ThisItem.Id)
  • Here, you must try to take the Id value of the User while using the Image property. If you will take the Email value instead of the Id, then it may give the unpredictable result.
power apps search office 365 users
How to create PowerApps Employee Directory

Preview the Employee Directory App

Once you will preview this Powerapps Employee Directory app, you can see all the Employee image profiles. You can not see the middle one image, because she did not set the image profile in her account.

powerapps company directory
Create PowerApps Employee Directory

Similarly at the Preview time, When you will search any Employee name in the search box, then the employee details will appear as like the below screenshot.

powerapps company directory
How to create an employee directory in PowerApps

Provide a Background Color to Employee Directory

You can also provide any background color to the Employee Directory so that it will look great when the user will use it. Not only the color but also you can design it by using more properties like Font size, Font style, Border, etc.

To provide the Background Color, Select the Vertically gallery and go to the Color properties from the right side section. Select any Standard, Theme, or Custom color over there. Then the background color will be changed as shown below.

employee directory in powerapps
PowerApps Employee Directory

Display Active Employees in Employee Directory

Suppose, in your company, you want to show the employees or users those are present on active mode or in enable mode.

Select the vertical gallery and apply the below formula on its Items property as:

Items = Filter(Office365Users.SearchUser({searchTerm:EmployeeTxt.Text,top:10}),AccountEnabled=true)

Where,

AccountEnabled = It is a property that helps to display the Employees that are in enable mode or active mode in your organization. You need to set this property as true, then only it will show all the active employees.

employee directory in powerapps
Create an Employee Directory in PowerApps

Also, you may like these below PowerApps Tutorials:

In this Power Apps Tutorial, We learned about the PowerApps Employee Directory and the way to create an Employee Directory in PowerApps. Also, We saw how to design the Powerapps Employee directory by using the Color property and how to display Active Employees in Employee Directory in Powerapps.

  • Hi,

    Thank you for this, I am finding that I am getting email dist lists and shared mailboxes show up. Do you know how I could hide them? Is it possible to filter on one group (that has everyone in it)?

    Thank you 🙂

  • From where Office365users get the properties, is it from sharepont user profile or AD or azure AD ?

  • >