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
Image omitted: bind-data-modal.png
Data binding modal with options highlighted.
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.
Image omitted: bind-dot-walk.png
Data binding modal with black arrow pointing to pill view.
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.
Image omitted: bind-search.png
Data binding modal displaying search results for 'user'.
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.
Image omitted: bind-json.png
Data binding modal with black arrow pointing to JSON option.
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)