Velo Tutorial: Creating a Form for Editing Data in a Database Collection

7 min read
Visit the Velo Documentation Center to onboard and continue learning.
In this tutorial, you’ll learn how to build a custom form to allow users to edit existing data in a database collection. We’ll show you how to lay out a form with User Input elements, create a database collection and connect it to these elements using a dataset. Finally, we’ll test the form in Preview mode and publish the site so that users can edit content. 

1. Enable Velo

Velo adds advanced functionality to the Wix Editor, allowing you to create a more interactive and dynamic site.

To enable Velo:
On the Editor Top Bar, click Velo, and then click Enable Velo
 
Once you’ve done this, you’ll notice a few changes in the Editor:
  • The Properties panel appears. If you close it, you can open it again from the Tools menu.
  • The code panel is added to the bottom of the Editor.
  • The Site Structure sidebar is added to the left of the Editor.
  • More elements are available in the Add menu, including Database and User Input.

2. Create a Database Collection

A database collection is where you store the content you need for your site, or where you collect information submitted by your users. When you create a collection, you also need to define its permissions. These let you control what your users can do with the data in your collection. Here, we’re adding a collection that users will be able to edit using a form. ​

To create a collection:
  1. In the Site Structure sidebar, click the + icon next to Database and select New Collection. If the Introducing Database Collections screen pops up, click Start Creating.
  2. In the Create a Database Collection screen, give your collection a name.
  3. From the dropdown, select the intended use for your collection. Consider which users you want to be able to read, write, modify, or delete your data. For your form, you should choose one of the presets that allows the correct users to modify content. You might need to select the Custom Use option and select the proper roles for each permission.
  4. Click Create Collection.
    Your new collection opens in the Data Manager, which is a spreadsheet-style table that lets you manage the content in your database collection.

3. Set Up Your Database Collection

Add a field for each piece of information you want your users to edit and then enter the data.

To set up a collection:
  1. In the Data Manager on the right of the header row, click the + to add a field to your collection. 
  2. Set up the field to match the information you want users to submit. Make sure to select the correct field type to match your field’s content.
  3. Create a field for each of your planned form elements. 
  4. Depending on how you want your edit form to be used, you may want to enter data into your collection.

4. Design Your Form

Your form must include elements that allow users to edit information. To set this up, you need to use User Input elements, which are available from the Add menu.

To get started:
  1. Go to the Add menu and select User Input.
  2. Drag elements from User Input onto your page to design and lay out your form. You can select from elements like Input, Text Box, Radio Buttons, and Dropdown.

5. Set Up Your Elements

Once you add User Input elements, you’ll need to configure each element in its Settings panel.​ Settings include things like the type of the input, its placeholder text, its initial value, if the element is a required field, and if the element is read-only.

​To set up your elements:
  1. Select a User Input element, click the Settings icon, and use the Options to configure it.
  2. Repeat this for each of the User Input elements in your form.​

Now you’ll need to connect your User Input elements to your collection. We'll use a dataset to do that, which we’ll cover in the next few steps.

6. Add and Configure a Dataset

A dataset connects your elements to your collection. When you add a dataset, you'll need to decide which collection you want to connect to, whether you want your users to be able to read and/or write to your collection, and more. ​

To add a dataset to your page:
  1. On the Add menu, click Database, and then Dataset
  2. Select the dataset that was added to your page, and click Manage Dataset
  3. In the Dataset Settings panel, under Connect a Collection, select your collection.
  4. Select Read & Write for the Mode.
  5. Optionally, you can set filtering and sorting for the dataset.
  6. Close the panel.

7. Connect Your Form Elements

Once you have your dataset configured, you can connect your elements to it. You need to go to each of the elements in your form and connect it to the same dataset. Each time you connect an element, you also define which field in your collection the values of its properties should connect to.

To connect your User Input elements:
  1. Select an element and click its Connect to Data button.
  2. Select the field in your collection where the information is to be stored.
  3. Repeat this for each of the User Input elements in your form.

In the next step, we'll create some buttons to perform editing actions on the dataset.

8. Create Browse and Submit Buttons

Now that all your elements are connected to the same collection through the same dataset, you need to allow users to browse through and edit information. To do this, add buttons to your page, connect them to the same dataset as the other elements, and define their click actions.

Depending on what you want to allow users to do with your form, you can create buttons for any of the following actions: Submit, Next dataset item, Previous dataset item, New, Revert, and Delete.

In most instances, you will want to at least create Next and Previous buttons so users can browse through the data. Note that when a user clicks a Next or Previous button, any information that has been changed in the current item is saved.

To create a button:
  1. Add a button to your page and change its text to fit its function.
  2. Click its Connect to Data button.
  3. In the Connect Button panel:
    1. Select your dataset.
    2. Under Link connects to, select the button's action.

When users edit data, it is validated before it is saved.

9. Test Your Page

Now you can test your page in Preview mode. The content you view and edit will be from your Sandbox Database, which is used only in the Wix Editor and is visible only in Preview mode.

To test your page:
  1. Click Preview.
  2. Edit some data and click the button.
  3. Go back to the Editor and then check your collection to see the updated information.

10. Publish Your Site

Now it’s time to publish your site so that users can edit content. ​

Publishing your site creates an empty version of your collection with all the fields from your Sandbox Database. The content your users will see in the published version of your site is saved in your Live Database, which you can access through your dashboard. Once you publish your site to create a collection in your Live Database, you can add data to the Live Database manually or sync the data from your Sandbox database.

To set up a Live collection:
  1. ​In the Editor, click Publish to publish your site.
  2. If you want to manually add data to your Live collection:
    1. Go to your dashboard, and then from the left sidebar, click Database.
    2. Select the collection and enter your live data.

To sync data from your Sandbox collection to your Live collection:
  • In the Data Manager menu, click Sync and then choose Copy all items to Live

11. View Your Live Data

When you publish your site, your form will be available to your site visitors. When a user edits data in the form in the published site, the form data will be saved to your Live Database.

To view user-edited information:
  1. Click Settings from the top bar, and then click My Dashboard
  2. On the Sidebar Menu, click Database.
  3. Click the collection to view your live data.

Next Steps

With Velo you can add more functionality to your page:
  • Enhance your page functionality with code.
  • Add customization using dataset hooks and collection hooks.
  • Add interactivity using the Velo API.
  • Post the data to any web API-enabled 3rd party using web modules and dataset hooks.

Did this help?

|