Save multiple items separately in Bubble.io database

Introduction

When constructing a no-code app with Bubble.io, one common challenge you might encounter involves handling multiple entries from a user input and splitting them into individual database items. Traditional coding knowledge will lead you to the concept of loops, but Bubble.io requires a different approach. In this blog, we’ll walk you through how to transform a single line or multi-line input into separate database entries, using backend workflows.

Understanding the Challenge

Why Separate Entries Matter

Consider a scenario where you want users to enter multiple items separated by commas into a text input field. For instance, if a user types in "cake, eggs, butter," you would want three separate items representing cake, eggs, and butter in your database. This is vital for maintaining clean data and allowing each item to independently associate with other data entries.

Problems with Frontend Workflows

A straightforward approach might be to set up a workflow directly from the front end. However, this method quickly shows its limitations—the front end lacks the looping capability necessary to handle a variable number of entries dynamically. It can only manage static lists where the number of items is fixed, unsuitable for real-world scenarios where input can vary.

Setting Up Backend Workflows

Enabling Backend Workflows

Before you can take advantage of backend workflows in Bubble.io, ensure they are enabled. Head to the settings under the API tab and toggle the backend workflows option. Note that this feature requires being on a paid Bubble.io plan.

Creating a New Backend Workflow

Navigate to the backend workflow section and create a new workflow named "Save Shopping Item." This workflow will receive each comma-separated value individually and create a corresponding database entry. The workflow doesn’t interact with the database directly at this stage; it’s simply preparing for our list processing.

Configuring the Logic

Here, the mindset shift is crucial. Each backend workflow execution is designed to handle one item. Therefore, the process iterates through each input entry, splitting the original comma-separated string across multiple individual entries.

Splitting Input Text

Using Split by and Trim Functions

Return to your page and implement a workflow where you can split the block of text entered by users. Bubble.io’s "split by" function is a powerful tool for converting comma-separated input into isolated items. Split by enables efficient text isolation, parsing each entry wherever a comma appears in the input string.

However, commas are not always followed by a uniform space. Users may input "cake,eggs,butter" or "cake, eggs,butter". To handle this inconsistency, use the "trimmed" function to ensure no extraneous spaces accompany your separated items, delivering cleaner database entries.

Connecting the Frontend and Backend

Scheduling the API Workflow

Revisit your frontend settings to arrange the connection to your backend workflow. Use the option "schedule API workflow on a list,” ensuring the text split by commas correctly maps to the backend workflow. This setup leverages Bubble.io’s strengths: handling intricate iterations in the backend while maintaining swift frontend operations.

In this configuration, the front end will send each split item as a whole to the backend, where it gets processed independently. Consider the expression funneling one entry (e.g., "cake") at a time into the backend execution.

Debugging and Execution

Monitoring Backend Workflows

Once set up, debug your setup to ensure smooth execution. Initiating the input will trigger the separate creation of database entries. If issues arise or heavy backend lifting stalls processes, utilize Bubble.io's server logs. These logs help diagnose and visualize pending or delayed workflows.

The efficiency gained here is palpable: quick front-end responses offloaded to methodical backend processing, facilitating consistent and reliable database updates.

Conclusion

By leveraging backend workflows in Bubble.io, you can expertly manage multiple user entries and capture them as distinct database items. This method circumvents frontend limitations while maintaining user-friendly input options. Whether parsing shopping lists or user-generated data, backend workflows offer a robust, scalable solution.

Mastering backend workflows aligns Bubble.io closer to traditional coding efficiencies without compromising no-code simplicity, enabling you to bring sophisticated, data-driven applications to life effortlessly.

‍