Organization Tree Web-Part

Are you ready to streamline your organizational structure and enhance visibility across departments?

Our Organization Tree Web-Part for SharePoint simplifies the process, offering intuitive navigation and customizable features to help you visualize your organization’s hierarchy effectively.

Download

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.

Fit and Expand/Collapse

Fit the rendered tree within the provided area.

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.

Usage

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.

Terms and Conditions

Navigate Your Organization Hierarchy with Ease: Introducing the Organization Tree Web-Part for SharePoint

Overview

The Organization Tree web part is a SharePoint Framework (SPFx) component designed to display hierarchical organization structures.

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.

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.

Fit and Expand/Collapse

Fit the rendered tree within the provided area.

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.

Export Functionality

Usage

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.

Terms and Conditions Privacy Policy

Organization Tree Web-Part

Navigate Your Organization Hierarchy with Ease: Introducing the Organization Tree Web-Part for SharePoint

Overview

Features

Organization Tree Display

Export Functionality

Fit and Expand/Collapse

Search Bar

User Property Hover and Node Click

Getting Started

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.

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.

Tree Design Options:

Customizing the design of the tree enhances the visual appeal and usability of the Organization Tree web part.

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.

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.

Limit Nodes Rendering

Usage