When people think about org charts in Power Apps, they often assume it requires a PCF control, a React component, or custom code hosted somewhere outside the app. But the truth is:
👉 you can build a clean, functional, hierarchical org chart using only out‑of‑the‑box Power Apps controls.
No custom components.
No external dependencies.
No code beyond Power Fx.
In this post, I’ll walk you through the approach behind my new Org Chart Component—a reusable building block that lets you embed an interactive org chart into any Power App with minimal effort.
Why Build an Org Chart with Only Standard Controls?
Most Power Apps projects need an org chart at some point—whether for HR, project teams, helpdesk escalation, approval chains, or department directory apps. But introducing PCF adds overhead:
- Additional deployment steps
- Versioning management
- Lack of low-code customisation
- Higher admin/security scrutiny
- Longer development cycles
By building this component using the native building blocks of canvas apps—Galleries, Containers, Variables, and Collections—you get:
✔ 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
