Connecting Page Elements to a Dataset
- A collection is where your data is held inside of Wix’s built-in database.
- A dataset links that data to pages on your site.
- A page element is a visual component of your website that can be added with the Add button.
When you have a dataset that is connected to a collection on your page, you’re ready to bridge the collection’s data to the page element(s). Text, images, buttons, galleries, links, lists & grids, inputs, and forms can all be connected to datasets. You can even connect datasets to custom designed elements, or the page itself!
A dataset can be created at any time in the Content Manager and is not visible when the page is previewed or published. Setting the Mode will determine how it can be used when page elements are added. There are three modes that can be set:
- Read & Write
Let’s try some examples, using these three types of datasets, to connect page elements with a collection of bikes.
Connecting a Dataset in Read-only Mode
One way a Read-only dataset can be used is to display images from a collection in a gallery element.
To make the connection from the gallery to the collection, click on the element, and then the Connect to Data button. This button is an essential tool when working with page elements and data.
Clicking the Connect to Data button brings up a menu with options to join different parts of your site. As you can see from the above image, the top section of the menu allows you to connect to a dataset on your page. Below that are Connection Options. The options that appear depend on the element, but they generally allow you to choose which parts of the page to connect with specific fields in your collection.
After configuring the options, preview the page and observe how the default elements are now replaced with data from your collection! Check out the change in the example below:
Connecting a Dataset in Write-only Mode
A dataset with the Mode set to Write-only can be used to send information to a collection.
These elements can be connected to another dataset that is Write-only using the Connect to Data button, just like before. As shown by the image above, these elements will connect to the same dataset. However, take note of how the Connection Options are different than the gallery element’s options:
- The text input will connect to the Title field.
- The upload input will connect to the Image field.
- And the button will connect to a ‘Submit’ click action. This means the data will be submitted when the button is clicked. You’ll also add a Submit message here. This will let the visitor know their content was submitted successfully.
Preview the page to see the Write-only dataset in action. When content is submitted successfully, the success message appears, and the content is now stored in the collection. You can check this by going back to the editor and looking at the collection. Once you confirm, open up Preview again and the new content is rendered on the page! Notice how the tricycle was added in the example below:
Connecting a Dataset in Read & Write Mode
Lastly, a dataset with the Mode set to Read & Write can be used to allow the visitor to see and edit the content of an element.
Above, is a dropdown element containing all of the items in the collection (for visitors to see/read all the selections) and a delete button (for visitors to write to the collection). Both elements are connected to an additional Read & Write dataset.
Once again, use the Connect to Data button to connect the elements to the collection as shown by the images above. Each of the elements will connect to the same Read & Write dataset, but the connection options are different.
- In the dropdown menu (shown on the left), the Connection Options are replaced with the option to Connect a List. Connecting a list is ideal here because you want items from your collection in the dropdown. Skip the top section, and turn on the option to ‘Connect dropdown list items’. This will reveal options to ‘connect a dataset’, and ‘labels and values’. The labels and values will connect to the Title field in your collection.
- The delete button will have the same menu (shown on the right) as the previous button, but, will get a ‘Delete’ click action. This will delete the item selected in the dropdown.
Preview the page to see the Read & Write dataset in action. The input box is now reading the data from the database by displaying the items in your collection. The delete button is writing to the database and will remove the item that was selected when clicked. You can check this by going back to the editor and looking at the collection. Once you confirm, open up preview again and the new content is no longer on the page. The example below shows that “tricycle” was successfully deleted:
Understanding how page elements, datasets, and collections, work together is also helpful information to have when creating dynamic pages. Dynamic pages allow you to use a single design layout to create multiple pages, each displaying an item from your collection.
The two key components that make up dynamic pages are:
- A Dynamic Category Page is a single page that contains all of the items you choose to display from a collection.
- A Dynamic Item Page is a single page for each individual item on the dynamic category page.
Dynamic pages are great because they automatically handle a lot of things for you. For instance:
- Each item gets its own URL and SEO.
- If an item is modified in the collection, it will be modified on the page automatically.
- If an item is added to the collection, a new item page is added.
- If an item is deleted from the collection, the corresponding item page is also deleted.
- If the design is changed on one page, it is changed on all of the pages.
Creating a dynamic page can be done through the Content Manager button.
Click Add Content Elements, and Choose Template.
A menu titled ‘Create a New Page’ will open, where you can choose a template for the dynamic pages you’ll be creating. This window is split into two sections, ‘Your Content’ and ‘Templates’. For this example, use a template created from the same collection from earlier. You’ll now see two new pages in your Site Structure sidebar - a dynamic category (All) page, and a dynamic item (Title) page.
Dynamic Category (All) Page
The first new page is the dynamic category (All) page. The ‘(All)’ signifies that this page shows multiple items from your collection. Navigate to the page by clicking on the name in the sidebar. A repeater element is automatically generated for you to help display multiple items on this page. If you click on the repeater you’ll see that the repeater and its items are already connected to data from your collection! This is the magic of dynamic pages. Preview the page to see this wizardry in action.
The repeater displays images from the Image field, and the titles from the Title field of your collection. You can also add new elements and connect them to additional fields in your collection later down the line. But what about the ‘More’ button? This is a link that is automatically generated to take the user to a dynamic item page with more specific item details.
Dynamic Item (Title) Page
The second new page in your Site Structure sidebar is the dynamic item (Title) page. The ‘(Title)’ signifies that this page shows a single item, based on the ‘Title’ field from the collection. This can change to any other field in your collection and will be used in the unique URL for that particular item.
Like the dynamic category page, the dynamic item page is already connected to data. You have the ability to make changes on a single item page that will carry over to the rest of the item pages. For example:
- Changing the design of one page will change the design of all the pages.
- The addition of a new element can be connected to the dataset and will appear on each item page with its own related data.
This is the magic of dynamic item pages! Preview a page to see the content from your collection. You can see how an entire page dedicated to an item can be useful when presenting large amounts of information. And having design consistency between the pages is icing on the cake!
The ability to update the collection, rather than individual page elements will significantly speed up your site’s development and maintenance. You now have a better understanding of how connections are made between page elements and datasets. The Connect to Data button, along with dataset modes, are essential tools in making connections back to a collection. Try creating your own elements, or adding new elements to a dynamic page. Use the knowledge you’ve gained from this article to make the connections to individual parts of the page.