After connecting your data, bind that data to elements on a Page or Section to create unique and customizable experiences without code.
- Bind text, styles, images, and more Data to your Page.
- Repeat visual elements on a Page that depend on multiple Data entries.
Before binding data to your content entry, ensure you have done the following:
- You have stored data within Builder or have access to data through your own API. For details, see Create Data.
- Data is connected to your content entry via the Connect Data panel. For more, read Connect Data.
To bind a single data entry, you generally follow these steps:
- In the Connect Data panel within the Data tab, filter data by Entry.
- Select an element.
- Bind appropriate data to that element.
Where this binding will happen depends on the type of data.
To bind textual information, a link, or whether or not an element should be visible to the user, complete the following steps:
- Open the Data tab in the Visual Editor.
- Open the Element data bindings panel.
- Click + New Binding.
- Choose what aspect of the element you'd like to bind data to within the Get dropdown field.
- Choose the data you wish to bind within the from dropdown field.
Data stored within your chosen entry will then populate to your element or determine its link path or visibility.
Example
In the video below, the application is connected to two Builder Data sources: Site themes and Store location data.
The video shows business hour data from the Store location entry populated to the Page. A URL with a link to directions is also attached to the button.
To bind styles to an element, complete the following steps:
- Select a block on your Page.
- Go to the Style tab.
- Select the styling you would like to bind.
- Click the field and select Binding.
- Choose the data you wish to bind and select it.
The data you choose must match the intended style. For example, if you wish to affect the background color, binding that style to a number would not work appropriately.
Example
In the video below, the application is connected to two Builder Data sources: Site themes and Store location data.
The video shows the Get Directions button's color being changed when bound to data stored within Site themes.
To bind multiple data entries:
- In the Connect Data panel (under the Data tab), filter data using Query.
- Select a query for your data. Use Order by, Order type, and Limit, or create a custom query by clicking Edit next to Query.
- Select either a single block or a container block (such as a Box).
- Open the Element data bindings panel.
- Under Repeat for each, select the appropriate Results option.
The selected block will repeat based on the number of records in your query. For example, if you have 100 records but set a limit of 10, the block repeats 10 times.
If the selected block, such as a Box, contains nested elements, those elements can also use data binding. When binding data to nested elements, the data's title will be prefixed with Results Item.
Example
In the video below, the application is connected to two Builder Data sources: Site themes and Store location data.
The Store location data is set to Query in the Connect Data panel. Then, the data is sorted by Name.
A Box containing multiple elements is repeated using the Results option in the Element data bindings panel. Each entry is then dynamically bound to its name and locationHours fields.
Instead of entering data within Builder, Use Existing Data and connect it to your content entry. You can also learn more about Content Inputs and how to View and Use State.
