UI Builder Data Resources
Data resources in UI Builder are used to fetch data for display within components. They allow you to connect data to components, making them reusable and dynamic.
You can use different data resources with the same component to display various datasets without creating multiple copies of the same component.
Dynamic data binding is the process of connecting data from a data resource, page parameter, or client state parameter to a component property.
Types of Data Resources:
Refer to the list below regarding the different types of data resources.
- Controller
- GraphQL
- Transform
- Client state
- Composite
- REST
Controller:
Controller data resources include data and event logic and enable component presets.
There are two types: Data controllers (manually added to a page) and UI controllers (added automatically when using page templates).
GraphQL:
GraphQL data resources execute GraphQL queries and mutations.
Transform:
Transform data resources use a script to transform input data into another format.
Client State:
Client state data resources are client-side data resources that include client information, domain-specific state or logic, and user preferences.
Composite:
Composite data resources combine multiple data resources into a single reusable data resource.
REST:
REST data resources are made through REST API requests.
Commonly Used Data Resources:
Glide Form: Returns information of a record specifically designed for configuring form components. It returns query data, along with additional information for other components related to a record.
Look Up Records: Returns a group of records from a table based on criteria set by the user.
Aggregate Query: Returns a group of records from a table based on criteria and can be categorized. The returned data includes the count, maximum, minimum, and average values for the specified categories.
Form Configuration: Returns information of a record specifically designed for configuring form components. It returns query data, along with additional information for other components related to a record.
Query Table Records: Returns a group of records from a table based on criteria set by the user.
Query Categorized Records:Returns a group of records from a table based on criteria and can be categorized. The returned data includes the count, maximum, minimum, and average values for the specified categories.
Dynamic Data Binding:
Dynamic data binding is the process of connecting data from a data resource, page parameter, or client state parameter to a component property for content display. There are different ways to bind data to a component:
There are a few different ways you can bind data to a component;
- Context binding
- Data resource binding
- Component binding
- Client state parameter binding
Context Binding:
Binding required or optional page parameters to a component using the @context syntax.
This is accomplished within the Configuration Panel, by using the Dynamic data binding option and specifying the Table and Sys ID component property values as @context.props.table and @context.props.sysId.
Data Resource Binding:
Binding data fetched by a data resource to a component using the @data syntax.
This is accomplished within the Configuration Panel, by using the Dynamic data binding option and specifying @data.look_up_record_1.result.number.displayValue for the Text component property value.
Component Binding:
Binding one component to another using the @elements syntax.
A good example of component binding can be seen on a page created with the List page template. This page contains a List component that references or binds to a List menu component, to determine the list of records to display based on the selected item in the List menu.
Client State Parameter Binding:
Binding the value of a client state parameter to a component using the @state syntax.
This is accomplished within the Configuration Panel, by using the Dynamic data binding option and specifying @state.csp_label for the Label component property.
Adding and Configuring a Data Resource:
To create a data resource on a page within an experience, follow these steps:
- Open the Data resources panel.
- Select + Add.
- Search existing data resources or create a new data resource.
- Select a data resource and configure it.
- Configure the data resource
- Save your work.
Note: Data resources can often be utilized from the global application in your scoped application.
Test Your Knowledge:
Q1: The process of connecting data from a data resource, page parameter, or client state parameter to a component property is called what?
- Data Resources
- Auto-mapping
- Dynamic Data Binding (right)
- Event mapping
Q2: What are data resources used for?
- To fetch data for display within components.
- Allows components to be reusable and dynamic.
- To perform operations on data such as create, update, or delete.
- All of the above (right)
Q3: Controller data resources can be found where?
- Components
- Page Templates (right)
- Themes
- None of the above.
Next
Next Lesson: Lesson 11 - Events, Client State Parameters, and Client Scripts.