How I pass values between re-usable elements

Here is a quick overview of how I figured to pass some simple data from one re-usable element to another on a single page app by using custom states. Maybe this description can help someone else.

The idea is pretty simple; and structured as follows:
App:
–Re-usable element A
–Re-usable element B

Through a set of user selections within A, sets of dropdowns, text inputs etc. I eventually trigger an API action that returns a unique ID based on the user’s selections. But this value is “trapped” within the reusable element A and I needed a way to share/use it in B for next steps.

Within the workflows of re-usable element A, I use a “when condition is true” event (When the API’s returned ID value is not empty) to SET a custom state value of the reusable element A itself. Lets call it reusable element A’s project_id with a type of “text”.

Now one level up on the App page, I have another “when condition is true” workflow. This time it’s "when the re-usable element A’s reusable element project_id is not empty, set the value of re-usable element B’s project_id to the value of A’s project_id.

Now anywhere within B I can use the project_id value as needed.

Once working, the same two workflows steps can have more data “piggybacked” by (+ Set another state) options of each. Say project_id and team_id are both needed in B and available in A, it’s a simple expansion of both A and the App workflow’s to just set/pass more data by first “promoting” the data to the source’s custom states, and then pushing it back down to the destination state by the main page.

That’s a nice way to do it.

Here are two other ways you can consider:

  1. Save the data in the database (for example in the user record) so you can always save it and load it from current logged in user…
  2. send the data from re-usable element to the page as a URL parameter (go to page with send data) and have reusable element B receive the data with get data from url…

All3 have pros and cons and really depend on what you’re trying to achieve.

There’s also 'Env' Environment Variables (bdk) Plugin | Bubble.

1 Like