> For the complete documentation index, see [llms.txt](https://foxocode.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxocode.gitbook.io/docs/fox-plugins/excel-csv-import-export.md).

# Excel/CSV Import/Export

Advanced Excel & CSV Import/Export is a powerful plugin that allows you to seamlessly import and export Excel (XLS/XLSX) and CSV files while keeping full control over your table design. Import and export data from any existing Bubble table or create your own custom table with a unique layout and design - the plugin handles the data, not the UI.

## Features

✅ Import Excel (XLS/XLSX) and CSV files into your database\
✅ Export database records to Excel and CSV with a single click\
✅ Works with any existing table or custom-designed data interface\
✅ Create tables with your own unique layout, styling, and design\
✅ Flexible column mapping for precise data organization\
✅ Support for large files with optimized processing speed\
✅ Compatible with various database structures\
✅ No predefined table or layout - complete UI design flexibility\
✅ User-friendly and highly customizable integration

## Links

Demo page: [https://foxocode.co/excel-csv-import](/docs/fox-plugins/excel-csv-import-export.md)

Demo page editor: [https://bubble.io/page?version=live\&type=page\&name=excel-csv-import\&id=chart-demo-54334 ](<https://bubble.io/page?version=live\&type=page\&name=excel-csv-import\&id=chart-demo-54334 >)

{% hint style="info" %}
If you prefer, you can use the plugin's edit page as a reference for setup instructions. This will provide a hands-on guide to configuring and using the plugin within your Bubble.io application.\
By accessing this page, you can see how the plugin is set up, including element placements, workflow configurations, and best practices for importing Excel and CSV files efficiently.
{% endhint %}

## Instruction

### Import

1. **Install the Plugin:** Add the Advanced Excel/CSV Import plugin to your application.
2. **Add Plugin Element:** Locate the plugin in the visual elements section and place it on your app page. Ensure the element is visible during the design phase; it won't appear in the live preview.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FlskGYcRhJ3HX4Wb697Nf%2FScreenshot%202025-03-18%20at%2015.07.22.png?alt=media&amp;token=90113d1c-6bc6-44cd-afc8-d189b3e59abb" alt=""><figcaption></figcaption></figure>

3. **Set Up Uploader and Button:** Include an uploader element and a button on your page to facilitate file selection and initiate the import process.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FqkkyxctwpirrZSxfgqhU%2FScreenshot%202025-03-18%20at%2015.15.44.png?alt=media&amp;token=4b7e1b04-8b9c-475c-8253-b7fa3326aa43" alt=""><figcaption></figcaption></figure>

4. **Configure Plugin Action:** Assign the 'Start' plugin action to the button to trigger data import.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FJfow620S8eHlRTtjOMld%2FScreenshot%202025-03-18%20at%2015.13.06.png?alt=media&amp;token=a3e5e485-19a6-4112-880a-dd4e6260bc48" alt=""><figcaption></figcaption></figure>

5. **Specify Uploader in Action:** Within the plugin action settings, link the uploader containing the pre-loaded file to ensure proper data import.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FwXgxB9o0uzJwZIDyr9JL%2FScreenshot%202025-03-18%20at%2015.18.50.png?alt=media&amp;token=e45f0a5b-5656-470b-b69a-caa32fb38735" alt=""><figcaption></figcaption></figure>

6. **Get the Result and Save it to the Database:**

* Create an API workflow in the Backend Workflow section.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2Fa2aIOXhVHt974sDWEjpJ%2FScreenshot%202025-03-18%20at%2016.15.56.png?alt=media&amp;token=b6660b7c-4b77-446e-b7e7-6d6b13bd6a4b" alt=""><figcaption></figcaption></figure>

* When creating an object in the database, specify which column from the document you want to save and in which field.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2F1s8sOXQQ0ImzJp45KAeo%2FScreenshot%202025-03-18%20at%2016.38.48.png?alt=media&amp;token=2f02d1b6-6467-4807-8906-d32f16670aa4" alt=""><figcaption></figcaption></figure>

* Run the **"Schedule API Workflow on a List"** action using your newly created API workflow.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FrQzxSiohp19c2pjFybeX%2FScreenshot%202025-03-18%20at%2016.15.30.png?alt=media&amp;token=2508d85f-96a3-4fcc-9f89-b68fbefdd4fe" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You need to **add a short delay (pause)** between the **plugin action workflow** and the **Schedule API Workflow on a List** execution. This ensures that the first workflow has enough time to process before launching the database-saving action.
{% endhint %}

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FBHBXuq1C7Bm1ZShG2B55%2FScreenshot%202025-03-18%20at%2016.17.30.png?alt=media&amp;token=79fa0572-a7d7-4e26-84e4-3378f0de81a5" alt=""><figcaption></figcaption></figure>

By following these steps, you can effectively integrate the Advanced Excel/CSV Import plugin into your application, streamlining your data import processes.

### Export

1. Add Plugin Element: Locate the plugin in the visual elements section and place it on your app page. Ensure the element is visible during the design phase.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FumZo0MIBne9VzikV15Vg%2FScreenshot%202025-11-27%20at%2018.51.34.png?alt=media&amp;token=bf46817d-34c8-4ab4-8f61-3869df7e7165" alt=""><figcaption></figcaption></figure>

2. You can create your own custom visual table or display the element’s built-in table.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FX4TWPmoyigm7zYhgom58%2FScreenshot%202025-11-27%20at%2018.58.10.png?alt=media&amp;token=f2b3503c-537c-49ad-975c-92a54aff4bba" alt=""><figcaption></figcaption></figure>

2.1  If you want to create your own custom table, keep in mind that the element must remain visible. Make sure the “Create table” checkbox is disabled - this way, the table won’t appear in the preview. If you want to keep the element from interfering with your page layout, simply set its height to 1px.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FE6Nv0iTkss3MOzn5UfnE%2FScreenshot%202025-11-27%20at%2019.05.50.png?alt=media&amp;token=ef51a9e2-75b0-414f-a0c0-92f262c0f66f" alt=""><figcaption></figcaption></figure>

2.2  If you want to use the plugin’s built-in table, simply check the “Create table” box.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FhKgR7x5DQ3giggcejUNc%2FScreenshot%202025-11-27%20at%2019.12.32.png?alt=media&amp;token=96182861-74a0-4004-a349-73b64a74e487" alt=""><figcaption></figcaption></figure>

2.3 You can customize the table's border width and color.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FFApha4iqzgAjzlNpnwPN%2FScreenshot%202025-11-27%20at%2019.15.50.png?alt=media&amp;token=ea565f66-57cf-450c-b7e9-3fa76e3c72e3" alt=""><figcaption></figcaption></figure>

3. Data source: Retrieve the required table from the database.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2Fdg9al8SyHm38jo3YcazV%2FScreenshot%202025.png?alt=media&amp;token=5dc8c80b-a1ab-4bff-bdeb-f5a699f2fb99" alt=""><figcaption></figcaption></figure>

4. For correct export, the table header titles must be displayed.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FYGYFpSiqya4voOQw4VJ8%2FScreenshot%202025-2.png?alt=media&amp;token=292db68a-f48e-486b-ac16-6248384cec00" alt=""><figcaption></figcaption></figure>

5. Install a button on your page to initiate the export process.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FhsMASdqoCHnXA7pMkiG5%2FScreenshot%202025-11-27%20at%2019.35.28.png?alt=media&amp;token=f9b8056d-7451-4e08-a0b7-179d186995bf" alt=""><figcaption></figcaption></figure>

6. **Configure Plugin Action:** Assign the “Start” action to the button to trigger the data export.

<figure><img src="https://2254561473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8xZCQ4Y6VecQMuSfwjBP%2Fuploads%2FSDuUsbDqHaovZUHKxZxs%2FScreenshot%202025-11-27%20at%2019.38.01.png?alt=media&amp;token=66205264-ff44-4ba1-9ba0-b016db01b1c7" alt=""><figcaption></figcaption></figure>

By following these steps, you can effectively integrate the Advanced Excel/CSV Import/Export plugin into your application, streamlining your data export processes.

## About Foxocode

Foxocode is a team of experienced **product designers and developers** specializing in AI-powered solutions, no-code development, custom plugins, and full-cycle digital product creation.

**What We Offer**

* AI-powered web & app development
* AI integrations & automation
* Full website/app development from scratch
* Customization of Bubble templates
* Development of custom plugins
* Integration with external APIs and services

**Contact Us**

📧 Email: <contact.foxocode@gmail.com>\
🌐 Website: [www.foxocode.co](https://foxocode.co/)\
Let us know what you need - we will be happy to discuss your project!