Datasets.

Use datasets to display content from a collection in the Content Manager on a site, and update the content without touching the design. You can use datasets to allow multiple pages to retrieve content from the same collection but change how it’s displayed from one page to another.

Use datasets to display content from a collection in the Content Manager on a site, and update the content without touching the design. You can use datasets to allow multiple pages to retrieve content from the same collection but change how it’s displayed from one page to another.

Let’s explore how to use datasets to display content from the Content Manager on an Editor X site.

Using the Content Manager you can create, store and edit site content without touching the design. You can retrieve this content and display it in your design by connecting content collections to elements on a site using datasets.


Let’s see how it works.


First, you need to create a content collection. We’ve created this one to showcase different projects on our site.


The content collection looks like a spreadsheet, it’s arranged in columns and rows. Each row is called an item, which in this case represents an individual project, and contains all the data about that project. Every item is made up of fields, which are these columns containing different types of content like title, image, description and more. And if we need to, we can add more items and more fields.


Now let’s look at how to display this content on our site.


Here on our site, we’ve set up a Repeater. This is an ideal tool for displaying multiple items with the same layout and different content from a collection.


We need to connect this design with our collection in the Content Manager to display our content. To do that, we’ll use a dataset to create a link between the content collection and the design on the page.


Once we choose Connect to Data, we can create a dataset.


We’ll connect the dataset to our projects collection so it knows where to find the content to retrieve and display on the site.


Then, under Components, we’ll connect each Repeater element to its corresponding field in our collection.


We only need to connect each Repeater element once–then the rest of the Repeater items update to display the content from each item in our collection.


Next we’ll adjust the dataset settings to tailor how we want to display our content in the Repeater.

We’ll give the dataset a name.


And here, we can choose from 3 possible modes: In Read-only mode, visitors can only view content from a collection. Write-only mode lets site visitors input content into a collection. In Read & Write mode, visitors can use input elements to edit or add content in a collection.


For our site design, we’ll stay with read-only mode.


When we connected the Repeater elements to our collection, the number of Repeater items on the page changed, because the Number of items to display is set to 12. Let’s change that number to 3.


We can also choose what order to display items on our site by adding sorting properties. For example, we’ll display our projects chronologically by sorting the items by when they were created from old to new.


Looks good so far. But what if we have a lot of projects and we only want to show specific ones? We can apply filters to the dataset to filter items, or allow users to filter them.


We can manually add a filter to one or multiple fields in our collection. For example, our collection has a field called project type. Let’s say we’re not ready to show off a certain type of project. Under Fields, we’ll select the project type field, then set the Condition to Is not. We’ll add the Value we don’t want to display—in this case, small projects. Now items with that project type won’t appear on the page.


Another option is to filter one dataset by another dataset, which is useful when you have multiple datasets that relate to each other in some way. To learn how to use this filter type, check out our video about dynamic pages.


You can also filter by the user’s input value. This lets page visitors filter the items using an input element like a dropdown.


But for now, we’ll stick to the Manual entry filter. We’re finished adding our dataset, so let’s preview the site.


All of our content is displayed nicely, and because it’s linked to the dataset, whenever we need to we can update or add new content from the Content Manager without touching the design.


Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.

NEXT VIDEOS

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Learn how to add new sections, rearrange them & flip them to vertical.

Watch Now

LESSONS & EXERCISES

Title

Learn how to work with sections—the building blocks of your site.

Start Lesson

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

See all results ▶