Org Chart Webpart

Overview

SharePoint's built-in org chart is limited visually and functionally. This custom SPFx web part replaces it with a responsive solution that works across mobile, tablet, and desktop. Users can navigate the structure, search for people, and access contact details directly.

The Challenge

The main challenge was making an org chart usable on small screens.

Traditional hierarchical trees do not translate well to mobile devices and easily become hard to navigate.

The Solution

The web part uses a compressed, two-dimensional navigation model. Users move left and right between branches and up and down within a hierarchy.

Additional features include search across the organization, contact cards with hover interactions, and suggested people for quicker discovery.

Technical Highlights

• •SharePoint Framework (SPFx)
• •Microsoft Graph API integration
• •2D navigation system for hierarchical data
• •Organization-wide search
• •Interactive contact cards
• •Responsive design (mobile, tablet, desktop)
• •React with TypeScript

Results

The solution improved usability across devices, simplified navigation of the organizational structure, and made it easier for employees to find and contact colleagues.