---
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/australia/application-development/ui-builder/connect-data-components.html
release: australia
product: UI Builder
classification: ui-builder
topic_type: concept
last_updated: "2026-03-12"
reading_time_minutes: 1
breadcrumb: [Dynamically expose data in UI Builder pages \(advanced feature\), Advanced UI Builder, UI Builder, Builder library, Developing your application, 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/australia/markdown/australia/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/australia/markdown/australia/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/australia/markdown/australia/application-development/ui-builder/data-resources.md)