Trigger action from reusable element in repeating group to main page

I have a repeating group inside which I have an option’s icon to show a groupfocus. Since I can’t link groupfocus to an element in RepeatingGroup, I have the Icon inside a reusable element and the GroupFocus for options in it as well. There is an option, “View History”. When a user clicks on “View History”, it should show a FloatingGroup and display the data for the repeating group’s entry in that element.
Is there a way I can trigger an action in workflow in Main Page from a reusable element. I tried to make the FloatingGroup inside the Reusable element but that just made it worse. and caused the texts to overlap which I couldn’t solve by adding background or changing Z-Index.


You could pass the info via URL param:

  1. When item in groupfocus clicked, set ‘view-history’ URL parameter to ‘true’.
  2. On your page, have an Only when Get view-history from page URL is true, (do whatever you want).

If it’s for a specific entry, then make view-history the unique ID of the clicked thing, and you will be able to know which thing (document in your case) was clicked from the main page.

1 Like

@meet The URL parameter is one approach that can work well, and can even open up other types of functions as you could share that URL and have those actions occur when the page is loaded when a user follows that URL. One issue I find with the URL parameter approach that has no real negative impact (unless SEO is a thing of concern) is having to leave empty URL parameters or just needing to change them back.

Something I’ve been seeing a lot of from @adamhholmes that I finally got a chance to dive into is to use Javascript and toolbox plugin for this type of thing.

To set up you need to install toolbox plugin (it’s free).

In the reusable element you can have a very simple action triggered by the click of the view history text, like the one below

Screen Shot 2024-09-12 at 9.50.06 PM

You can switch the dynamic expression value from the Dropdown A’s Value to your groupfocus ‘things’ unique ID, or even have it be the ‘thing’ itself.

Then on the main page place a Javascript to Bubble element (from toolbox plugin) and setup like below

Screen Shot 2024-09-12 at 9.52.28 PM

The Trigger event must be checked and you must also check the Publish value, then the Value type, which above is text, can remain text (if you send the unique id) or can be of the custom data type that your ‘thing’ is from the groupfocus out of the repeating group in the reusable element.

Then on the main page, you have a javascript to bubble event trigger. And the actions to run would be to show the floating group and to display the data.

Screen Shot 2024-09-12 at 9.54.08 PM

If you send the ‘thing’ and use javascript to bubble element as value type of the custom data type, you can use the display data action and reference the javascript to bubble element value.

Screen Shot 2024-09-12 at 9.55.49 PM

TBH, I’m actually kind of in love with this, and thankful @adamhholmes had been dropping the breadcrumbs throughout the forum.

Another option, that might be easy, is because you had issue of z-index and overlapping, try in the editor to use the ‘bring to front’ for the reusable element that is the icon with groupfocus menu and the floating group.

Another option could be to make the floating group a reusable element. Place it into the reusable element that is the icon and groupfocus menu. On the floating group reusable element, put a custom trigger and make the action be ‘show floating group’ and then on the reusable that is icon and groupfocus menu, when the view history is clicked, trigger the custom trigger from reusable element (the floating group show custom trigger)

4 Likes

I think a lot of people (including myself originally) get scared at the thought of using the BubbleToJavascript element.

But honestly… I haven’t found a simpler, or more logical way to do this kind of thing in Bubble (and loads of other stuff besides).

Sure, you can use URL parameters, custom states and triggers, local/session storage, or various plugins… but simply adding a JStoBubble element to your page and calling it as needed is, in my opinion the simplest and cleanest way to pass data, or trigger actions, between/across REs/pages.

Also, it means you don’t end up with multiple instances of the FloatingGroup in the DOM, which not only keeps the page code lighter, but makes debugging much easier - putting the FG inside the RE, whilst a perfectly valid method, means that the debugger will show one FG for every cell of the RG (which could be dozens, or even hundreds), which will all show up in the debugger with the exact same name. Which can be a nightmare when trying to diagnose a problem.

Keeping the FG out of the RG (and RE) means there’s only one instance of it on the page - which is cleaner, more efficient, and easier to debug.

2 Likes

Hi.

I’ve been following this topic and I am very interested in the JavaScript to Bubble element. Where can I find it?

If I understood correctly, with this element I could trigger an event from inside a RE that could be listened from the page in which the RE resides. Is that correct?

Best regards.

Yes, that is correct. Follow this post in the thread. Trigger action from reusable element in repeating group to main page - #3 by boston85719

Hi again.

Thanks, I got it, but I’m not being able to get it to work exactly as I need.

The element javascripttoBubble is inside a reusable element, and I see that the RE can use it and listen to an event triggered by it.

But, what I need is for the page where the reusable element is to listen to the event that is triggered from inside the RE. Is that possible?

Best regards.

The javascripttoBubble should be on the page, not inside the RE.

Ok, understood, thanks.

To expand upon this you can create another reusable element that contains commonly used your J2Bubble elements that trigger events, the caveat being that you’ll need extra steps to retrieve their values, but not a big issue since a J2B element Update event can run a change state action.

This way you just need to make changes to one instance instead of multiple instances in different oarts of your app.