Building Organizational Chart with Office 365 data on Power Apps

Here, you will see how to build organizational chart on PowerApps.

Let us consider to have users list along with search box, to enable simple user search. On click of any user from the list, organizational chart will be shown.

Let us include following elements, to show organization structure on the PowerApps.

1. Text box for search
2. Gallery list for showing users
3. Gallery list for showing manager information
4. Gallery list for showing user reportees.

The following snapshot shows the preview of organizational chart.

Final Result: Organization Chart shown on PowerApps [Content Morphed]

Configure User List on PowerApps

First, Configure the following elements on the screen to show users list.

• Place the text box on top center to get user inputs.
• User list: Click on insert, and then select vertical gallery from gallery menu.
• For vertical gallery inserted, select data source as Office365Users.
• In the items property of gallery list, fill in the following formula. Office365Users.SearchUser({searchTerm:TextInput1.Text})

User List with search box is configured on PowerApps

Then select, each and every element and fill in formula values.

• For image control, Image value under data section will be Office365Users.UserPhoto(ThisItem.UserPrincipalName)

• For Title control, Text value will be ThisItem.DisplayName
• For sub title control, text value will be ThisItem.City

Now this will show up user list, along with search.

Configure Manager Section on PowerApps screen

Configure the following elements to show Manager pane.

• Insert a label, and put a value as Manager
• Click on insert, and then select vertical gallery from gallery menu.
• For vertical gallery inserted, select data source as Office365Users.
• In the items property of gallery list, fill in the following formula. Office365Users.Manager(Gallery2.Selected.UserPrincipalName)

Configure Manager Section on PowerApps - linked to user list

Then configure properties of the above elements to show up manager details.

• Then select, each and every element and fill in formula values.
• For image control, Image value under data section will be Office365Users.UserPhoto(ThisItem.UserPrincipalName)

• For Title control, Text value will be ThisItem.DisplayName
• For sub title control, text value will be ThisItem.City

The following snapshot shows the app with user list and manager section.

Configure properties of manager section to show manager basic details

Configure Reportees Section

Similar to manager section configurations, reportees section is configured. Let us create a gallery and fill in necessary properties.

• Insert a label, and put a value as Reportees.
• Click on insert, and then select vertical gallery from gallery menu.
• For vertical gallery inserted, select data source as Office365Users.
• In the items property of gallery list, fill in the following formula. Office365Users.DirectReports(Gallery2.Selected.UserPrincipalName)

Then select, each and every element and fill in formula values

• For image control, Image value under data section will be Office365Users.UserPhoto(ThisItem.UserPrincipalName)

• For Title control, Text value will be ThisItem.DisplayName
• For sub title control, text value will be ThisItem.City

Publish the app and configure it on SharePoint pages or Microsoft Teams based on needs. The following will be shown, whenever user is selected on left user list, appropriate reporting details will be shown on right.

PowerApps - Shows user list along with reporting details

Note: You could still grow this app to load organizational chart to load hierarchical data.