Update data in custom state WITHOUT immediately changing it in the database

Hi,

I have a data type “costs” and a data type “cost entry”. A cost can have several cost entries. The initial creation works fine, I just can’t find a good solution for editing.

Initial situation:
The user can edit the cost via a popup. Within the popup you can see the item “Costs” - these are the cost entries in a repeating group.

What I want to achieve:
I want the cost entries in the edit popup to be saved only when the user clicks on the “Save cost” button at the bottom.

The problem:
I cannot access inputs from the repeating group in the workflow and therefore cannot perform a “Make changes to a thing” action.

What I have tried:

  1. Placed a save icon next to the inputs in the repeating group. Then I can use a “Make changes to a thing” workflow. What I don’t like about this is that the user has to click on the icon for each individual cost entry and also on the button at the bottom if the other metadata is to be saved to the cost.
    I don’t like this solution very much for UX reasons - but it works.

  2. When opening the edit popup I load all existing cost-entries into a custom state (list of cost entries). This works great. if I change the inputs, I can also update the corresponding entry in the custom state via an “Input has changed” workflow.
    When I click on the “Save cost” button I add the list from the custom state as a list to the costs - everything works perfectly.
    BUT: When the user clicks on “Cancel” the cost-entries are already saved and cannot be undone.

Therefore my questions:
1.) Does anyone have an idea how I can solve the way with the custom states correctly?
2) Is there an alternative solution that I haven’t thought of?

EDIT: To simply summarize my problem:
The problem is that I update the data set in the custom state when the input changes. And what I have learned by trying it out: When I change the data record in the custom state I am obviously already changing it in the database.

I can clear the custom state without any problem by clicking the “Cancel Button” but the data record is already updated in the database. I am therefore looking for a solution to update the data record in the custom state WITHOUT immediately changing it in the database.

Currently the Workflows looks like this:

  1. When open the edit popup:
    Bildschirmfoto 2024-01-17 um 11.24.54

  2. When the Input changed (This seems to be the problem. I thought that the entry would only be changed in the custom state. But it is also changed directly in the database.):
    Bildschirmfoto 2024-01-17 um 11.25.21

  3. When the user clicks the Cancel-Button:
    Bildschirmfoto 2024-01-17 um 11.26.55

Best regards
Christian

What’s the issue when customer clicks cancel?

The problem is that the cost-entries in the custom state have already been updated. But the user expects that no changes are made when clicking on “Cancel”.

So I need an idea of how I can

  1. undo the changes in the custom state or
  2. only update the cost-entries when the user clicks on the Save button.

To simply summarize my problem:
The problem is that I update the data set in the custom state when the input changes. And what I have learned by trying it out: When I change the data record in the custom state I am obviously already changing it in the database.

I can clear the custom state without any problem by clicking the “Cancel Button” but the data record is already updated in the database. I am therefore looking for a solution to update the data record in the custom state WITHOUT immediately changing it in the database.

Unfortunately, due to one of Bubble’s biggest limitations, this type of thing is very hard to do in Bubble.

Bubble can’t work with any kind of objects that aren’t Datatypes, Option Sets, or API data, and there is no such thing as a temporary object in Bubble.

In my experience there are only 2 ways to do this.


Method One

As Bubble can’t work with non-Bubble objects, the closest thing you can do is to use a text, joined with some symbol to ‘simulate’ an object.

So for something like {id: "003827x827736", name: "John Smith", age: 46, gender: "Male"} you could just use a text like 003827x827736|John Smith|46|Male

Then your RG will just be a list of those texts, and you can display each value by splitting the text accordingly.

Any time an input value is changed, update the text based on the first part (the ID)… (you can’t actually change a text, so you just have to delete the existing one and replace it with the new one).

Then, when the save button is clicked, you can send the list of texts to a backend workflow and update the relevant database items accordingly,

If cancel is clicked, just clear the list of texts, and nothing gets changed in the database.

It can be pretty complex to do this, but it works perfectly well, and I’ve used this method on some fairly complex use-cases just fine.

I’ve previously outlined this in much more detail, and have shared some working examples here in the forum, somewhere.

(note: you can do the same thing explained above with with JavaScript objects instead of texts, which does make it much easier to manage… but as Bubble can’t work with non-Bubble objects in the editor, you still can’t access those objects in the RG, so you still have to convert them to texts anyway.).

Of course if Bubble had some built-in temporary object type of data, or even if we could just load JavaScript objects in a RG, then all of this would be very simple. But it’s not.


Method Two

Another way to do this (possibly a simpler one) which I’ve used a few times recently, is to duplicate all the relevant fields on the datatype, so you have a ‘live’ version and a ‘draft’ version of each, e.g.

Name (live)
Name (draft)
Age (live)
Age (draft)
Gender (live)
Gender (draft)

In the popup RG, autobind the inputs to the Draft values, so when you update items in the popup, the Draft version of the fields get updated.

When Save is clicked, copy the values of all draft fields to the live fields.

If cancel is clicked, copy the live values to the draft fields.

Use privacy rules to prevent the draft fields being loaded unnecessarily on pages other than the ones they’re need on for editing.

Of course, this method uses more WU, but it is a lot simpler.

1 Like

Thank you very much for the detailed feedback!

Can you explain the start for Method One in more detail?

When I open the edit popup I insert the existing entries to the custom state:

Can you explain to me what I need to change here?

I’ve previously outlined this in much more detail, and have shared some working examples here in the forum, somewhere.

Or do you have a keyword I can search for? You have written a lot of posts :sweat_smile:

Hello Adam, I did your option 1, but I was trying a “better” solution for this problem last 3 days, no success!
I don’t know if is there any improvement on Bubble RoadMap regarding this scenario?