Use the data tab to enable interactivity within your content entry. Utilize data directly through the Builder platform or connect to your own API to determine what is shown within a content entry.
- Use the Data tab to enable interactivity within your content entry.
- Use your own API by adding an API call within the Code panel.
After selecting a block within the Visual Editor, select the Data tab.
There are several panels within the Data tab:
- Element events: Trigger code to run when an event, such as a mouse click, is triggered.
- Element data bindings: Dynamically determine the content or visibility of a block based on code or state.
- Content inputs: Create new inputs of a variety of types that are associated with this content entry. Bind the values of these inputs to parts of the content entry.
- Content state: This panel displays the current state of the content entry. Data added to the Code panel will be displayed here alongside any other data related to this content entry.
- Code: Custom code can be run within this panel, including adding data directly to state. Data can be added directly or through an API call.
To begin using the Data tab, first add your own data. You can do so within the Code panel by manually adding data to Builder's internal state object.
Alternatively, load data dynamically by making an API call to an accessible API.
Once you have data accessible within the content entry, you can use it in several ways.
- Bind data to specific text. For example, change a heading from "Welcome back!" to "Welcome back, Diane!"
- Repeat a block dynamically. Iterate over an array of objects within your data, displaying a block element for each object. Within that object, dynamically change the text or visuals depending on information stored within the object.
- Trigger data changes through events. Choose an event type, such as on click, and modify data as you wish. With Element events, change the visibility of blocks within your content entry or update text and visuals.
In the video below, a fragment representing a team member's contact card is selected in the Layers tab of the Visual Editor. Then, within Element data bindings, the block is repeated for each person stored within data.
Read more in the Data binding overview, or see Add interactivity to learn how to use Visual Copilot to generate interactivity within your content entry.