Velo Tutorial: Importing and Exporting Collection Data with Code

Visit the Velo by Wix website to onboard and continue learning.

In this article we will demonstrate how to import data into a collection and export data from a collection using code. We create a simple form and then write some code that imports and exports JSON data from your collections using the the wix-data API.

Note: You can also import and export collection data using the CMS.

Prerequisites

Since the wix-data API requires that your data be in JSON format, you'll need to be familiar with converting your data to and from JSON.

Note: In this article we assume you are starting with your data in a spreadsheet or database application.

To import data into a collection:

Use a spreadsheet or database application to export your data in the CSV format.
Use an online tool, such as convertcsv.com, to convert your CSV data to the JSON format.
Use the form as described below to import the JSON data into your collection.

To export data from a collection:

Use the form as described below to export the JSON data from your collection.
Use an online tool, such as convertcsv.com, to convert your JSON data to the CSV format.
Use a spreadsheet or database application to view or import your data from the CSV format.

Data Setup

Since we are going to use the wix-data API to import data, your data will need to use the Field ID, and not the Field Name, to identify which fields you are using in your data source. Meaning, the first row of your CSV file should contain your collection's field IDs.

To find the Field ID for your collection's fields, click the vertical ellipses that appears when you hover over a field in the Editor and select Manage Properties.

If you want to provide your own IDs for the items you are adding into your collection, add a field with the key _id that contains the ID values. If you don't provide your own ID values, each item will get a unique, auto-generated ID value.

Important: The API will not check the data you are importing to ensure it matches the Field Type of the field you are importing the data into. Data with the wrong type will be imported successfully and an error indication will be shown in the CMS.

Form

Start with a new page in your site and create a form similar to the one shown here:

Type	ID	Usage
Text Input	collectionInput	For entering the collection to import to or export from
Text Box	textBox	For entering data to be imported or for displaying data that has been exported
Button	importButton	For triggering an import
Button	exportButton	For triggering an export

Code

In the Page Code panel (Wix Editor) or the Code editor (Wix Studio), start by importing the wix-data API as the very first line of code.

Copy

Import Code

Select the Import button we created above and use the Properties & Events panel to add an onClick event handler.

In the Page Code panel (Wix Editor) or the Code editor (Wix Studio), add the code below to the event handler:

Copy

This code pulls the name of the collection and the JSON items from the form elements. It then loops through each JSON item and adds it to the collection using the insert() function.

Export Code

Select the Export button we created above and use the Properties & Events panel to add an onClick event handler.

In the Page Code panel (Wix Editor) or the Code editor (Wix Studio), add the code below to the event handler:

Copy

This code pulls the name of the collection from the form element and uses it to query the collection using the query() and find() functions.

The above code will export up to 50 items from your collection. If your collection has more than 50 items, you need to add a limit that specifies the maximum number of items that the query will return:

Copy

The maximum allowable limit is 1000. So if you want to export more than 1000 items from your collection, you will need to perform multiple queries.

Using the Form

To import data using the form:

Enter the name of the collection you want to import the data into.
Paste the data in JSON format into the text box.
Click the Import button.
As each item is imported into the collection, a success or error message is logged to the console.

To export data using the form:

Enter the name of the collection you want to export the data from.
Click the Export button.
The exported data is displayed in the text box or an error is logged to the console.

Additional Considerations

When you enable Sandbox for your collections importing or exporting can be performed on your Sandbox or Live collection. If you import or export while you're previewing your site, the operation will be performed using your Sandbox collection. If you import or export on your published site, the operation will be performed using your Live collection.

Warning: Publishing your site with the form created above is a potential security risk. Either don't publish your site with the form or take measures to ensure that it is only accessible to visitors with the proper permissions.

You may need to use the form on your site only once to import or export data from the Live collection.

In that case you should consider if you want to publish your site to work with the Live collection or work with the Live collection through the Sandbox collection to avoid the potential security risk described above.

Using the form with the Live Collection without publishing your site

To export the data from your Live collection through the Sandbox:

Create the form and add the code.
Copy the items from your Live collection to your Sandbox collection.
Preview your site and use the form to export your data.
Delete the page that contains the form before your next site publish.

To import data to your Live collection through the Sandbox:

Create the form and add the code.
Preview your site and use the form to import your data.
Copy the imported items from your Sandbox to your Live collection.
Delete the page that contains the form before your next site publish.

Using the form on your published site

If you are going to import or export more than once and need the form for future use:

Create the form and add the code.
Hide the form's page so it doesn't appear in your site's menu.
Password protect the form's page so visitors can't access the page even if they have its URL.
Add a Member Login button if necessary (see note below).
Publish your site.
Use the form when previewing your site to import and export using your Sandbox collection.
Use the form on your published site to import and export using your Live collection.

Note: If your site contains a Member Login button and you log into your published site, you will be assigned the Admin role, giving you full permissions to the collections you want to import and export from. If you are not logged into the published site, you will be assigned the Visitor role. You will only be able to import into collections where the create permission is set to Anyone, and you will only be able to export from collections where the read permission is set to Anyone.

API List

The following APIs are used in the code in this article. To learn more, see the API Reference.

$w.TextBox

$w.TextBox.value - Sets or gets an element's value.

$w.TextInput

$w.TextInput.value - Sets or gets an element's value.

wix-data

wix-data.insert( ) - Adds an item to a collection.
wix-data.query( ) - Creates a query.
wix-data.WixDataQuery.find( ) - Returns the items that match a query.
wix-data.WixDataQuery.limit( ) - Limits the number of items a query returns.

Was this helpful?

Yes