With Builder, you can enter data once, use it throughout your site, and when you update that data, it updates everywhere.
You can store images, text, CSS styles, and many other types of data for re-use throughout your app.
Tip: For the most up-to-date information on this topic, see the official documentation, such as Intro to Models and Data Models.
This tutorial shows you how to create some data in Builder and use that data through the following steps:
- Entering data in Builder
- Connecting data
- Using your data to visually build dynamic content
To demonstrate using your Builder data in your app, this post walks you through creating a page of recipes. Each recipe features:
- a name
- description
- prep time
- button copy
- an image
- image alt text for accessibility
- image credit
To create some data to work with, we need to make a model. Models tell Builder what something is. For example, we have to create a Recipe and specify what kinds of things make up a recipe, such as the dish name, description, and prep time.
Click on the Models icon on the Builder left sidenav.
Click the +Create Model button.
In the dropdown that appears, select Data.
Give your new model a name. This example uses "recipe".
When your model is created, click on Recipe to edit.
To add a new piece of data, click on the +New field button at the bottom.
Give this field a name, such as dishName and click +New Field again to add another field.
Name your next fields prepTime , description, image, photoCredit, altText, type, and buttonCopy. Make sure that you set the image type to file so that you can use an image file later.
Tip: You can specify the file type of each data entry. Most of them are text except for two. The Image is of type file, meaning you'll be able to upload a file as the kind of data and Photo credit is Html, meaning you can use rich text, including html–like links and other html tags–in that field and it will render automatically.
Click Save at the top right when you're done.
Now that we've defined what a Recipe is, we can add some recipes to Builder.
Click the Content icon in the left sidenav.
In the Content view, you should now see your Recipe model. Click Recipe. Let's add some data.
Click on the +New Entry button and choose Recipe.
Fill out the new recipe as follows:
- Content Entry Name: Bouillabaisse
- Dish name: Bouillabaisse
- Description: A traditional French fish soup.
- Image: Link below.
- Photo credit: Link below.
- Button copy: Let's make soup!
- Prep time: 1 hour
- Type: Soup
- Alt text: A bowl of soup topped with herbs.
For our soup image, we're using a photo by Innes Linder from Pixabay. You can copy and paste the suggested credit text from Pixabay into the Photo credit field. Because you set that data type as html, the links will work automatically.
When you're done, click the Publish button.
Fill out a second recipe as follows:
- Content Entry Name: Blueberry Pie
- Dish name: Blueberry Pie
- Description: A fruity homemade treat.
- Image: Link below.
- Photo credit: Link below.
- Button copy: Time for pie!
- Prep time: 45 minutes
- Type: Dessert
- Alt text: A freshly baked pie with a lattice crust.
For our pie image, we're using a photo by LaurindaMary from Pixabay.
When you're done adding recipes, you should have two: Bouillabaisse and Blueberry Pie.
Back in the Content section, switch from Recipe to Page under Models.
In the Page section, click the +New button and select Page.
Call the new page Cooking and click the Create Page button.
When you are prompted to choose a starting template, choose Blank. The editor for your new page loads automatically.
In your new page, go to the Featured tab, then Simple and drag and drop the Featured Content template into the working area. This template takes care of most of our styling and is responsive by default so our page will look great on any device.
Tip: This tutorial focuses on getting Builder data on the page, so doesn't cover styling and plain text in detail. If you'd like to duplicate the "Delicious Recipes" header, drag in a text box, change the color to a dark orange, and set the font to 40px and Alex Brush.
Now that you have the template on the page, go to the Data tab and click the Builder icon.
When prompted, choose Recipe.
Now the Data tab shows Recipe as a data source. Click the Pick an Entry button.
Let's have dessert first! Choose Blueberry Pie.
Click the header "Something great to say" and then the Options tab.
With the header selected, you can bind your data to it. On the Options tab, click the Bind Data icon with the four dots on the right.
Click the down arrow to select Recipe - Data - Dish Name.
👉Tip: As an alternative to scrolling through the list, you can type in the pull down field to filter the options. Here, we've typed "name". This is a helpful shortcut as your data grows.
Now the name of the Recipe displays as Blueberry Pie in the text field along with a statement in the Options tab notifying you that this text field is connected to a data source.
Select the next section of copy that begins with "Some more great things...".
In the Options tab, click on the Bind Data icon to the right.
Scroll or filter for the Blueberry pie Description.
Now you should see "A fruity homemade treat."
Repeat this process to bind the next field, "Enter some text..." to your Prep time data, and the button text to the Button copy data.
Select the placeholder image in the template. With the image selected, you can bind the pie picture.
To find the Blueberry Pie photo, click the Bind Data icon to the right of the Image Options tab.
Select Recipe - Data - Image.
The pie image should show up as soon as you select it.
Accessible images have alt text, or text that a screen reader can read to describe the image. To bind to our alt text, make sure you're on the Options tab for the image and click on the Bind Data icon to the right of the Alt text field.
Scroll or filter to find and select Recipe - Data - Alt Text.
You won't see the page change, but you're making a big difference for visitors to your site who depend on assistive technology.
Tip: Notice how the Bind Data icon appears throughout Builder? Anywhere you see it means you can bind data specific to that element.
Now that you've added one recipe, you can add many more. If you only drag in another recipe card, though, you'll notice that any changes you make also affect the first card. This is because you are currently only connected to one Recipe. We need to add the other recipe so we can get to its data.
In the Data tab, you'll see the current Recipe, but we need to add another. Click the +Connect Data button and select Builder.io or just click the Builder icon.
When prompted, choose Recipe.
Now Recipe 2 appears in the Data tab.
To make the second Recipe's data available, you need to select it so Builder knows which Recipe to use for Recipe 2. Click on the three dots to the right of Recipe 2 to expand the options. Click the Pick an Entry button.
Select Bouillabaisse to associate it with Recipe 2.
Now, when you click the Bind Data icon for the different elements, you'll see that Recipe 2 data is available.
This article walked you through creating and using data in Builder. Data binding is a robust feature available throughout Builder, and is available wherever you see the Bind Data icon. You can use data binding to get styles, list data, and you can even filter your results.
