The reusable elements are basically their own page. At the moment they can only accept one piece of data, which is a thing, such as the thing “action” where this reusable element “action-frame” can accept the action assigned to it.
But what if we could also pass parameters to a reusable element? We can pass parameters to a page through the URL, so maybe Bubble could implement the same functionality for reusable elements. Like how this link can send parameters to a page and the workflows in the page can access the parameters from the URL
As far as I can tell right now, the only way to pass data to a reusable element is to write it to a thing in the database, but there are a host of complications with trying to actually use that option.
You can do this by having the data source of the reusable element be “Get data from page URL”, then the parameter is the unique id text of a page parameter, passed from a different page. For example, if you have a reusable element with the type of content User, and want the data source of that reusable element to be pulled from the page’s “u” parameter (unique id of a User), the data source could be:
Reusable elements share custom states with the page. So you can simply create a custom state on the element and Pass it data similar to setting a state on any other general element.
I certainly pull data from a header RE using a custom state, so should b no reason why you cannot send data to a RE via the same custom state. i.e. it should be bi-directional.
Thanks, I hadn’t thought of using the URL as the data source.
I don’t think that will work in my current use case because I need people to be able to manually add a parameter to the URL to get a particular piece of data highlighted on the page. So it needs to be like “x=123” rather than the unique id of a Bubble thing.
Now that I see that reusable elements can exchange data through custom states as long as you create the custom state in the reusable element editor first (that nuance had escaped me). Thanks @gaurav
I don’t think that will work in my current use case EITHER (ugh) because the reusable element is in a repeating group (it’s a reusable element because I already use it on at least one other app page). A reusable element on its own does show up as an option in workflows with its custom states, but it disappears when it goes into a repeating group.
So the question should be, how to pass both a data source (thing) and one or more parameters to a reusable element inside a repeating group.
My use case is a list of project steps (in the repeating group). The step itself has a header and a body (in the reusable element). Clicking the header can show/hide the body. I’d like the user to be able to add a parameter to the page URL (such as step=123) so that when the page loads the step with the number 123 is expanded automatically. That way people can share links to an exact step in the project.
It would be fine to have the value 123 assigned to the custom state of every reusable element in the repeating group. Then I could have each step check the value it’s got from its cell against the value in the custom state.
Reading the page URL within the reusable element sounds ideal. Is there another aspect that doesn’t work?
Not a full solution, but … if a workflow event comes from an element in a RG cell, the workflow has access to other page values, the cell data, the cell index, and the reusable element’s custom state.
So the question is, which element can trigger a workflow event from within a cell when you want it to?
Edit: If you don’t find a suitable element … I made up a simple plugin element that can trigger a workflow event upon change of property data. When inside a RG cell, the event does have the cell context so it might do the job.
Thanks! I hadn’t thought to grab the URL from the reusable element. That seems to work in a condition.
I got the right step to expand by putting “&act=8” into the URL and building a condition that compared that parameter to the action-frame (reusable element’s) data source’s step number. Unfortunately that makes the step always expanded no matter what as long as that parameter remains in the URL.
Reading the URL doesn’t seem to work in a “page loaded” event in the reusable element. I don’t see it being run.
What do you mean that a workflow in a RG cell has access to other page values? I don’t see a way to write workflows referencing values on “another” page that’s not part of the reusable element that will be in the cell.
Maybe I have to go all the way outside pages to the database. If I drop some information on the User I should be able to get to it from anywhere.
How about in a “do when condition is true, once-only” event?
Say for example, a RG cell contains:
A button
A reusable element
The button click triggers a workflow event in the context of the RG cell, so the workflow conditions and actions have access to the page of the RG, plus the contents of the cell. So a workflow action can set a custom state on the reusable element, to a value from the outer page.
Buttons can’t easily be clicked on by another workflow action, or by a changing value, unless using a javascript hack, which may be one solution.
I was suggesting look for a different element that can also trigger a workflow event. Something like an input text or a checkbox, or a new element.
