Dependent dropdown in Workspace UI Builder

aryan_seth · ‎04-28-2025

I have 3 dropdown fields,
category
type
subtype
I want to make them dependent on each other, I have even stored the input in Client state parameters
note this for Workspace only.

Dibyaratnam · ‎04-29-2025

dropdown components usually set dynamically using array of id, label objects. so the lists those need to be shown on these dropdowns, update that property dynamically.

https://developer.servicenow.com/dev.do#!/reference/next-experience/yokohama/now-components/now-drop...

AbinC · ‎04-29-2025

Hi @aryan_seth ,

The Dropdown component enables users to select one or more options using a dropdown menu.

This task assumes you have placed the component on the page and are ready to configure the properties and events. For instructions on accessing and using features in UI Builder, see Customize UI pages using components .

Note: This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

Role required: admin or ui_builder_admin

Define a label for your Dropdown that differentiates it from other components in the content tree.
A label makes finding the component easier in a large list of components. For instructions on using the content tree, see Manage UI pages and page variants .
Select the Dropdown component, using one of these methods:
- Click anywhere within the component.
- Select the Dropdown label you created for your component in the content tree.
The property fields appear in the Config tab in the setup panel on the right.

Properties

Define the styles, button size of the dropdown menu, and ARIA properties value of your Dropdown component with these properties.

To configure the properties, enter either static or dynamic input. Enter dynamic input by selecting the input type.

Data binding: Enables you to create dynamic property values derived from multiple sources, such as state variables (@state) in the page, URL variables (@context), or payloads from a data resource (@data). For details, see Add and configure data resources to a page .
Scripting: Creates a scripted property value. For details on scripted values, see Create and bind a client state parameter to a component .

Table 1. Base propertiesLabel [property] Description

Placeholder text [placeholder]	Default label text when no items are selected. If you do not specify a value, especially in the case of iconic dropdowns, provide tooltipContent and/or an aria-label through the configAria property.
Variant [variant]	Selects button style of the dropdown trigger. Possible choices are: primary primary-selection secondary secondary-selection tertiary tertiary-selection
Hide container [bare]	Makes the dropdown trigger border and background transparent but retains its variant style setting when using an iconic button.
Size [size]	Button size of the dropdown trigger: Small, medium, or large.
Search behavior [search]	Controls how to filter the items as the user types into the integrated search input.
Disabled [disabled]	Disables the dropdown and prevents the dropdown from opening when the user interacts with it.
Label [label]	Sets the value of the label string used.
Label position [labelPosition]	Sets the position of the label relative to the dropdown trigger.
Label size [labelSize]	Sets the size of the label used.

Table 2. IdentifierLabel [property] Description

Placeholder icon [icon]	Placeholder icon to include in the dropdown trigger. This icon is replaced with the icon of a selected dropdown item if the item has an icon configured.
Hide caret [hideCaret]	Hides the default triangular caret icon that appears in the dropdown trigger.

Table 3. PaddingLabel [property] Description

Show padding

[showPadding]

Includes side padding on bare buttons. By default, bare buttons with labels don't have side padding.

Table 4. ItemLabel [property] Description

List items

[items]

Array of dropdown items

Dropdown item properties:

id (string | number): Unique identifier for the item.
label {string}: Text that describes the item.
sublabel {string}: Additional text for the item.
count {number}: Numeric indicator displayed next to the item.
icon {string}: Name of the icon to display next to the item. See the now-icon API and icon gallery for the list of valid names. Cannot be used with presence or avatarProps.
disabled {Boolean}: When true, the dropdown item is visible but not selectable by the user.
presence ("available" | "away" | "busy" | "offline"): Online status of a user to display in a dropdown list of users or statuses. Cannot be used with icon or avatarProps.

Table 5. SelectionLabel [property] Description

Selection [select]	Determines the action when a user selects an item in the dropdown menu. The options include: single: The panel closes, the trigger label is updated with the label of the selected list item, and the list item is marked as selected. multi: The panel stays open, the trigger label is updated with the selected list item count, and the list item's selected state is toggled on or off. none: The panel closes, the trigger label is not updated, and the list item is not marked as selected.
Selected items [selectedItems]	Array of IDs representing selected dropdown panel items. If multi-select mode isn't enabled, each time the user selects a list item, the previously selected ID is replaced with the new ID. If multi-select mode is enabled, IDs are added to or removed from the list. Use manage-selected-items to override the default behavior and handle the NOW_DROPDOWN#SELECTED_ITEMS_SET event manually.
Hide selected item [hideLabel]	Hides the selected items in the dropdown trigger. By default, the dropdown displays the selected item or a count of selected items in place of the placeholder text of the dropdown trigger label.

Table 6. PanelLabel [property] Description

Panel position [panelFitProps]	Properties to configure the dropdown panel. Valid keys are: position: Array of possible positions in which to place the panel, relative to its target, such as bottom-start or top-start. constrain: Object specifying size constraints relative to the panel's target. Choices are: minHeight, minWidth, maxWidth and maxHeight. offset: Number of pixels to offset the panel from the trigger.
Opened [opened]	Automatically updates when the user opens or closes the dropdown. Use manage-opened to override the default behavior and handle the NOW_DROPDOWN#OPENED_SET event manually.

Table 7. AccessibilityLabel [property] Description

Tooltip text [tooltipContent]	Text displayed inside the tooltip.
ARIA properties [configAria]	An object whose keys reference a specific HTML element within the dropdown. The value of each key is an object that contains an ARIA property and corresponding value. These ARIA properties are set on the specified element. The trigger key corresponds to the inner HTML <button> that acts as the dropdown trigger.

Events

Select event handlers to configure the actions (events) provided with the Dropdown component.

The Events tab shows the events used by the Dropdown component. To view the available events, select + Add event mapping. Select the event in the list to add one or more event handlers.

Event handlers

Event handlers work with data resources to link the dropdown actions to the data you want to display to your users. Expand the event in the list and add one or more event handlers.

For instructions on adding event handlers to an event, see Configure an event handler.

Event descriptions

Event Description

Dropdown list visible	The user opens the dropdown menu, and the content renders in the DOM. The content property is a node list containing the dropdown's inner now-dropdown-list element.
Dropdown list hidden	The user closes the dropdown menu, and the content is fully removed from the DOM.
Dropdown opened set	The user opens or closes the dropdown menu. Payload contains: true: Dropdown opens false: Dropdown closes
Selected items changed	The user changes the selected items and the Selection is set to Single or Multi. The event contains these keys: value: An array containing either a single ID or multiple IDs of the selected items. items: An array of objects of the item or items selected from the dropdown list.
Item selected	The user selects an item and the Selection is set to None. The event contains a reference to the clicked item. Handle this action for dropdown menus in which select="none".

Give us feedback to help improve your experience

Please do mark my answer helpful and help me to get this resolved as will help me to grow in community

Thanks,

Abin