Connecting Page Elements to a Dataset

Prior Knowledge

A collection, dataset, and page elements are necessary components for transmitting data between the database and pages on your site. 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 on your page that is connected to a collection, 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!

Dataset Modes

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-only Write-only 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 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.

The image above shows one way to do this is with user input elements and a submit button.

These elements can be connected to the Write-only dataset with 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 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

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).

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 (shown on the right) will have the same menu 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 Write-only 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:

Sandbox vs. Live Collections

One very important thing to remember is that there are two versions of each collection. The version you work on while editing your site is called the sandbox collection. Think of the sandbox as being a test environment, where you can practice manipulating the data and set the structure of your collection. This allows you to make changes to the collection without affecting the published site.

The published site that users interact with, uses live collections. In short, the live version uses the same structure as the sandbox version, but it is reserved for the actual data you want live on your published site.

You should also be mindful of syncing your collections. Live collections are not available until a site is published. You may run into a situation where you publish a site with datasets/collections, and when you visit the published site, the content from the collection is not being displayed. This is most likely a result of the sandbox not being synced to the live collection. When you sync the sandbox to the live collection, the structure and information stored in the sandbox now becomes available in the live collection. Also, keep in mind that if you update the information and/or structure of the sandbox version, you’ll also need to sync it to the live collection and publish your site before the new structure and/or information is available.

Additional Information

• The live collection is not created until the site is published.
• When the site is published, the live collection structure is created (a duplicate version of the sandbox structure), but there is no content in the collection yet.
• Once synced, sandbox content is populated into the live collection. If new information gets added to the sandbox, in order for that new information to show up in the website, another sync is required.
• Syncing can also be done from the live collection to the sandbox collection.

Wrap Up

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. Use the knowledge you’ve gained from this article to make the connections to individual parts of your own Wix pages.