Build an Org Chart in Power Apps Without PCF — Free Component (2026)
When most Power Apps makers search for an org chart solution, they land on tutorials that assume you need a PCF control, a React component, or custom code hosted outside the app. That assumption is wrong.
You can build a clean, fully interactive, hierarchical org chart using only native Canvas App controls. No custom components. No external dependencies. No code beyond Power Fx.
This post walks through exactly how the component works, how to set up your data, the formulas that drive the hierarchy, and how to connect it to your own data source. A free downloadable version of the component is available at the end.
[TABLE OF CONTENTS]:
- Why build without PCF?
- What you need before you start
- Step 1: Set up your data structure
- Step 2: Build the top-level employee card
- Step 3: Add nested galleries for direct reports
- Step 4: Connect hierarchy levels with dynamic filtering
- Step 5: Add responsive layout with flexible containers
- Connecting to your own data source
- Customising colours, fonts, and layout
- Frequently asked questions
- Download the free component
Why Build a Power Apps Org Chart Without PCF?
Most Power Platform projects need an org chart at some point — for HR directories, project teams, helpdesk escalation paths, or approval chain visualisations. The default answer is usually a PCF control, but PCF introduces overhead that most organisations do not want to carry:
- Additional deployment steps and solution management
- Versioning dependencies that break on platform updates
- Higher security scrutiny from IT and admin teams
- No low-code customisation for business users
- Longer development and handover cycles
Building with native Canvas App controls avoids all of that. The component runs anywhere Power Apps runs: web browser, mobile, embedded in Microsoft Teams, embedded in SharePoint, and as a custom page inside a model-driven app. Everything lives inside the app. No external scripts. No approvals needed.
What You Need Before You Start
- A Power Apps environment with Canvas App access
- A data source with at minimum five columns (detailed in Step 1)
- Approximately 45 to 60 minutes to build from scratch, or under 5 minutes if you use the downloadable component below
Step 1: Set Up Your Data Structure
The entire component relies on a parent-child relationship in your data. Each employee record needs an ID and a reference to their manager’s ID. That single relationship is what the Filter() function uses to draw the hierarchy at every level.
Your data source needs these five columns at minimum:
| Column name | Data type | Purpose |
|---|---|---|
| ID | Number | Unique identifier for each employee |
| Name | Text | Full display name |
| JobTitle | Text | Role shown on the card |
| IdParent | Number | The ID value of this employee’s manager |
| PhotoURL | Text | URL of the employee’s avatar or photo |
The top-level person in your hierarchy (typically the CEO or department head) should have an IdParent value of 0 or blank, since they have no manager above them in the chart.
In the downloadable component, the data is pre-loaded as a static collection so you can open it and see the chart working immediately, before connecting any external data source.
Step 2: Load the Data Into a Collection
On the App OnStart property, load your data into a local collection. Using a collection rather than querying the data source directly on every filter keeps the component fast, because all the filtering happens in memory rather than making repeated calls to SharePoint or Dataverse.
ClearCollect( colEmployees, YourDataSource
)Then set the root employee — the person at the top of the chart — into a variable:
Set( varFocusEmployee, First(Filter(colEmployees, IdParent = 0))
)This variable is what the entire chart pivots around. When a user clicks on any person in the chart, this variable updates and the chart redraws around the new selection.
Step 3: Build the Employee Card
Before building the gallery structure, design a single employee card. This card will be reused at every level of the hierarchy, so getting it right once means everything looks consistent.
Inside a Container control, add:
- An Image control — set its Image property to ThisItem.PhotoURL
- A Label for the name — set its Text property to ThisItem.Name
- A Label for the job title — set its Text property to ThisItem.JobTitle
Set the OnSelect property of the container to:
Set(varFocusEmployee, ThisItem)This is what makes the chart interactive. Clicking any card anywhere in the hierarchy sets that person as the new focus, and every gallery in the chart recalculates around them instantly.
To highlight the currently selected employee, add a conditional border to the card container:
If( ThisItem.ID = varFocusEmployee.ID, RGBA(0, 120, 212, 1), RGBA(200, 200, 200, 0.3)
)This gives the selected card a blue border and keeps all other cards in a neutral grey.
Step 4: Build the Hierarchy With Nested Galleries
This is the core of the component. The hierarchy is rendered using nested Gallery controls, where each gallery filters the data to show only the people who report to the person in the parent gallery.
The top level — the focused employee — comes from the varFocusEmployee variable directly. This is the card you built in Step 3, bound to the variable rather than a gallery item.
The direct reports level — the row of people who report to the focused employee — uses a horizontal Gallery with this Items formula:
Filter(colEmployees, IdParent = varFocusEmployee.ID)The sub-reports level — the people who report to each direct report — uses a second Gallery nested inside the first, with this Items formula:
Filter(colEmployees, IdParent = ThisItem.ID)ThisItem.ID here refers to the ID of whichever person is being rendered in the outer gallery. Power Apps evaluates this independently for every card in the direct reports row, so each person’s sub-reports appear correctly below them.
The manager level — the person the focused employee reports to — is calculated using:
First(Filter(colEmployees, ID = varFocusEmployee.IdParent))The manager’s manager level — one step further up — chains the lookup:
First(Filter(colEmployees, ID = First(Filter(colEmployees, ID = varFocusEmployee.IdParent)).IdParent
))At this point you have a working five-level org chart that redraws when any card is clicked. The remaining steps make it production-ready.
Step 5: Make It Responsive With Flexible Containers
Fixed-position layouts break on different screen sizes. The component uses flexible containers throughout so the chart adapts correctly on desktop, tablet, and mobile without any extra work.
The outer layout structure is:
- A vertical flexible container spanning the full screen
- Inside it: a horizontal flexible container for the manager chain (levels -2 and -1)
- Below that: the focused employee card centred on its own row
- Below that: a horizontal flexible container for the direct reports row
- Inside the direct reports container: the nested galleries from Step 4
On the direct reports container, set:
- Justify: Center (so cards spread evenly regardless of count)
- Wrap: On (so rows with many reports wrap cleanly onto a second line)
On every flexible container, set both Flexible Width and Flexible Height to true.
This means the chart works on a 1920px widescreen monitor and a 390px mobile screen without any adjustments. The number of visible cards simply adjusts to the available width.
Step 6: Hide Empty Levels Cleanly
Not every employee has sub-reports. Not every focused employee has a manager two levels up. Showing empty gallery rows creates gaps in the layout that look broken.
Use the Visible property on each level’s container to hide it when it has no data:
For the sub-reports gallery inside each direct report card:
CountRows(Filter(colEmployees, IdParent = ThisItem.ID)) > 0For the manager’s manager row:
!IsBlank(First(Filter(colEmployees, ID = varFocusEmployee.IdParent)).IdParent)When these evaluate to false, the container collapses completely and the layout adjusts automatically. The chart always looks intentional, never empty.
Connecting to SharePoint, Dataverse, or SQL
The component is data-source agnostic. The only change needed is the ClearCollect line on App OnStart.
For SharePoint:
ClearCollect(colEmployees, 'Your SharePoint List Name')For Dataverse:
ClearCollect(colEmployees, 'your_dataverse_table')For SQL Server:
ClearCollect(colEmployees, SQLConnection.Table)Make sure the column names in your data source match the ones used in the formulas (ID, Name, JobTitle, IdParent, PhotoURL), or update the formula references to match your actual column names. That is the only configuration required.
For large organisations with hundreds of employees, consider loading only the current visible branch on demand rather than the full table. This keeps the app fast at scale.
What This Build Takes — And Where Most People Stop
If you have followed every step above, you now have a clear picture of what is involved in building this component from scratch:
- Setting up the data structure correctly
- Writing and chaining the Filter() formulas across five levels
- Designing the employee card and making it reusable
- Nesting galleries in the right order
- Building the flexible container layout
- Writing the Visible formulas to handle empty levels cleanly
- Testing across data sources and screen sizes
That is real work. For an experienced Power Apps maker it takes 60 to 90 minutes. For someone newer to the platform it can easily take a full day, especially when debugging nested gallery behaviour.
The downloadable component below does all of that for you. It is a fully built, tested Canvas App component that you import directly into any app or solution. It includes the complete five-level hierarchy, the data collection setup, responsive layout, light and dark theme support, and avatar binding — ready to connect to your own data source and deploy.
It is free. No payment. No subscription. Just fill in the form with your email and it will arrive in your inbox within minutes.
Download the Free Org Chart Component
You have seen how it works. Now get the finished version.
The component includes everything covered in this post — the five-level hierarchy, responsive layout, light and dark themes, avatar support, and a sample data collection so you can see it running the moment you import it.
Import it into your app, connect your data source, and it is ready to deploy. No build time. No debugging nested galleries. No figuring out flexible container settings.
✔ 100% Power Apps native
Works everywhere: web, mobile, embedded in Teams, SharePoint, model-driven apps (via custom page).
✔ Easy to customise
Adjust colours, sizes, layout, fonts, hover effects—everything is configurable.
✔ No external hosting
Everything lives inside the app. No need to approve external scripts or dependencies.
✔ Reusable component
You can drop this component into any solution or app you build.
✔ Works with any data source
SharePoint
Dataverse
SQL
JSON
Static collection (as in the demo)
Anything.
How the Component Works
The org chart uses a simple hierarchical structure:
- Main employee (level 0)
- Manager (-1)
- Manager’s Manager (-2)
- 7 direct reports
- Each direct report manages 2–4 sub‑employees
The UI is built using:
- Nested vertical galleries for each level
- Horizontal containers to arrange child items
- Flexible containers so resizing stays fluid
- Dynamic filtering to calculate relationships (
Filter(Employees, IdParent = ThisItem.ID)) - Image binding using male_X / female_X avatars
- Responsive layout, meaning it works on any device size
