Connect data components

concept brazil Updated Sep 10, 2026 1 min read connect-data-components.md

Use the data binding modal to associate data exposed by local data resources to components on your UI Builder page.

[Omitted image "bind-data-modal.png"] Alt text: Data binding modal with options highlighted.

Option	Description
Undo	Undo the previous change.
Redo	Redo a change that has been undone.
Bind data using drag and drop	Show Pill view.
Use script	Show JSON view.
Toggle full screen	Expand the data binding modal to full screen size. Select again to reduce the data binding modal to smaller size.
Close	Close the data binding modal. If you have unsaved changes, you are given the option to save.
Data types	Lists page properties, data resources, and client states.
Formulas	Lists formulas that can be used. A search field is available.
Pill view	When Data types is selected, pill view enables you to specify a property value or display value. You may have to select several pills to get to a specific value.
JSON	When Data types is selected, the JSON option enables you to edit the raw JSON code.

There are two methods you can use for binding data: drag and drop, and editing JSON.

Binding data with drag and drop

Use this method if you want to use a visual process.

[Omitted image "bind-dot-walk.png"] Alt text: Data binding modal with black arrow pointing to pill view.

Use the search bar to find the data you would like to bind to your component.

[Omitted image "bind-search.png"] Alt text: Data binding modal displaying search results for 'user'.

Binding data by editing JSON

Use this method if you are comfortable working in and editing JSON code.

[Omitted image "bind-json.png"] Alt text: Data binding modal with black arrow pointing to JSON option.

Connect data to your components
Bind data exposed by local data resources to components on your UI Builder page.
Connect data to your components with formulas
Bind data exposed by local data resources to components with formulas on your UI Builder page.

Parent Topic:Dynamically expose data in UI Builder pages (advanced feature)

61 lines · 3.1 KB Wrap lines

---
title: Connect data components
description: Use the data binding modal to associate data exposed by local data resources to components on your UI Builder page.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/application-development/ui-builder/connect-data-components.html
release: brazil
product: UI Builder
classification: ui-builder
topic_type: concept
last_updated: "2026-09-10"
reading_time_minutes: 1
breadcrumb: [Dynamically expose data in UI Builder pages \(advanced feature\), Advanced UI Builder, UI Builder, Builder library, Developing your application, Classic app development, Building applications]
---

# Connect data components

Use the data binding modal to associate data exposed by local data resources to components on your UI Builder page.

## Data binding modal

\[Omitted image "bind-data-modal.png"\] Alt text: Data binding modal with options highlighted.

|Option|Description|
|------|-----------|
|Undo|Undo the previous change.|
|Redo|Redo a change that has been undone.|
|Bind data using drag and drop|Show Pill view.|
|Use script|Show JSON view.|
|Toggle full screen|Expand the data binding modal to full screen size. Select again to reduce the data binding modal to smaller size.|
|Close|Close the data binding modal. If you have unsaved changes, you are given the option to save.|
|Data types|Lists page properties, data resources, and client states.|
|Formulas|Lists formulas that can be used. A search field is available.|
|Pill view|When **Data types** is selected, pill view enables you to specify a property value or display value. You may have to select several pills to get to a specific value.|
|JSON|When **Data types** is selected, the JSON option enables you to edit the raw JSON code.|

There are two methods you can use for binding data: drag and drop, and editing JSON.

## Binding data with drag and drop

Use this method if you want to use a visual process.

\[Omitted image "bind-dot-walk.png"\] Alt text: Data binding modal with black arrow pointing to pill view.

Use the search bar to find the data you would like to bind to your component.

\[Omitted image "bind-search.png"\] Alt text: Data binding modal displaying search results for 'user'.

## Binding data by editing JSON

Use this method if you are comfortable working in and editing JSON code.

\[Omitted image "bind-json.png"\] Alt text: Data binding modal with black arrow pointing to JSON option.

-   **[Connect data to your components](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/application-development/ui-builder/connect-data.md)**  
Bind data exposed by local data resources to components on your UI Builder page.
-   **[Connect data to your components with formulas](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/application-development/ui-builder/connect-data-formulas.md)**  
Bind data exposed by local data resources to components with formulas on your UI Builder page.

**Parent Topic:**[Dynamically expose data in UI Builder pages \(advanced feature\)](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/application-development/ui-builder/data-resources.md)