Group with focus referenced to Repeating group cell's

Nice one, Scott! Thanks a lot, we’ll give it a try :slight_smile:

Thanks,
Levon.

Founder at Bubblewits - Bubble Certified Partner

http://bubblestore.io – a place to buy Bubble templates for landing pages, e-commerce, workflows, APIs etc.
http://iambubble.com - one page Bubble demo
http://builtwithoutcode.com/ - Collection of apps built on Bubble

@levon perhaps an easier way is to simply use a regular group within the cell that shows/hides when your dropdown icon is clicked.

Trick is to add a group, eg “Cell Details” within the cell. Set it to “visible on page load=false,” “collapse height when element not visible,” and “animate collapse operation”. Put your dropdown content within the “Cell Details” group, then use a “Toggle element” action on the caret icon to show/hide the “Cell Details” group. I use this pattern a lot:

Collapsed, the cell is a single line:

User clicks on Text element “Provide crisis management services”, hidden container group in the cell animates and opens:

3 Likes

Thanks Daniel,
but the idea was to keep the repeating group’s cell height unchanged and show something that would be bigger than the cell.

Posted in the wrong thread: Set focus on first field´s on repeating group

But I don’t think this method works, at least I did not get it to work. Has anyone been successful with this so far?

1 Like

This approach worked at the time. I still have elements that work this way, but can’t recreate it with new elements (which is quite frustrating). I wonder if the Bubble team changed something to intentionally preclude people from doing this? …would also explain why someone closed that old thread.

1 Like

@vincent56, I found another way to implement this which isn’t such a hack.

Simple Version

  • Create a reusable element that displays a GroupFocus on hover. Then, put the reusable element with in the RG. This way, the GroupFocus works for each cell within the RG.

More Details

  • Create a reusable element with a group as the primary element. I made it 40 x 40px and 100% transparent.
  • Include an element within the group that’s set to show/hide when the primary element is hovered. Also 100% transparent.
  • I included a GroupFocus within the reusable element (but outside of the 40 x 40px space). I set a workflow to show the GroupFocus when the trigger element is visible, and to hide it when the trigger element isn’t visible.
  • Then, I add this element to my RG and put it at the top most element in the group. I set the reusable element’s thing to be the current cell’s thing. Each of my cell’s is 40 x 40px in the RG, so now, whenever someone hovers over the cell, it displays a GroupFocus outside of that cell, and correctly references the cell’s thing.

Example:
I set this up to provide more details about a user when someone hovers over any of a profile photo.

29 Likes

Sounds great, I’ll start experimenting tomorrow. Thanks for taking the time to write this up!

Thanks for this @sridharan.s, was feeling pretty frustrated until I ran across your work.

1 Like

Thx, works great

It’s just me or this trick is not working now? In my app since a few day the group still keep visible despite the Group Focus get closed. I’ve trying with states instead of visible/not visible, but nothing. Help!

This works for me.

I found another way to implement this which isn’t such a hack.

Simple Version

Create a reusable element that displays a GroupFocus on hover. Then, put the reusable element with in the RG. This way, the GroupFocus works for each cell within the RG.

More Details

Brilliant!

Just came across this solution

This such a great solution… thanks Scott :slight_smile:

Hi!

I’ve tried to implement this version, but it doesn’t seem to work right. I’ve done exactly what you’ve stated.

Created a primary group and a button that’s set to be visible when the primary group is hovered, which then will show a group focus. But it’s always showing the group focus.

Since your post, is there done any changes so this isn’t working anymore?

Thanks!

Works for me… But in my use case the user has to click on the RE to get the Group Focus to appear, but I believe the same option should be available for hover as well.

Screen Shot 2020-03-29 at 5.52.29 AM

1 Like

Can you share images from your reusable element from the designer? It kills me something that suppose to be so simple don’t work for me.

Sure thing. This also took me ages to figure out, but is quite simple in the end…

This is all my reusable element looks like when you first go into it in the editor since the group focus is not visible on page load. It only contains the icon that is initially visible.

Here is what it looks like with group focus visible.

Here is the workflow to show the group focus on click (I do a series of other steps as well when the user clicks on the icon, but the one you are most interested is the first one to show the group focus):

If you still struggle, I suggest trying to get it to work with click. If you can do that, but still struggle with hover then you will know it is a hover-specific issue.

Oh, I finally figured it out, and it was even more simple than I feared (it tend to be for me). On the button I had it to be visible on page load. So I just followed your guys steps, and removed the setting on the button ‘visible on page load’ and now it works perfectly. Thanks for helping out!

Thanks for this! Saved me from a lot of previous frustration trying to make this work. Tip to anyone struggling to make even this solution work: I didn’t have my workflows for showing and hiding the focus group set to “do every time condition is true” which messed everything up. Now it’s just how i want it. Thanks again!!

Hi guys,

I had this problem today and stumbled across an even easier fix, which I hope applies to your situation. My goal was to click on a cell in a repeating group and display more information about it.

I actually ended up using a DRAGGABLE group element, which is totally not what it’s used for!

  1. I created this element outside of my repeating group (so there’s only 1 of them, its not part of the cell).

  2. When the cell of my repeating group is clicked, I set the draggable element to position itself over the cell:

  3. I then “display data” in this group (step 2 in the picture above)

  4. To control the visibility I have a simple yes/no state on the element. If the state is “yes” then it’s visible, etc. I set the state to “no” by default, and have it to turn to “no” if the user navigates to anywhere where the repeating group isn’t visible. I also added a CROSS to the group so the user can disappear it if they want.

  5. Also use “Scroll to” the draggable group if you have a big Repeating Group.

Hope this helps, I struggled with group focus and reusable elements for a while before trying this :slight_smile:

2 Likes