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.

Adding a dataset

Once you’ve added a collection and created your design with corresponding elements, you can add a dataset. Select the element you want to connect to your collection—a Repeater for example–and click the Connect to Data icon.

In the panel that opens, choose Create Dataset and select the collection you want to connect to. You can also name the dataset. When that’s done, click Create. The dataset will appear as an icon on the canvas with the name you assigned it.

A design in the editor with a Repeater with 3 items, all containing an image, title, text and a button. The Repeater is selected and the Connect Repeater panel is open with the option to create a dataset.

Connect elements to your collection

Select your desired elements and connect them to the corresponding field in your collection. You can only connect elements to their corresponding field type: images to an image field, text to a text field, etc.

If you’re connecting a Repeater, select the Repeater and connect each component from the panel. You only need to do this once, and all of the other Repeater items will update to display the content from your collection.

The design in the editor with three Repeater items displaying the same layout but different content. The Connect Repeater panel is open and connected to a dataset

Setting the dataset mode settings

Click on the dataset and choose Settings. In the setting panel, you can choose from 3 modes: Read-only, Write-only and Read & Write. The dataset mode determines how visitors can interact with the collection on your live site.

Read-only: Elements can read and display content from your collection, so site visitors can view it.

Write-only: Visitors can interact with user input elements and a submit button on your live site to add content to your collections. You can’t display collection content.

Read & Write: Page elements can display content from the collection and visitors can interact with user input elements and a submit button on your live site to add or edit content in a collection.

The dataset settings panel is open in the editor with the Mode dropdown open hovering over the Read-only option.

Setting the number of items to display

Control how many items from the collection are displayed in a Repeater or gallery by entering the value under Number of items to display.

The dataset settings panel is open in the editor with the number of items to display set to 3.

Filtering content

Create filters to display content based on a set of conditions that you apply. Select the dataset icon and open the settings panel. Click Add Filter. From the Field dropdown, choose which field from your collection you want to use to filter your content. Use the Condition dropdown to choose which criteria to filter by. For the Value source choose between:

Manual entry: filter by a specific value or text you enter
Another dataset: filter this dataset based on another one
User input element: let site visitors filter page content by selecting an option from an input element such as a dropdown

The design in the editor is darkened and a panel is open in the foreground where you can choose from different settings to add a dataset filter.

Sorting content

Set up content to display in the order you want by adding sort criteria. Open the Dataset Settings panel, and under Sort choose Add Sort. Choose which field to sort by and under the Order dropdown select how you want the field to be sorted.

The design in the editor is darkened and a panel is open in the foreground with the options to sort a dataset.

Editing sort and filter settings

You can adjust or remove filters and sorting properties from the Dataset Settings panel. Find the property you set, click on the 3 dots next to it and choose to either Edit or Delete it.

In the dataset settings panel, the mouse is hovering over the 3 dots next to the sort settings where there is the option to edit or delete the sort properties that were applied to this dataset

Follow these steps in the editor

Open exercise template →

Connect to data. Select the Repeater and choose the Connect to Data icon from the floating action bar.
Set up the dataset. In the panel that opens, click on Create Dataset. From the dropdown choose the “Projects” collection, then click Create.
Connect the elements to the content. With the Connect Repeater panel open, under Components choose the image source and connect it to the “Main Image” field in the collection. Go back to All Connections. Choose the first text element and connect it to the “Project Name” field. Connect the last text element to the “Project Type” field. You’ll see the Repeater populate with the content from the collection.
Set the number of items. Close the Connect Repeater panel and click on the dataset icon. Choose Settings and set the Number of items to display to 3.
Sort the content. With the Dataset Settings panel still open, choose Add Sort. From the Field dropdown choose “Project Name” and under Order choose Z→A. Click Add Sort.
Add a “Load More” button. From the Add panel, drag a button and place it underneath the Repeater. Change the button text to “Load More”. Select the button and choose Connect to Data from the floating action bar. Under Click action connects to choose Load more.
Preview the site. Click on the “Load More” button to see more items load.

Transcript

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.