Group with focus referenced to Repeating group cell's

Hi @emmanuel
Would it be possible to add an option for Group With Focus, so that the reference element would be Repeating Group’s cell? We are trying to design a drop down that will be triggered from the repeating group cell and right now it’s not possible to show it immediately below that cell, only below the whole repeating group or referenced to another static element on the page.
Thanks,
Levon

1 Like

How would that work though, we can’t refer to an element from a rep group from the outside…

1 Like

Maybe It could be referenced to the border of the cell where the element was clicked? For example passing the index position of that cell ? I’m just guessing though because i don’t know how it’s programmed…

There is very much a good use case for this. Basically the GroupFocus Type would be set via a custom state. Then any buttons or actions on the group focus could operate on their parent group’s object.

When we click on an icon, let’s say, that is on the repeating cell, it will display the groupfocus and then set the state of the groupfocus to be the current repeating groups cell’s object.

Here is an example:

I would like to have a group focus show up when I click on this down icon

The group focus’s type is the same as the repeating group cell’s type

and the delete button can do things to that object such as delete

Is there a different way to accomplish this drop-down?

2 Likes

@levon, here’s a hacky workaround that actually works:

3 Likes

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