How can I modify multiple database tables only after pressing the save button in a Bubble form?

[igort.morimoto]

I have a form that allows users to create or edit entries for a database table. The form is used to register spirits and their quantities in a combo to be sold. There are two main database tables involved: Combo and Combo Items.

• Combo table:
  • Name (text)
  • List of Combo Items (referenced)
• Combo Items table:
  • Spirit (referenced)
  • Quantity (number)
  • Sale Unit (Option Set)

The challenge: I need to let users add or remove Combo Items while filling out the form, but I don’t want any changes to be applied to the database until the Save button is pressed. The repeating group shows each combo item in the combo.

Here’s the issue:

1. Using custom states doesn’t work because custom states don’t create actual entries in the Combo Items table—they only reference them.
2. Each Combo Item entry can have the same quantity and sale unit, so I can’t simply use custom states to hold each entry and create the database entries on form submission.

My objective is to:

• Allow users to add, edit, or remove Combo Items in the form.
• Modify or create entries in the Combo and Combo Items tables only after the Save button is clicked.

What would be the best approach to handle this?

[boston85719]

Use JSON to create the combo items as JSON so user can make all modifications they want. Then when press save use API to bulk create the combo items and follow that by create Combo

[igort.morimoto]

Is there any tutorial on how to create the JSON based on the inputs? I can only find how to use JSON retrieved from external APIs.

[boston85719]

@igort.morimoto

Is there any tutorial on how to create the JSON based on the inputs?

You can use a paid plugin called JSON Assistant, the developer of which is very helpful and you likely could find your way to achieving it via the showcase page or preview editor.

Alternatively, you can create the JSON using the toolbox plugin like below:

let rgItems = [THIS IS WHERE YOU PUT YOUR DYNAMIC VALUE LIST];

let rgValues = [];

rgItems.forEach(item => {
  let inputID = `rgInput${item}`;
  let inputElement = document.getElementById(inputID);
  let itemObject = { itemNumber: item, itemValue: inputElement.value };
  rgValues.push(itemObject);
});

console.log(rgValues);

let rgJSON = JSON.stringify(rgValues, null, 2);

bubble_fn_rgJSON(rgJSON);

IT IS THIS PORTION OF THE JAVASCRIPT THAT IS CREATING YOUR JSON let itemObject = { itemNumber: item, itemValue: inputElement.value };

If you want to change the key value pairs you can…so itemNumber: item is not really necessary as it simply shows the ‘order’ since the item is just the RG number…the itemValue: inputElement.value is the actual value from the input elements within the RG…you can add to it as well.