← All projects

Org Chart Webpart

Schweizer Electronic AG

SharePointSPFxTypeScriptReactMicrosoft Graph API
Org Chart Webpart Screenshot

Note: Images have been modified to protect confidential information and may not reflect the exact original appearance.

Gallery

Org Chart Screenshot 1
Org Chart Screenshot 2

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.

Project Info

Client

Schweizer Electronic AG

Timeline

~3 months

Role

Solution Architect & Lead Developer

Platform

SharePoint Online

Tech Stack

SharePointSPFxReactTypeScriptGraph APIREST API