Setting State value on Reusable Element in Repeating Group

Hey you super experienced Bubble Users…

I have a repeating group, and inside is a reusable element.

I want to pass two kinds of information into the reusable element.

One is its Data Source.

The Other has to be a State.

How can I pass a different Current Cell’s value to the state of each reusable element in each row of the repeating group?

Thanks in anticipation!
Antony.

1 Like

Hi @antony,

I hope you don’t mind a question instead of an answer :neutral_face:, but I’m hoping I might learn something as well. I’m curious about your setup, as I thought the purpose of a reusable element was to display exactly the same content in multiple places (typically different pages).

It never occurred to me to use a reusable element inside a RG, since each repeating cell would be unique in some way (which seems to run contrary to the purpose of a reusable element). What’s the advantage of a reusable element in that context?

Sorry if this is Bubble 101, but I’m always interested in new tips and techniques. :slightly_smiling_face:

Hey @sudsy, thanks for your message. I have an RG which displays data about messages which have been sent, and I need to send it details of which message “function” is involved so the data is displayed in the right way. Trying to avoid an repetition of “code” (well, no code code, elements and actions).
I have an outer RG with the message functions, and an inner RG of the actual messages sent for that function for a given user. So I need to pass in the user and the message function.
Hope that makes sense!
Antony. :slight_smile:

Well, I don’t know if it helps, but I try to think in more “passive” rather than “active” terms when it comes to Bubble - i.e. elements “referencing” or “responding to” data (states) or events as opposed to “passing” or “sending” information.

I’ve also found that creating a “data hierarchy” within the page, where the nesting of groups reflects that hierarchy, can facilitate this approach. For example, the “thing” of the page itself might be a User, with a group or RG referencing that user’s messages, and then elements within the RG referencing their parent.

If structured in such a way, then the nested elements can simply reference the “current cell’s” or “parent group’s” data, and things should be fairly straightforward.

Also, keep in mind that things like an element’s data source and visual attributes can be changed based on a “condition” (via the Conditions tab of the property editor).

Anyway, you probably know this stuff, but having a bit of a traditional coding background, I have to continually remind myself of it. (The Bubble programming model seems to more closely align with front end frameworks like React or Vue.)

1 Like

I would also like to set the state of a reusable element inside a repeating group.

Identifying the correct reusable element shouldn’t be a problem as I can have an input in the same cell of the repeating group trigger the workflow.

But the workflow doesn’t have the reusable element as an option.

The data source on the reusable element can access data on the page, so I should be able to connect any custom state in the reusable element to data on the page. But I can’t, because none of the custom states show up in the reusable element’s settings.

I can pass one type of data into the reusable element using the data source, but I need two types of data. Is it possible to pass more than one thing into a reusable element inside a repeating group? @emmanuel

2 Likes

I can confirm that if you have a reusable element inside a repeating group, it doesn’t seem possible to access the RE from the page’s workflow.

I looks like this was raised in other forum posts but never fully resolved:

Some people in those threads question why you would want to use a RE in an RG. Here’s my example of what I think is a pretty clear use case:

I have an RE with buttons to edit, add or delete an item:

Screenshot_5
Clicking the delete icon brings up a confirmation popup:
Screenshot_4

The pencil icon sets the RE’s state to ‘edit’; the check sets it to ‘delete’, the plus sets it to ‘add’.

On the page with a RG, I wanted to be able to set up a Workflow: Do when a condition is true, the RE’s state is ‘edit’, open edit popup, set RE’s state to none.

Has anyone found a workaround for this?

@tmonczko if you add those “Do when condition is true” workflows to the reusable element itself (not on the page), it should open the popup in the same way (as long as the popup is within the reusable element as well). Would this work for your use case?

Hi @fayewatson, thanks for your suggestion and sorry for my delay!

Yes, adding the popup to the RE works for that particular popup. However, I had originally hoped to use that add/edit/delete RE inside different RGs (e.g. “Plants”, “Animals”, “Objects” - not those ones specifically :stuck_out_tongue: ) and trigger different popups depending on the RG: e.g. Add a new Animal popup vs Add a new Plant popup. I’m not sure it would be possible for the RE to know which popup to open. That’s ok though, it’s not too hard to make copies for each RG.

P.S. I’ve benefited a lot from all your helpful posts that you’ve contributed to the forum. I’m glad to have this opportunity to say thank you directly!

1 Like

Ah! That is so kind! Thank you so much, @tmonczko! :relaxed: So glad to hear you’ve found them helpful!

And I totally agree that would be really useful to have different popups triggered based on the type of object that was just clicked on. There are probably a couple workarounds for this but it could be a bit messy (i.e., send a unique ID of the RG’s ‘thing’ as a text value, run searches to see what ‘type of thing’ it is, and then display that value in the correct add, edit, or delete popup). It’s probably easier to make copies for now! :slight_smile:

Hey all- not sure if this is helpful, but I just solved a similar problem using URL parameters.

On the reusable element, I created a custom state called “active” with a “do when true” workflow that looks at the URL to determine whether “active” is “yes” or “no” and changes the color when “yes”.

Then, on the main page I append “&active=yes&id=[ID of the RE]” to the URL using a go to page workflow event (the page doesn’t refresh since the main path is the same).

Hope that helps!

2 Likes

I’ve solved this issue using the Satellite/Antena as it provides some kind of global variable within the page that you have to read and update, but it works.

Trying to use Session & Local Storage that works in a different way, but also provide page/session wide acess to values that are not on “thing” database.