Pass data from one reusable element to another reusable element

[stuart4]

This took me a number of hours to finally figure out so sharing to help save precious life hours - I hope someone benefits.

Passing data between “Reusable Elements”

Use case - I have a menu dropdown menu that triggers a slide out display with forms that correspond to the selected dropdown item

E.g - I select - Add new company from the menu, the slide out opens and the form to add a new company is present.
OR
I select - Add new contact from the menu, the same slide out opens but conditionally shows the new company form instead based on the data.

Each of the above is a reusable element on a page with data passing between them both.

How did I achieve this?

Step 1.

In both of your reusable elements create a custom state on the reusable element parent that’s similarly named (I did this to help match it up easily).

Step 2.

Add both the reusable elements into the positions on the page where they are needed.

Step 3.

Open the first reusable element that is sending the data to the next, in my case the drop down menu item.

In this element find the second reusable element, in this case the slide out element. Ensure this is hidden, width minimised etc.

This is not used for anything other than the data connection so the first reusable can ‘see’ it.

Now… in my case i want a menu items option set to be saved in the first RE (reusable element) and transferred to the second RE.

To do this I save the click on the item as a custom state, like below - you will obviously want to do whatever you need… step 4 is the magic.

Step 4

Go to Workflow (we are still on the same reusable element).

Click on “add event” - Custom = “Create custom event”

Name it something

Now Element actions set state

Now set a stat of the target item, in my case the slideout menus element and the custom state that we set up in Step1 to be the value of the step 3s custom state.

Step 5

Now the end op the road, on step 3 where you set up the workflow to capture the initial menu options state, add a new item

Trigger custom event - this will default to the only one you have if you have it.

Boom … you are done … test and away you go.

[francischin]

@stuart4 I was looking for a solution for passing data from one RE to another RE, and your post is exactly what I am looking for. But I am trying very hard to understand what you mean by
“In this element find the second reusable element, in this case the slide out element. Ensure this is hidden, width minimised etc.”

My use case is very simple.

I have a Reusable Header and a Reusable Footer.

Each Reusable i have a custom state call “Site” and is of Data Type “Site_Config”.

In my header, I have a drop down menu to allow user to choose which site. I created a workflow upon this dropdown value change, i will update the state “Site” accordingly.

But I cant pass this data into the Footer custom state “Site”.

So, I try to insert the Footer Reusable element Into the Header reusable element (and make it 1x1 pixel) and so that the Header can “see” the Footer Custom State “Site”, and also follow the step 4 mention above about creating a custom workflow to update the Footer custom state “Site”.

But it dint work for me. I must be missing something.

Appreciate if you can share with me the key concept here. thks

[stuart4]

Hey there, maybe my initial solution isnt the right one for your use case - how about this one:

Bubble - Visual Programming

top and left menus are reusable blocks.

if you change the left menu options you will see it reflected in the top menu under the name, this uses url parameters

Editor link: Framework-site | Bubble Editor

[boston85719]

Using URL parameters is the way I ensure I can communicate between reusables as they would both be setup to look toward the URL parameter.

There also is a free plugin that helps pass data between reusable elements.

The use of custom workflows is also a good approach.

@stuart4 nice tip. Always helpful to share when we figure out something that was difficult (I also do it as a way to remind myself how to do it again)

[stuart4]

@boston85719

There also is a free plugin that helps pass data between reusable elements.

The use of custom workflows is also a good approach.

What is the free plugin you mention, it could come in handy.

I am also trying to dig in more to custom workflows, do you have any examples where this works?

And yea, I try to share anything I have struggled with as i believe its how we all learn together

[boston85719]

@stuart4

What is the free plugin you mention

@stuart4

I am also trying to dig in more to custom workflows, do you have any examples where this works?

I do not have examples, sorry.

[stuart4]

thanks… Ill keep playing till I get it, appreciate your comments.

[jgellis]

Hi, not sure if this is more efficient… but to add to the conversation. I handle this slightly different and use reuasble elments like programing objects, a habit from coding. Each reusable elment is self contained - technically is is emulating a polymophic object model… but since we are no-coders who cares about that now!

I create standard custom states for each module. MSG-From, MSG-To, MSG-Action. These are use for triggers. If data needs to be passed I create custom states so the type required. For example Z-User would be data that is exchanged. These triggers are managed by one set of MSG workflows using Do When X events (set to Everytime).

Example: on the index page.
Reusable elements, A & B.
A wants to send data to B (B may be a library of reusable workflow functions) in this case lets say it gets a user name from a search for users. So, in this case A requests that B find a user and pass the result back to A. This is a two way transaction, one way are simpler and only take Steps 1-3.

At first glance this may seem complicated, but once you have the initial message links set up it becomes very easy to pass data back and forth between elements/modules.

NoCode flow…
A has four custom states - MSG-To, MSG-From, MSG-Action, Z-User(type user).
B has four custom states - MSG-To, MSG-From, MSG-Action, Z-User(type user).

Step 1.
A initiates transaction… (by reusable elment A and expects the result to come back as Z-User.
Set custom state MSG-To = “B”, Set custom state MSG-Action = “Select”.

Step 2. (trigger-forward by index)
index - Do When A(MSG-To = “B”) & A(MSG-Action=“Select”)
Set B (MSG-From=“B”) & B(MSG-Action=“Select”)
{reset to null} Set A(MSG-To = “”) & A(MSG-Action="")

Step 3. (trigger-catch by reusable elment B)
B - Do When B(MSG-From = “A”) & B(MSG-Action=“Select”)
{reset to null} Set B(MSG-From = “”) & A(MSG-Action="")
Perform workload inside B to get the user and store it in custom state “Z-User”)

Step 4. (trigger-return result from reusable elment B)
B - Do When B(MSG-To = “A”) & B(MSG-Action=“Done”)

Step 5. (trigger-forward by index)
index - Do When B(MSG-To = “A”) & A(MSG-Action=“Done”)
Set A(MSG-From=“B”) & A(MSG-Action=“Done”) & A(Z-User)=B(Z-User) (pass on user info)
{reset to null} Set B(MSG-To = “”) & B(MSG-Action="") & B(Done="")

Step 6. (trigger-catch by reusable elment A – result from B)
A - Do When A(MSG-From = “B”) & A(MSG-Action=“Done”)
{reset to null} Set A(MSG-From = “”) & A(MSG-Action="")
DONE A now has the selected user… stored in custom state Z-User.

Since index (or the page being used) acts as the MSG handler every module is always isolated and stand alone. Hence, I create a libary of workflows that are common and store them in one reusable elment. I simply include this one elment in the header/footer and now always have access to the library. If the modules have active UI then they are kept seperate and added to each page as required.

John

[stuart4]

That certainly does look complicated John, I am not sure I fully grasp it here.

Would you be able to supply some images, video walk through of the flow when you get time?

I am sure others, myself included would be appreciative, buy you a coffee / beer

I am starting to use reusable elements more and more for organisation and I do something similar with custom states but I use the page they are on as an intermediary.

[stardrive]

Thank you for this. I’m trying my best to get my head around it.

Question: Did you make a typo in Step 2? You have:

Set B (MSG-From=“B”) & B(MSG-Action=“Select”)

Should it instead be:
Set B (MSG-From=“A”) & B(MSG-Action=“Select”)

Thanks for clarifying. Would love to find a way to get two reusable elements to communicate without using URL parameters because I want to keep clean, sharable URLs for this particular application.