Organization Chart widget
Summarize
Summary of Organization Chart widget
The Organization Chart widget displays employees in a hierarchical tree structure based on their managerial relationships. It leverages data from the User [sysuser] records to visualize the organization relative to a selected user. This base system widget can be used as-is in your Service Portal or cloned and customized to meet specific business requirements.
Show less
Using the widget
- Enter or select a user in the text input field to view their manager and subordinates.
- Click any employee card to open that user’s profile page by default, or configure the link to open a custom URL or portal page.
- Drag cards to rearrange the organization chart layout manually.
- Zoom in and out using magnifying glass icons or mouse scroll for better visibility.
Instance options
Instance options allow you to configure the widget appearance and behavior when placing it on a portal page. The configurable options include:
- User Background Color: Sets the color of the main user card using color names or hex codes. Default is lightblue.
- Node Background Color: Sets the color of subordinate cards connected to the main user card. Default is azure.
- Data Card Fields: Displays selected user record fields (name, title, department, email, phone, location) on each card. These fields are fixed and cannot be changed.
- URL: Defines a web address to open when clicking a card. This overrides the Page field if both are set.
- Page: Designates a portal page ID to open when clicking a card. If left blank and no URL is set, it defaults to the user profile page.
Other layout and presentation options like text alignment, card size, line color, and image size exist but do not accept custom values in this version.
Practical benefits for ServiceNow customers
- Quickly visualize and navigate organizational relationships within the Service Portal.
- Customize chart appearance to align with corporate branding using background colors.
- Improve user experience by linking cards to relevant pages or URLs beyond profile pages.
- Manage chart layout interactively with drag-and-drop and zoom functionality.
Next steps
- Create or edit portal pages using Service Portal Designer to add the widget.
- Configure widget instances to tailor appearance and behavior for your portal audience.
- Clone the widget if you need to extend or customize its functionality for your organization’s needs.
The Organization Chart widget shows employees in a tree structure relative to their manager. You can use this base system widget as-is in your portal or clone it to suit your own business needs.
Using the widget
In the text input field, enter or select a user to see their manager and subordinates. The widget uses information from the User [sys_user] record to display the organization hierarchy relative to the selected user.
Click a card to open the profile page for that user. To reconfigure the card link, change the URL or Page in the widget instance options.
You can drag individual cards to rearrange the chart.
You can zoom in or out of the chart view by clicking the magnifying glass icons or by scrolling.
Instance options
- User Background Color
- Node Background Color
- URL
- Page
| Field | Description |
|---|---|
| Data | |
| Card Fields | Fields from the user record that appear on each card. By default, each card displays the name, title, department, email, phone, and location of each user. There are no valid values that you can enter in this field. |
| Presentation | |
| User Background Color | Color of the user card. Use color names or Hex codes. For example, you can enter red or #ff0000. The user background color is lightblue by default. |
| Node Background Color | Color of cards that extend from the user card. Use color names or Hex codes. For example, you can enter yellow or #ffff00. The node background color is azure by default. |
| Table Layout | Size and margin of the content in each card. There are no valid values that you can enter in this field. |
| Row Layout | Alignment of the text in the card. The text is left-aligned by default. There are no valid values that you can enter in this field. |
| Line | Color of the lines that connect cards. The lines are black by default. There are no valid values that you can enter in this field. |
| Tree Layout | Size, spacing, and alignment of the chart. There are no valid values that you can enter in this field. |
| Picture Layout | Size of image space in each card. By default, the image space is 55x65 pixels. The user image is shrunk or stretched to fit the space. There are no valid values that you can enter in this field. |
| Behavior | |
| URL | Web address of the page that opens when you click a card. Use the part of the portal URL that references the page ID. For example, to navigate to the Service Catalog, enter ?id=sc_category. If left blank, clicking the card opens the page that is specified in the Page field. If the Page field is also blank, clicking the card opens the user profile page by default. |
| Page | Portal page that opens when you click a card. Use the page ID. If left blank, clicking the card opens the web address in the URL field. If the URL field is also blank, clicking the card opens the user profile page by default. Note: The URL field overwrites the Page field.
To specify a page rather than a URL, leave the URL field
blank. |