Web Hierarchy View
Visualize hierarchical structures with interactive org charts and tree views
Hierarchy View Overview
Hierarchy View displays data with parent-child relationships as tree structures or org charts, helping visualize organizational and hierarchical structures.
Supports expand/collapse nodes, drag-and-drop reorganization, and detailed node information display.
Key points
• Tree Structure: Display parent-child relationships as tree
• Org Chart: Visualize organizational hierarchy
• Expandable Nodes: Click to expand/collapse sub-nodes
• Drag & Drop: Drag nodes to reorganize hierarchy
• Node Details: Display avatar, name, title, metrics
• Search & Filter: Search and filter nodes
• Zoom Controls: Zoom in/out for overview or details
• Export: Export org chart as image/PDF
Use Cases
Hierarchy View Applications
| Business Function | Parent Field | Display Info | Benefits |
|---|---|---|---|
| Org Chart | manager_id | Employee name, title, photo | Visualize reporting structure |
| Department Structure | parent_department_id | Department name, head count | View department structure |
| Product Categories | parent_category_id | Category name, product count | Manage category hierarchy |
| Location Hierarchy | parent_location_id | Location name, stock qty | View warehouse structure |
| Account Chart | parent_account_id | Account code, name, balance | Visualize chart of accounts |
Org Chart Features
Key points
• Employee Cards: Display photo, name, job title, contact
• Direct Reports: Number of direct reports on each card
• Reporting Lines: Clear lines between manager and reports
• Vacant Positions: Highlight unfilled positions
• Quick Actions: Click card to view profile, send message
• Layout Options: Vertical, horizontal, compact layouts
• Print View: Optimized layout for printing
• Share: Generate shareable link for org chart
Drag & Drop Reorganization
Steps
1. Enable Edit Mode: Click Edit button to enable drag & drop
2. Drag Node: Click and drag node to move
3. Drop Target: Drop on node that will become new parent
4. Confirm: Confirm reporting structure change
5. Auto-update: System automatically updates parent_id field
6. Validation: Check business rules (no circular reference)
7. Save: Save changes to database
Best Practices
Key points
• Use photos for org chart for easy recognition
• Keep hierarchy depth reasonable (max 5-6 levels)
• Regular updates to ensure org chart accuracy
• Use colors to highlight departments or teams
• Export and share org chart with new employees
• Set permissions to control who can reorganize