Use Data models, Sections, Data binding, Dynamic Preview URLs, and a bit of code to empower your marketing teams to create content and designs with no developer intervention.
- Create a Data model and Section model that serves as a template.
- Connect the two models and their preview URLs using Dynamic Preview URLs. Updating one updates the other.
The video below demonstrates the creation of a new Music Review data model entry. When the content entry is being created, a preview of how it looks is displayed to the right.
To complete this tutorial, you need:
- The ability to create new Content Models.
Begin by creating a new Data model to contain details about your music reviews.
- Go to the Content Models page within your Space.
- Click the + Create Model button.
- Choose the Data option.
- Add a Display Name and Description. For this tutorial, choose Music Review as the name.
- Create fields for the Data model, detailed in the table below.
- Click the Save button.
| Name | Type | Required |
|---|---|---|
spotifyEmbedCode | Code | Yes |
reviewScore | Number | Yes |
reviewContent | HTML | Yes |
slug | Text | Yes |
For more details on creating a Data model, visit Data models. If you wish to add validations to your fields, visit Model validation hooks.
Now that your Data model is created, create a new content entry.
- Go to the Content page within your Space.
- Click the + New Entry button.
- Choose the Music Review option.
- Enter details into the Spotify embed code, Review score, and Review content fields. You can choose your own song, or use the embed code below.
- Provide a name to the content entry.
- Click the Publish button.
<iframe
style="border-radius:12px"
src="https://open.spotify.com/embed/track/19kHhX6f6EfLU7rcO3RqjO?utm_source=generator"
width="100%" height="352"
frameBorder="0" allowfullscreen=""
allow="clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy">
</iframe>The video below shows the process of creating a content entry for a Music Review Data model. Notice how there is no visual display when adding this content.
Next, create a new Section model that represents your music reviews. This is the visual element of your music reviews.
- Go to the Content Models page within your Space.
- Click the + Create Model button.
- Choose the Section option.
- Add a Display Name and Description. For this tutorial, choose Music Review Template as the name.
- Create a field for the Data model, detailed in the table below.
- Click the Save button.
| Name | Type | Model | Required |
|---|---|---|---|
musicReview | Reference | Music Review | Yes |
The Reference type means that instead of entering data, you choose an existing content entry. In this case, the content entry you choose is a Music Review entry.
To view your template, create a preview page within your codebase. Create a new component within your connected application with the following code, replacing YOUR_API_KEY with your application's API key.
// Review.tsx
import { BuilderComponent, builder } from "@builder.io/react";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
builder.init("YOUR_API_KEY");
const MODEL_NAME = "music-review";
const MODEL_TEMPLATE_NAME = "music-review-template";This code imports all necessary tools, sets your API Key, and variables for your models.
Next, add the following function within the same file.
// Review.tsx
// import statements...
async function getArticleAuthorAndPreview(slug: string) {
const reviewData = await builder.get(MODEL_NAME, {
query: {
"data.slug": slug,
},
options: { enrich: true },
});
const articleTemplate = await builder.get(MODEL_TEMPLATE_NAME, {
options: { enrich: true },
});
return {
review: reviewData,
template: articleTemplate,
};
}This function requests data from the Builder Content API, returning data for both the Music Review model and the Music Review Template. In this case, the Music Review is retrieved based on the slug property while the first Music Review Template is chosen.
Now create your component.
// Review.tsx
// import statements...
// getArticleAuthorAndPreview() function...
export default function MusicReview() {
const [review, setContent] = useState();
const [template, setTemplate] = useState();
const params = useParams();
useEffect(() => {
const slug = params.reviewSlug || "";
getArticleAuthorAndPreview(slug).then(({ review, template }) => {
setContent(review);
setTemplate(template);
});
}, [review]);
if (!template || !review) {
return <div>Loading...</div>;
}
return (
<BuilderComponent
model={MODEL_TEMPLATE_NAME}
content={template}
data={{ review }}
/>
);
}This component uses the getArticleAuthorAndPreview() function to request data from the Builder API and stores the response within state. In this case the component uses params to access the review's slug.
Because this page is used to preview the Music Review Template, the template data is passed as the content for the Builder component. The review details are passed to the component with the data property.
Finally, create a route within your application so that this component can be reached.
// main.tsx
import MusicReview from "./routes/music-reviews/review";
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
{
path: "/music-reviews/:reviewSlug",
element: <MusicReview />,
},
// Other routes...
]);Now that you have a way to view your template, update the Preview URL of your Music Review Template Section model.
- Go to the Content Models page within your Space.
- Click on your Music Review Template model.
- Under Preview URL, click the Edit dynamic preview URL button, represented by the
<>sign. - Replace the existing content with the code block below, replacing
YOUR_API_KEYwith your Space's API key. - Click Save.
const getDisplayUrl = (slug = 'default-preview') => {
return `http://localhost:5173/music-reviews/${slug}`;
}
const apiKey = 'YOUR_API_KEY';
const model = 'music-review';
const id = content.data.musicReview.id;
const url = `https://cdn.builder.io/api/v3/content/${model}?apiKey=${apiKey}&query.id=${id}&enrich=true`;
return fetch(url)
.then(response => response.json())
.then(({ results }) => getDisplayUrl(results[0].data.slug))
.catch((error) => getDisplayUrl());The code above does the following:
- Creates a function called
getDisplayUrl()which generates a content entry preview URL. - Defines several variables to be used in constructing a request URL.
- Requests data from the Content API for the currently selected Music Review.
- If successful, the preview URL is defined based on the returned Music Review's slug. Otherwise, a default URL is returned.
To confirm this is working:
- Go to the Content page within your Space.
- Click the + New Entry button.
- Choose the Music Review Template option.
- Name the content entry.
- Within the Options tab, under Music Review, choose the content entry you previously created.
If you check the content entry's preview URL, you'll see the path should include the Music Review's slug value.
Having connected your Music Review to your Music Review Template, connect your content entry's data to blocks within Builder.
- Add a Code block to the page.
- Within the Block Options, above the code block, click the Edit Bindings button.
- Within the dropdown list, select the Spotify Embed Code option.
- Follow the same steps for your Review Score and Review Content, using Text blocks instead of Code blocks.
The video below demonstrates this process.
Once your data is bound, update the design as you desire.
Now that you have a way to view your template, update the Preview URL of your Music Review Data model.
- Go to the Content Models page within your Space.
- Click on your Music Review model.
- Under Preview URL, click the Edit dynamic preview URL button, represented by the less-than and greater-than signs.
- Replace the existing content with the code block below.
- Click Save.
return `http://localhost:5173/music-reviews/${content.data.slug}`;When you edit a Music Review content entry, the URL above is dynamically generated to pull the slug from current entry. This means that, when editing Music Review content entries, you see a preview of the model according to the template.
To confirm this is working, return to one of your Music Review content entries. As long as your slug is inputted, your preview is of the most recent template. When you edit your data, the template preview updates as well.
Read more about Section and Data models. Or, learn more about Data binding, visit Bind data, State and actions, and Custom code.