CMS: About Connecting Page Elements to Collection Content

5 min read
Connecting content is the process of connecting your page elements to a collection. This allows you to:
  • Display the contents of a collection on your site pages
  • Capture user input and store it in a collection
To connect your elements to content in a collection, you first need to add a dataset to your page and then connect it to a collection. This makes the collection available for your page elements to use.

A dataset controls:
Note:
Datasets appear as elements in the Editor but are not displayed in your published site. You can put them wherever you want on the page.
You can think of a dataset as the bridge, or connector, between the elements on your page and your collection. First you connect your dataset to a collection, and then you connect your elements to your dataset. This connects your elements to your collection, as illustrated in the diagram below.
All the elements on your page that are connected to the same dataset work with your collection's content, as defined by the dataset. The dataset also tracks which item in your collection it is currently focused on. This affects how your collection's content is displayed, as well as how you capture user input. Let's look at some examples to see how this works.

Displaying content

Let's say you have a restaurant site and you want your visitors to be able to scroll through your menu options. You have a collection for all the items in your menu, and for each item you want to display: 
  • The name of the dish
  • When it's served
  • Whether it's an appetizer, main, or dessert
  • Allergy information about the dish
  • A picture of the dish
You can design your page to display each one of these items, but first you must do the following:
  • Connect the elements on the page so that they display different items in your collection. 
  • Add buttons to your page that let visitors scroll through your dishes.
  • Set up the elements so they change in sync. In other words, if one element displays information for a particular item in your collection, all the elements should display corresponding information for that same item. 
Connect the elements on the page so that they display different items in your collection. 
To set up the elements, you would add the elements to your page and then use the Connect to CMS icon to connect them all to the same dataset. You would also define which field from your collection you want them to display.

Add buttons to your page that let visitors scroll through your dishes.
Add buttons to your page to let your visitors move to the previous or next item in your dataset. These buttons need to be connected to the same dataset as your elements.
Set up the elements so they change in sync.
When a visitor clicks the previous or next button on your page, all your elements display the content for the same item in your collection. This works because the dataset keeps track of the item that is currently in focus, so all your elements that are connected to the same dataset work together. If one of the elements changes the current item in focus, it changes for all the elements connected to that dataset.

Capturing content

Let's say you want to create a form for your restaurant that lets visitors sign up for a free dinner. With User Input elements you set up your form to collect the information you want from your visitors.

Here also you use the Connect to CMS icon to connect each element to the same dataset. You also define which field in your collection you want to use to store the data that visitors enter in each input element.
Tip:
Don't forget to set the permissions for your collection and dataset so users can write to your collection.
You also need to create a submit button. Your visitors will click this button after they’ve completed filling out the form to submit their information to your collection. 

This button also needs to connect to the same dataset as your User Input elements. When the visitor clicks Submit, all the information they entered in each of the User Input elements creates a new item in your collection.

This works because the dataset keeps track of the current item in your collection. In this case, the dataset is pointing to a new empty item in your collection. Because all of your elements are connected to the same dataset, they are all stored in the same item.

About dynamic page datasets

When you create a dynamic page, a dynamic page dataset is added to your page automatically. Like a regular dataset, a dynamic page dataset lets you connect your page elements to a collection. However, there are some ways that dynamic page datasets are different from regular datasets.

The content that a dynamic page can display is controlled by its URL. Because of this, unlike a regular dataset, in a dynamic page dataset you cannot change the collection that the dataset is connected to.

Because the URL controls the content the page can display, it also acts as a filter for your collection's content. Here, too, you change the content filtering by changing the URL definition in the page settings. You can still use the dynamic page dataset settings to add more filters and to sort the content on your page.

You also cannot delete a dynamic page dataset from your page. To remove the dataset, you need to convert the dynamic page to a regular page.

Did this help?

|