Saving data from Reusable Element with workflow triggered outside of the reusable element

[artemzheg]

Hello, Bubblers.
I’d like to use Reusable Element (RE) to create and edit things on different pages in my app.
I have a data type “Hotel” that has two text fields “name” and “country”. I’ve created a RE and added two input fields into it:

Now I put RE on a hotel creation page and add a “Create” button outside of the RE:

The problem is that if “Create”" button is located outside of the RE - input fields are not available for a workflow. As soon as I move button inside the RE - I can see input fields in the workflow:

So I can’t get the idea. Is it possible to save data from RE using a button (or any other element) outside of the RE?

[fayewatson]

Hi @artemzheg Do you need the button outside of the reusable element in order to utilize the values of other inputs’ values on the page? Can you provide more detail on the workflows you need to create with this reusable element?

It is possible to have the button outside of the reusable element but in most cases it’s best to have the workflows within the reusable element. Then, you can always trigger the reusable element’s custom event workflows from the page using the action: “Custom events → Trigger a custom event from a reusable element”

[antony]

Hi there @artemzheg…

If you set states on your RG to represent your hotel name and hotel country, you can have workflows in the RG that trigger when the input changes and set those state values… Then they are available for you on the outside…

Good luck with it whichever way you go!

Best wishes,
Antony.

[artemzheg]

@fayewatson

Do you need the button outside of the reusable element in order to utilize the values of other inputs’ values on the page? Can you provide more detail on the workflows you need to create with this reusable element?

Hi, @fayewatson. Yes, I just would like to utilize values of inputs from RE in a workflow that starts when button outside of RE is clicked.
Here is a link to the editor with a simple example: Reusable-element1 | Bubble Editor

So when I click on create button → workflow with action “Create a new hotel…” should start and save values from RE inputs to database.

[fayewatson]

Got it! It looks like the example app may be set to private; can you temporarily set it to public by going to Settings --> General --> Application Rights and select “Everyone can edit” from the dropdown?

[artemzheg]

Ah, I’ve already made it but lost an internet connection Changed it again, check please

[fayewatson]

Great, thanks!

With your setup, are you looking to create a reusable hotel creation form that you can put on multiple pages?

Or are you placing the button outside of the reusable element because the workflow will save inputs on the page’s values, in addition to the input values inside of the reusable element?

[artemzheg]

@fayewatson

Or are you placing the button outside of the reusable element because the workflow will save inputs on the page’s values, in addition to the input values inside of the reusable element?

You got it perfect.

To keep it simple lets imagine that during hotel creation (page #1) I’d like just to fill up some basic fields (like name and country) located in reusable element. As a result a new Hotel is created:

• “Name” and “Country” fields has values;
• Other fields are not visible on creation page and are saved as empty

After successful creation user goes to other page (like hotel profile, for example) where he can edit values in reusable element inputs (name and country) and also other inputs (address, images, description…) that are not located in reusable element. After editing he just clicks on save button on the page - and all values (from and outside of the reusable element) should be updated in the database.

[fayewatson]

Got it! That makes sense!

For simple setups with only a few inputs, it would be easiest not to use a reusable element, and instead have multiple input elements that display the Hotel thing’s name and country as the input values’ initial content where needed. However, to answer your question, @antony is exactly right – you could keep the inputs inside of the reusable element and have workflows that set custom states for those values.

For example, I created a new reusable element called “hotel-form-2”:

Next, on the reusable element itself, add two custom states which will store the value of these inputs as they are changed:

(Note: These custom states must be set on the reusable element itself, not on any of the elements inside of the reusable element – otherwise the custom state values won’t be accessible when creating the page-level workflows)

In order to set the value of these custom states as the input values are changed, you can have two “When an input’s value is changed” workflows, which update the inputs’ corresponding custom states:
(Hotel country input)

(Hotel name input)

Back on the page, you can then save these values in the button workflow by using the reusable element’s custom state values (since the input values are not accessible directly):
(Page)

(Create button workflow)

This will ensure that the custom state values are used to create a new Hotel thing. When utilizing the reusable element within a form that is updating an existing Hotel (using the “Make Changes to a Thing” action), you will want to make sure that there is a workflow in the in the reusable element which sets the custom state values to the reusable element’s Hotel’s field values when the reusable element’s Hotel data source is not empty:
(Setting the hotel name custom state to be the reusable element’s Hotel thing’s name field value)

(Setting the hotel name custom state to be the reusable element’s Hotel thing’s country field value)

Then, make sure the initial content of the inputs display the reusable element’s Hotel as well (just so it’s easily edit-able):

Preview:

Bubble - Visual Programming

Editor (reusable element)

Bubble Editor - Reusable-element1

Editor (page)

Bubble Editor - Reusable-element1

And I think that should do it! Please let me know if I can clarify anything, or if you have any questions at all

[artemzheg]

Thank you very much @fayewatson! Your step-by-step solution of my problem is really cool.
Up to now I was using custom states just for making tabs and hiding/showing elements.
Now it seems to me that custom states are much more powerful and complicated

Will go and dive into forum threads and some video lessons about custom states and their usage…

updated: Didn’t check Bubble manual (only reference). Here is what I’ve missed about using custom states:

Custom States are very useful when you want to store some information on the page, and not store it permanently in the database. Two main cases usually require such functionality:

1. Store the current view on the page. For instance, your page has two tabs, ‘view’ and ‘edit’, and users can switch between both modes. Storing in the page the current mode will be very handy to control which element to show and hide using conditions. When the user refreshes the page, the last mode will be lost.
   2. Store temporary values in workflows. If you need to run some calculations, and want to store some intermediate results, using custom states can be useful to store the result and use it in the following actions.

[fayewatson]

My pleasure, @artemzheg! I’ve found custom states to be very useful too, and they’re definitely needed for that type of setup with reusable elements. One downside to custom states is that you can’t set their default values to be dynamic. If you need to set a custom states usinng a dynamic expression, you need to have multiple “When page is loaded” workflows which change the custom states values.

A few months back, I stopped using custom states almost completely on the page and instead use ‘hidden variable groups’ within a popup on each page, in order to store and use temporary values in workflows. All credit goes to AirDev for this approach; it has saved a ton of time!

@seanhoots describes more on this here:

[New Feature] Default value for Custom States

While waiting for this feature, you could use a hidden popup to store all your variables instead of custom states (credit to AirDev and @vlad for this pro tip). So instead of creating a custom state, you create a popup and add groups or repeating groups, for single values and lists respectively. These are actually more useful than custom states because they can have default data sources, conditional data sources, or have their data set by a workflow. Since I learnt this approach I never use c…

And here’s the link to AirDev’s documentation on this:
https://docs.airdev.co/canvas/general-information/functionality/hidden-variables-popup

[artemzheg]

@fayewatson

A few months back, I stopped using custom states almost completely on the page and instead use ‘hidden variable groups’ within a popup on each page, in order to store and use temporary values in workflows. All credit goes to AirDev for this approach; it has saved a ton of time!

That’s another great hack. Thanks, I’ll play with it today. For me it seems to be less complicated and more convenient to support compared with custom states.