Bubble Hack: How to have a vertical menu show upon clicking something with a repeating group cell

Hi all,

I recorded a video that shows how you can have a vertical menu show up within a repeating group cell that’s larger than the cell itself, like shown below. This is one of the techniques that we use in our Canvas app foundation.

53%20PM

Hope you find it useful!

Vlad
AirDev

41 Likes

@vlad - a great Bubble hack indeed. When I learned how to do this the hard way, it took far too long :stuck_out_tongue:

3 Likes

Super interesting. Thanks for sharing this @vlad

Thanks!

@vlad Thank you!

Also, a suggestion… Instead of just doing Element Actions > Show, do Element Actions > Animate. This way you can select a nice little animated effect when your focus group appears.

3 Likes

@vlad How can you tricker a pop up in a main window from the focus group that is in a reusable element. I have my reusable element in a repeating group like in your demo?
I can’t figure it out.

@boostsalesgroup - 3 options here:

  1. You could have the popup live within the reuseable element (I know this isn’t what you’re asking but figured I’d include this option because it’s often a good one)
  2. You could set a state on the reuseable element when a menu option is clicked and then, on the page, have a “do when” condition that listens for that state change
  3. You could change the URL of the page (through a parameter) when a menu item is clicked and then, on the page, run an action on page load

Hope this helps!

2 Likes

I was planing to use option 2. but I can’t i don’t see option to listen reusable elements custom state. Is it because It’s in a repeating group? Does the custom state need to be Y/N or can it be any data type?

Hi !

I’m trying to do something quite same, and because a picture often speaks better than words, here is a picture of what I want to do :

So I got a repeating group that displays the event list, and I would like to get the details appear in full width of the repeating group when we click on a event (with the small pointer icon on the event)

I tried to use a reusable element with a focus group, but it is not exactly what I need cause I would like the details to appear always the same way, no matter which event is selected.

Does anyone have an idea ?

Thanks a lot !!!

Baptiste

Hi, @vlad I got this partially working. The submenus are working great. How do I send the data to the focus group? I’m able to set a workflow on the page to send data to the reusable element but not when I click on the reusable element itself…

Thanks for your video!

So I have mine working expect the one simple issue of Toggling the Focus group I set it pretty much like the template form air dev but it wont open or close using the feathericon plugin when i used a regular Icon from bubble it opened but wouldn’t close any idea how to fix?

This video keeps redirecting me to a different page.

How can i view the video?

1 Like

Here you go.

8 Likes

This works well!

But I can’t set the state of an element outside of the focus group when an element inside of the re-usable element FG is clicked.

I’m trying to change the state on the page that the re-usable element is sitting on not of the re-usable element itself.

Video referenced in the first post is not working now… @vlad

https://canvas.airdev.co/resource/vertical-menu-on-click-in-a-repeating-group-1547524211906x803840010892599800

1 Like

The new link has been added in the post: Bubble Hack: How to have a vertical menu show upon clicking something with a repeating group cell - #14 by shot

Bubble Hack: How to have a vertical menu that shows up on click within a repeating group cell - YouTube

Hey @vlad

Thank you for the video. I cannot find how to listen the RE state, when I’m searching for this element in a “Do when a condition is true” WF, I cannot display it :

I might miss somethin, thank for your response in advance !

okay for those who asking themselves how to set action on current cell, the trick is to first create a group in the cell, assign the source to current cell, then convert this groupe in a RE. when you ll add this RE in the cell, you can set a source, see more here >> Custom Dropdowns in Cells | Bubble.io Tutorial - YouTube

Hi, I was trying this with an “edit” button to then send the data from the repeating group to a floating group. However, I just can’t figure out how to send the data. I tried custom states and other workflow workarounds. Nothing worked. Anybody who can help?

2 Likes

Also still dunno how to work with the options from the groupfocus tried custom events didn’t work as well… how do i give the workflow to the groupfocus options inside the reusable element?