---
sourceDocument: Brazil ServiceNow AI Platform user interface
sourceDocumentLink: https://www.servicenow.com/docs/r/platform-user-interface

 Release :

    - brazil

ft:locale :

    - en-US

ft:publication_title :

    - Brazil ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Organization Chart widget

# Organization Chart widget {#ariaid-title1}

Release version: Brazil  
Updated September 10, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read
Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI  
This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.  

## Summary of Organization Chart widget

The Organization Chart widget displays employees in a hierarchical tree structure based on managerial relationships using data from the User \[sysuser\] records.
It allows ServiceNow customers to visualize and navigate the organizational structure by selecting any user to view their manager and subordinates.
Show full answer Show less  
This base system widget can be used directly in your Service Portal or cloned and customized to meet specific business requirements.

## Using the widget

* Enter or select a user in the input field to display their organizational hierarchy.
* Clicking on any user card opens that user's profile page by default, with configurable navigation options.
* User cards can be dragged to rearrange the chart, and zoom controls allow adjusting the view scale.

## Instance options and configuration

Key configurable settings in the widget instance include:

* **User Background Color:** Customize the background color of the main user card using color names or Hex codes (default is lightblue).
* **Node Background Color:** Set the color for subordinate user cards (default is azure).
* **URL and Page Fields:** Define the navigation behavior when clicking a card by specifying a URL or a portal page ID. The URL field overrides the Page field. If both are blank, clicking opens the user profile page.
* **Card Data Fields:** By default, cards display user name, title, department, email, phone, and location. These fields are sourced from the user record.

Other instance options related to layout, alignment, sizing, and line colors exist but do not accept user-defined values and therefore cannot be customized.

## Practical benefits

* Enables clear visualization of organizational hierarchies directly in your portal.
* Improves user navigation by linking organizational roles to profile pages or custom portal pages.
* Supports customization of appearance and navigation to align with your branding and workflow needs.

## Next steps

* Create or edit portal pages using Service Portal Designer to incorporate the widget effectively.
* Configure widget instances to tailor appearance and navigation behavior.
* Clone the widget if you require advanced customization beyond the base functionality.  
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 {#org-chart-widget__section_x1f_mxk_qjb}

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 {#org-chart-widget__section_e2r_nxk_qjb}

Use the instance options to configure the Organization Chart widget for a portal page.  
Note:  
There are no valid values for several instance options. By default, you can set only the following instance options:

* User Background Color
* Node Background Color
* URL
* Page
{#org-chart-widget__ul_njv_kmy_qjb}
{#org-chart-widget__table_mtf_cyk_qjb__entry__2}

| 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 <kbd class="ph userinput">red</kbd> or <kbd class="ph userinput">#ff0000</kbd>. 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 <kbd class="ph userinput">yellow</kbd> or <kbd class="ph userinput">#ffff00</kbd>. 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 <kbd class="ph userinput">?id=sc_category</kbd>. 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. |
[ ]

{#org-chart-widget__table_mtf_cyk_qjb}
**Related tasks**   

* [Create and edit a page using the Service Portal Designer](https://www.servicenow.com/docs/3Q1~efo_1EM7WoKE8B61cA#t_ConfigureAPage "Create or edit a page and use layouts to organize the columns that house the widgets.")
* [Configure widget instances](https://www.servicenow.com/docs/fUIoYT7FVTOwTDBIgWjQgA "Create unique instances of widgets by configuring the options for each instance.")
* [Clone a widget](https://www.servicenow.com/docs/kWVflT2Sy9FW6mf5RMGRsA "Take advantage of existing code by cloning and editing an existing widget.")

