Once you've imported data into your content entry, view the shape and contents of that data within the Content State panel in the Data tab.
- The Content State panel displays your data as a JavaScript object called
state. - Use double curly braces (
{{}}) to input data fromstateinto text.
After following the steps in Connect Data or Use Existing Data, go to the Content State panel within the Data tab to view your data as a JavaScript object. Data is stored within an object called state that can be accessed by other parts of the Data tab.
The state object can be accessed in other parts of the Data tab, typically within text fields or code blocks.
The Content State panel is a good way to confirm that data is available on your content entry. It is also useful when using an API or external data to understand what data has been imported.
State can be used within the Visual Editor in several ways. One of the most common ways is to create text content that depends on values stored within state.
Within a text block, use double curly braces ({{}}) around a state variable. This will input the value stored in state into the text content.
Note: Some knowledge of JavaScript is useful to use this feature. If you find yourself stuck, you may want to reach out to a developer on your team for assistance.
Example
In the image below, the name of a store's location has been added to a text box within double curly braces to format the name of the store.
The name of a store's location is accessed using the following code:
{{state.storeLocationData.data.name}} LocationIn JavaScript, the text between the double curly braces is called dot notation. Dot notation is a way to access nested properties of objects in JavaScript.
Beginning with state, when you click a dropdown arrow within the Content State panel, you add another word after the previous, joined by a dot.
In this example, you begin with state, then go to storeLocationData, then data, then name. That leads to the JavaScript code above.
If the data entry is ever changed, the text will update automatically.
When you Bind multiple data entries, you may use state within text for each entry. However, you need to replace state.[yourPropertyName] with resultsItem.
Example
In the image below, the name of a store's location has been added to a text box within double curly braces to format the name of the store.
The name of a store's location is accessed with the following code because each text box is repeated over each item within storeLocationData.
{{resultsItem.data.name}} LocationConnect Data stored within Builder or Use Existing Data to populate your state object. Or, leverage Content Inputs to create custom state for a Page or Section.