Velo: Working with Wix Data

Wix Data lets you work with database collections, user input elements, and dynamic pages on your site. This article explains how you can enhance Wix Data functionality using Velo or with Wix Studio.

Enable Wix Data

To enable Wix Data:

Wix Editor:

• Make sure Velo Dev Mode is enabled.
• Click the Add icon on the left. Click CMS, then click Start Now.

Once enabled, your database collections appear in the Databases panel of the Velo sidebar, and your dynamic pages appear in the Page Code panel.

Wix Studio:

• If you haven't done so already, click on the left, then click Start Coding.
• Click Add on the left. Click CMS, then click Start Now.

Once enabled, your database collections appear under Your Collections in the CMS panel, and your dynamic pages appear in the Pages panel.

Managing Collections and Dynamic Pages

From the sidebar, you can perform the following Wix Data actions:

Collections

With Wix Data you can create and manage database collections on your site. Velo lets you expand your capabilities when working with collections. Keep the following information in mind when working with collections and code:

Field IDs

When you add a field to your collection, a Field ID is automatically created based on the Field Name. Field IDs are only visible if Velo Dev Mode (Wix Editor) or code (Wix Studio) is enabled. You can specify your own Field ID, if you wish. 

Field IDs are used when working with fields in code using the Data API or Dataset API. For example, if you want to insert an item into a collection using the Data API, you can use the following code:

1
wixData.insert("MyCollectionName", {"someFieldKey": "someValue"});

Hooks

The Data API contains hooks that allow you to run code before or after you interact with a collection.

To add a hook to a collection, hover over the collection name in the Databases panel (Wix Editor) or the CMS panel (Wix Studio) on the left, click the Show More icon and select Add Data Hooks. Learn more about data hooks. 

Non-Schema Fields

When you add fields to your collection using code, the fields are not automatically added to the collection structure and must be added manually. In the CMS, these fields appear with a warning icon, indicating that the field isn't defined yet. Learn more about the structure of your database collection. You can click on the field name to define the field type and add it to the structure.

Removing and Restoring Collections

If you remove a collection that is referenced in code, the code will no longer work and will generate an error in the Editor and in the published site. You can replace the collection name with a different one if relevant.

If you restore a collection you removed, the code will work again.

Data APIs

The Velo Data API and Dataset API provide additional functionality for working with data collections in your site. You can create customized searches and filters, manage and manipulate your data, and work with pagination, permissions, and hooks. Learn more about working with the Data API.

Data Quotas

Wix places quotas on the amount of data resources your site can use. These quotas affect things like the number of collections your site can have and the number of data requests your site can make per minute.

If your site requires additional resources, Wix offers a variety of premium plans to suit your needs.

To find out more about the data resources available for each package. Learn more about premium plans.

User Input

With Wix Data you can create user input forms and store user data in your collections. Velo provides additional layers of functionality when working with user input elements:

Input Validation

When collecting user input data, you want to make sure that the data entered is valid. Some input validation is available via the user input element Settings panel, but with code you can provide additional validation measures. Learn more about input validation.

Convert Regular Elements into Submit Buttons

Without code, you can create a form using user input elements and a "submit" element that saves the data into your collection when clicked. Only selected elements, such as buttons and images, can act as submit elements.

With code, you can add submit functionality to elements without a Submit option in the Connect panel. You can also add submit success and error messages when using those elements to submit. 

Create a Custom Signup Form

With Velo you can create your own custom signup form to replace the standard one. Then enable custom signup so your visitors are directed to your custom form for site registration.

Dynamic Pages

With Wix Data you can create dynamic pages to display content from your database collection on multiple pages in your site. You can also use Velo to interact with dynamic pages:

Hiding Dynamic Pages in Mobile

Without code, you can hide dynamic pages on your site when displayed on different devices such as a mobile device, by hiding the elements that link to the pages. Any code on your site connected to a hidden element will generate an error. Therefore it's best to use the formFactor property of the Window API to determine if the visitor is viewing the site from a different device, and use the elements' hide() or collapse() functions to visually remove the elements from the page. Learn more about hiding elements on different devices. 

Dynamic Pages and Hooks

You can add hooks to dynamic pages:

1. Click Menus & Pages  (Wix Editor) or click Site Pages  (Wix Studio) on the left side.

2. Click the Show More icon   next to the dynamic page.

3. Click Settings and select the Page Info tab.

4. Open the Advanced Settings tab, then click Add hooks.

5. Select the hooks you want to add, then click Add & Edit Code.

   When a request comes in for one of your dynamic pages, a router uses the URL of the request to decide which page to show and what data to bind to the page's dataset. You can add a data binding router hook to intercept this process at certain points and insert additional logic.

Working with Wix App Collections in Your Code

You reference the collections that Wix Apps add to your site similar to how you reference collections you create yourself, with one difference. 

To reference a collection in your code that you created yourself, you just use the collection name in the code. For example, this code retrieves an item with an ID of 00001 from the collection named myCollection:

1
wixData.get("myCollection", "00001")

To reference a collection that a Wix App added to your site you need to also include the App name in the path of the collection name. For example, let's say you also want to retrieve an item with an ID of 00001, but this time from the PrivateMembersData collection inside the Members database. 

In this case, you need to include Members in the path for the collection name, like this:

1
wixData.get("Members/PrivateMembersData", "00001")

You can also use Wix Data to add and update information in some Wix App collections. For example: 

1
let collectionToInsert = {
2
  "title":"New Collection"
3
};
4

5
wixData.insert("Portfolio/Collections", collectionToInsert)
6
  .then((item) => {
7
  console.log(item);
8
    })

You can find many examples using the Wix Editor in the Stores, Bookings, and Blog sections of the Velo Examples site.