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.

• 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.

• Insert a Vertical Gallery ( go to Insert tab -> Gallery -> Vertical) on the Power Apps screen.

• The Vertical Gallery screen will appear as shown below screenshot. Select the Office365Users Data source connector for the Vertical Gallery.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

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.

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.

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.

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.

Also, you may like these below PowerApps Tutorials:

• PowerApps Validation: 8 Examples [Required Field, Email, Date, URL, Password, Number, ZIP]
• How to use date time picker in PowerApps
• How to use Power Apps Search Function
• The function Search has some invalid arguments in PowerApps
• PowerApps Timer Control: How to use + start and reset with button
• How to use PowerApps notify function
• Create People Picker in Power Apps with Combo Box
• How to Create PowerApps GridView
• PowerApps charts (Column, Line and Pie Chart)
• PowerApps Pen input control (PowerApps signature)
• PowerApps SharePoint Lookup Column

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.