organization tree web part

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.

organization tree web part 1

Export Functionality

  • Export the current tree view as a PNG image.
  • Export the full tree in its current state as a PNG image.
export functionality

Fit and Expand/Collapse

  • Fit the rendered tree within the provided area.
  • Expand or collapse all tree nodes with a single click.
fit and expand collapse

Search Bar

Use the search bar to find users by name within the rendered tree.

search bar

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.
user property hover

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.
organization tree settings

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.
select fields

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 design

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.
tree layout direction

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.
view options

Limit Nodes Rendering

You can choose how many child nodes to render under a parent node.

limit nodes
  1. Add the web part to a SharePoint page.
  2. Configure the web part using the property pane options.
  3. Interact with the organization tree using the provided features and controls.

Want to Work Together?

Item support includes:
  • Availability of the author to answer questions
  • Answering technical questions about item’s features
  • Assistance with reported bugs and issues
  • Help with included 3rd party assets
However, item support does not include:
  • Help with included 3rd party assets
  • Installation services

Item Information

Last Update: April 18, 2025
Released: April 9, 2025
Documentation: Yes

Tags