Organization Chart Using PowerApps In SharePoint Online

In this article, we will see how to create an organization chart using PowerApps and add it on a modern page in SharePoint Online.

Introduction

 
In earlier versions of SharePoint, Microsoft provided an OOB web part to show organization hierarchy. You just needed to add the webpart on the page and that’s it. It was so easy to navigate through direct reporters and top managers for any employee.
 
But, in SharePoint Online, there are no such web parts available out of the box. As part of the company or a department, you might want to browse through the hierarchy of your organization or department, how to achieve this then?
 

Details

 
Well, if Microsoft has not provided the web part, we can build our own, that too using PowerApps, i.e., without writing a single line of code. Of course, you need to write some logic in PowerApps.
 
We will be creating a PowerApps app. We will be using Office365 Users connector, Data cards, and Gallery controls. The result will look like this 😊
 
Organization Chart Using PowerApps In SharePoint Online
 
I won’t be able to share all the details but this article will surely give you a brief about how easily you can build your own organization chart web part. And, it’s up to your imagination how creative you can make it. So, let’s begin!
 
Create a new PowerApps app. Add three data cards on the canvas. Add labels, image, icons control in the data cards to show employee name, profile photo, role, department, etc.
 
Organization Chart Using PowerApps In SharePoint Online
 
We will be using three data cards as shown above - from top to bottom; first to show Manager information, second to show current user details, and third to show current users direct reporters’ information.
 
On App Start, we need to set variables and collections. We need to specify some starting point to show hierarchy such as - it can be a department HOD. We will get user profile information of this user. We will get the manager's information for this user. Below is the code to be added on OnStart event
  1. Set(FirstPersonOfDept, "MichaeleJenks@yourtenant.onmicrosoft.com");  
  2. ClearCollect(Employee, Office365Users.UserProfile(FirstPersonOfDept));  
  3. ClearCollect(PreviousEmployee, Employee);  
  4. Clear(Manager);Collect(Manager, Office365Users.Manager(First(Employee).Id))   
 Organization Chart Using PowerApps In SharePoint Online
 
That’s how you can access current user information now using Employee collection object. Set this info to controls in CurrentUser_DataCard
 
Organization Chart Using PowerApps In SharePoint Online
 
This is how you can get the User profile photo for start employee with safety checks added to avoid errors.
  1. If(!IsBlankOrError(First(Employee).Id), If(!IsBlankOrError(Office365Users.UserPhoto(First(Employee).Id)), Office365Users.UserPhoto(First(Employee).Id)))   
Organization Chart Using PowerApps In SharePoint Online
 
That’s how you can access Manager information and set it to controls in Manager_DataCard.
  1. If(!IsBlankOrError(First(Manager)), First(Manager).GivenName & " " & First(Manager).Surname)  
Organization Chart Using PowerApps In SharePoint Online
 
You need to add Gallery control in Reportees_DataCard, we will be binding all direct reports of the employee to this gallery. That’s how you can get direct reports of the employee.
  1. If( CountRows(Employee) > 0, Office365Users.DirectReports(First(Employee).Id))   
Organization Chart Using PowerApps In SharePoint Online
 
In the gallery item template also, you need to add labels, image controls to show direct reporters’ information. That’s how you can access the info using ThisItem object.
 
Organization Chart Using PowerApps In SharePoint Online
 
We will show the number of direct reporters for the employee and you can add an icon ahead of it to navigate in deeper. That’s how you can get the number of the direct reports count.
  1. If(!IsBlankOrError(ThisItem.Id), Text(CountRows(Office365Users.DirectReports(ThisItem.Id))), "0")   
Organization Chart Using PowerApps In SharePoint Online
 
This is how it will look with direct reports having their direct reports, with count and an icon shown to go in deeper.
 
Organization Chart Using PowerApps In SharePoint Online
 
That’s it. Feel free to ask questions, if any,  in the below comment section.
 

Summary

 
PowerApps is free to use with your Office 365 account, so we can make use of it to build such useful apps. Using Office365 Users connector and PowerApps controls, we are able to build the organizational hierarchy easily. Thanks for reading, hope this helps.