Navigate Your Organization Hierarchy with Ease: Introducing the Organization Tree Web-Part for SharePoint
Building and visualizing your organization’s hierarchy is crucial for effective communication and collaboration in any business. With today’s diverse and remote work environments, maintaining a clear understanding of roles and relationships is more important than ever.
Introducing the Organization Tree Web-Part for SharePoint, a powerful tool designed to simplify and enhance the way you navigate and understand your organization’s structure. This web-part provides an intuitive user interface and customizable features to help you manage and view your organization’s hierarchy with ease.
Overview
The Organization Tree web part is a SharePoint Framework (SPFx) component designed to display hierarchical organization structures.
Features
Organization Tree Display
The Organization Tree web part renders the hierarchical structure of the organization based on the selected configuration.
Export Functionality
Export the current tree view as a PNG image.
Export the full tree in its current state as a PNG image.
Expand or collapse all tree nodes with a single click.
Search Bar
Use the search bar to find users by name within the rendered tree.
User Property Hover and Node Click
Hover Information : Hovering over any user property value provides a tooltip with the complete information for that property, enhancing context without cluttering the view.
Node Click Callout : Clicking on a user node opens a callout with comprehensive user information, including all selected properties and additional details, facilitating deeper insights and interactions.
Getting Started
After adding the web part to a page, configure it using the property pane
Organization Tree Selection
Choosing between the complete organization tree or the tree of the current logged-in user significantly alters the scope and focus of the displayed hierarchy.
Complete Organization Tree (Show company hierarchy): Displays the entire hierarchical structure of the organization, providing a comprehensive overview of all departments, teams, and reporting relationships.
Current User Tree (Show current user’s team): Focuses solely on the hierarchical structure relevant to the currently logged-in user, streamlining the view to their immediate team and reporting chain.
Node Properties Selection
Selecting which properties of the user to display in each node allows for customization of the information presented within the organization tree.
Avatar: User’s profile photo.
Business Phone Numbers: The telephone numbers for the user.
City: The city where the user is located.
Company Name: The name of the company that the user is associated with. This property can be useful for describing the company that an external user comes from.
Country: The country or region where the user is located; for example, US or UK.
Department: The name of the department in which the user works.
Employee Hire Date: The date and time when the user was hired or will start work in a future hire.
Fax Number: The fax number of the user.
Job Title: The user’s job title.
Mobile Number: The primary cellular telephone number for the user.
Office Location: The office location in the user’s place of business.
Mail ID: The user’s principal name (UPN) of the user. The UPN is an Internet-style sign-in name for the user based on the Internet standard RFC 822. By convention, this should map to the user’s email name. The general format is alias@domain, where the domain must be present in the tenant’s collection of verified domains.
Tree Design Options
Customizing the design of the tree enhances the visual appeal and usability of the Organization Tree web part.
Default
Futuristic Design
Oval (Only Supports Avatar and Job Title)
Circle
Rectangle
New UI
Tree Layout Direction and Expanded Node Rendering
Choosing where expanded nodes should render impacts the spatial arrangement and focus of the organization tree within the view.
Top to Bottom: Presents the hierarchical structure from top to bottom, mirroring traditional organizational charts.
Right to Left: Renders the hierarchy from right to left, ideal for languages or cultures with right-to-left reading preferences.
Left to Right: Displays the hierarchy from left to right, offering an alternative perspective for visual representation.
Center of the View: Expands nodes in the center of the viewport, ensuring expanded sections remain prominently visible and easily accessible.
View Options
Configuring additional view settings such as collapse state, animation duration, and custom colors enriches the user experience and tailors the display to specific preferences.
Collapse State: Determines whether the tree nodes are initially collapsed or expanded upon loading the web part, optimizing initial visibility and navigation.
Animation Duration: Sets the speed at which nodes expand or collapse, enhancing visual appeal without sacrificing responsiveness.
Custom Colors: Allows for personalized color schemes, including user avatars and highlighted search results, facilitating visual differentiation and emphasis within the organization tree.
Limit Nodes Rendering
You can choose how many child nodes to render under a parent node.
Add the web part to a SharePoint page.
Configure the web part using the property pane options.
Interact with the organization tree using the provided features and controls.