Service Portal/Widgets

Organization chart (CD)

Allows users to visualize and navigate organizational structures within a portal, facilitating quick access to information about teams, departments, and reporting hierarchies

This widget is only available with the Content Publishing application installed from the ServiceNow Store .

Overview

  • Release version
    Australia
  • Available sinceYokohama
  • A11Y WCAG 2.1 AA

The Organization chart (CD) widget displays organizational hierarchies visually. This enables users to understand relationships between people while navigating different levels within an organization. This widget is particularly useful in contexts where understanding organizational structures is crucial. The key feature of this widget allows users to interactively expand and collapse node hierarchy. It is built to work seamlessly within ServiceNow's responsive design framework, ensuring compatibility across various devices and screen sizes.

ServiceNow Docs link
Organizational chart (CD) widget documentation

Additional information about the widget

Figma link
Organizational chart (CD) Figma widget

Service Portal Figma library

null

When to use

Use when you need to provide users with a visual representation of your organization's structure. It's ideal for scenarios where users need to quickly identify team members, managers, or departments, such as in employee directories or HR portals.

When not to use

Avoid using with other widgets. This widget is meant to be used by itself and on its own page. Don’t use when your organization is small or when the structure is relatively simple and doesn't require visual representation.

Usage

To effectively use the Organization chart (CD) widget, keep the following suggestions in mind:

  • Use a dedicated page: Use this widget, by itself, on a single page.
  • Configuration: Ensure the data model feeding the widget is configured with a clear, unambiguous manager-to-report relationship to prevent logical errors (like multiple CEOs reporting to each other). The component relies on accurate hierarchical data to render correctly.

Examples

  • Employee directory: Enables users to quickly search for a colleague and immediately visualize their entire reporting chain (manager, peers, and reports) within the organization.
  • HR & onboarding: Provides new employees with a clear, visual map of their department and leadership structure for rapid role and reporting comprehension.

Anatomy

The Organizational chart (CD) widget consists of the following components:

Organization chart (CD) widget anatomy
  1. Search: A search bar at the top of the widget allows users to find specific people within the organization.
  2. Reporting structure: Displays the vertical flow of authority and accountability, showing the precise relationship between a manager and their direct reports.
  3. Node card: This is the visual representation of an individual in the organization chart. The node card displays either a compact or expanded view. In the compact mode, it displays the minimal information needed to identify a person in the organization. In the expanded mode, it displays more details such as level and contact information.
  4. Connections tray: This displays when the active card has direct reports. It’s a visual representation of who is connected, to the active node card, in the organization. This often includes a numerical indicator (e.g., "12+") showing the total number of connections.

Card details

Default card details

Default/idle state: Displays the compact view for a node card.

Expanded card details

Expanded state: Displays the expanded view for a node card.

  1. Avatar: A small profile photo that relates a face to the name. It includes a status indicator to show if the person is currently logged in to ServiceNow. If no photo is available, the avatar’s fallback is to display the user’s initials.
  2. Name: The person's first and last name, serving as the main identifier on the card.
  3. Job title/role: The official title that gives context to the person's position and role within the company.
  4. Connections badge: A small numeric visual representing the total number of people the person is connected to within the organization.
  5. Dotted line reports (optional): In some cases, a numerical count displays showing additional dotted line reports the person manages.
  6. Profile information: Essential details that provide a richer context for the individual. This includes their department or team and contact information like their email and phone number.
  7. Contextual actions: Interactive buttons that allow users to take immediate action, such as "Call," "Email," or "View profile." These are accessible directly from the card to save time.

Mobile

Instance options

Important

There are no instance options to customize this widget within the Service Portal Designer.

Usability

This widget complies with all internationalization and accessibility requirements.

Internationalization

Accessibility

Learn how to access the actionable elements of this widget through keyboard interactions and screen readers. 

Widget tab order

Keyboard interactions

You can access the actionable elements of this widget with these keyboard interactions:

  • Tab: Moves focus to the next interactive element within the widget (e.g. the next link in the list)
  • Shift + tab: Moves focus to the previous interactive element within the widget (e.g. the previous link in the list)
  • Enter/spacebar: Activates the focused element
  • Escape (esc): Blur focus of element