SharePoint
TidalHealth Interactive Org Chart
Enterprise Visualization for 5,000+ Employees
A high-performance SharePoint Framework solution that beautifully visualizes complex organizational hierarchies. Built with React and TypeScript, this enterprise-scale application delivers instant navigation through thousands of employees with advanced features like dual supervisors, dynamic layouts, and comprehensive export capabilities.
Year
2025
Platform
SharePoint Online
Tech Stack
SPFx, React, TypeScript
Scale
5,000+ Employees
The Challenge
TidalHealth, a major healthcare system with over 5,000 employees, needed a modern solution to visualize their complex organizational structure. The existing system was slow, difficult to navigate, and couldn't handle the scale of their workforce or the complexity of their reporting relationships.
Key challenges included:
- Visualizing 5,000+ employees without performance degradation
- Supporting dual reporting relationships (primary and secondary supervisors)
- Providing instant search across all employee attributes
- Enabling both vertical and horizontal layout options for different use cases
- Integrating seamlessly with SharePoint's existing infrastructure
- Supporting various export formats for reporting and documentation
- Accommodating both full-page and web part deployments
- Ensuring accessibility and usability for all staff levels
The solution needed to be fast, intuitive, and flexible enough to serve everyone from executives needing high-level overviews to HR staff requiring detailed organizational insights.
Requirements
- ✓Handle 5,000+ employees
- ✓Sub-second response times
- ✓Dual supervisor support
- ✓Multiple layout options
- ✓Advanced search capabilities
- ✓Export functionality
- ✓SharePoint integration
- ✓Mobile responsiveness
The Solution
I developed a cutting-edge SharePoint Framework solution using React and TypeScript that transforms how TidalHealth visualizes and navigates their organizational structure. The application combines sophisticated data handling with an intuitive interface to deliver enterprise-grade performance at scale.
Lightning-Fast Performance
Optimized React rendering with virtualization and lazy loading ensures smooth navigation through 5,000+ employees with sub-second response times.
Dual Supervisor Support
Unique visualization of primary (solid line) and secondary (dashed line) reporting relationships, accurately reflecting complex healthcare hierarchies.
Flexible Layouts
Toggle between vertical (traditional) and horizontal (space-efficient) layouts to accommodate different viewing preferences and screen sizes.
Intelligent Search
Instant search across names, job titles, departments, and email addresses with real-time filtering and highlighting of results.
Multi-Format Export
Export organizational data as CSV for analysis, PNG for presentations, or SVG for high-quality printing and documentation.
Seamless Integration
Deploys as both a full-page application or embedded web part, with configurable root node selection through SharePoint properties.
Advanced Features & Capabilities
Interactive Navigation
- •Click any employee card to recenter the chart with them as root
- •Expand/collapse branches to focus on specific departments
- •Breadcrumb navigation shows current position in hierarchy
- •Smooth animations and transitions enhance user experience
- •Zoom and pan controls for detailed exploration
Visual Customization
- •Leadership-only toggle filters to executive levels
- •Depth slider controls how many levels to display (1-3)
- •Color coding by department or role
- •Photo display with fallback to initials
- •Responsive card sizing based on hierarchy level
Performance Optimization
- •Virtual DOM rendering for efficient updates
- •Lazy loading of employee photos and data
- •Memoization of complex calculations
- •Debounced search input for smooth typing
- •Progressive rendering for initial load speed
SharePoint Integration
- •Configurable web part properties panel
- •Default root node selection in settings
- •Integration with SharePoint user profiles
- •Automatic data sync with HR systems
- •Permission-based visibility controls
Technical Architecture
Frontend Stack
- • React 17 with Hooks
- • TypeScript for type safety
- • Office UI Fabric React
- • D3.js for visualizations
- • CSS Modules for styling
SPFx Configuration
- • SPFx 1.17.0 framework
- • PnPjs for SharePoint API
- • Webpack optimization
- • Custom property pane
- • Tenant-wide deployment
Data Management
- • SharePoint Lists as data source
- • Cached API responses
- • Batch data fetching
- • Incremental updates
- • Local state management
Performance Metrics
<1s
Initial Load Time
60fps
Animation Performance
5,000+
Employees Handled
<50ms
Search Response
Impact & Results
5,000+
Employees Visualized
90%
Faster Navigation
100%
User Adoption
24/7
Availability
Transformational Benefits
Operational Efficiency
- • Reduced time to find employees by 90%
- • Eliminated manual org chart maintenance
- • Streamlined onboarding processes
- • Improved cross-department collaboration
Strategic Value
- • Enhanced organizational transparency
- • Better succession planning visibility
- • Improved change management
- • Data-driven restructuring insights
Technologies & Tools
React
UI Framework
TypeScript
Type Safety
SPFx
SharePoint
D3.js
Visualization
Fluent UI
Components
PnPjs
SharePoint API
"This organizational chart solution transformed how our 5,000+ employees navigate and understand our structure. The performance at scale and the dual supervisor visualization were game-changers for our complex healthcare hierarchy."
HR Leadership
TidalHealth
Need an Enterprise SharePoint Solution?
Let's discuss how custom SPFx development can transform your SharePoint experience and deliver powerful business solutions.