Reusable Elements + Workflow (SPA)

I am currently building a single page app, and I have a group that has many workflows, buttons, etc. tied to it. This group will be used in many areas throughout the app and I want to turn it into a reusable element.

However, when converted into a reusable element I have over 100 errors because the workflows are disconnected with the page.

Is there a fix for this? Or must I just build without reusing elements in an SPA?

What kind of errors?

I would prefer make it as reuseable element to reduce tons of workflow on the page I working on

Elements not found/states not found errors

Either that means you use some of the element outside of your group as reference or you also have custom state outside of the group.

Is kinda hard for me to imagine it, If you don’t mind can i take a look at your editor for better picture what the problem is?

Reusable elements can refer to states within itself, it’s own data source nd “Properties” you define for the RE.

Read more here: Reusable Elements | Bubble Docs

The reason for the errors is that after conversion, elements in the new RE is trying to refer to elements that existed outside of itself. Create new states, properties or RE data source and point the errors to the appropriate ones.

With some assumptions you probably have the states on the page element. This makes converting the states into the RE not automatic with copying. BUT, if the states are on a non-page element then recreate the reusable element with the element that has the states. If you can do t his then some of the expressions wont break.

Now lets say you can’t do what I said above and you have a 100 errors to fix.

You need to remake the states and replace the broken expressions with these new states. This is annoying but possible.

Now if this is what you need to do, I’d suggest you put states into their own element or organisation and easy copying. I do this by making a floating group that is 0px by 0px and VISIBLE. Then I put in a element for the states and name it something that has “states” in the name, like “Flow steps states”. This makes for easy searching and also you can group the states based on their purpose for better organisation.

As for the Data type that some expressions are are now missing from the page. Click on the reusable elements page element and then navigate to the properties section that @ihsanzainal84 referred to above and add the data type needed to fix all the broken expressions. So for example if its a thing like ‘User’, add user as a property and then reference that property when fixing the expressions.

Copy and cloning in Bubble is super powerful but it can become a nightmare when states and data types can follow in the copy. Best of luck.