You probably already came across a small contextual menu in a Table, such as the one below.
But if you already tried to do this, you probably encountered an issue : you cannot toggle a Group Focus from the inside of a Repeating Group cell.
Why ? Well because Bubble. (To be honest I don't have a explanation for this behavior).
But thankfully there is a workaround that will enable you to do this, quite easily.
Related tutorials : How to show a Group Focus on Hover in Bubble.io // Bubble.io Group Focus : All you need to know
Step 1 - Build your Repeating Group
If you don't already have it, you can begin by building your Repeating Group (or your Table).
In my case, I'll use a pre-built table component from Nocodable Component's library to save a bunch of time.
As you can see, this is pretty standard table, nothing too extravagant.
Note that this tutorial will work the exact same way for both Repeating Groups and Tables.
Step 2 - Build our context menu
Now comes the important part, which is to actually build our contextual menu.
If you know your way around Bubble, you already know that we are going to use a Group Focus to build it.
But the tricky part is that we are going to build it inside a Reusable Element. This way, we'll be able to make everything we needs inside of it, and then add it to our table.
So let's go ahead and create a new reusable element :
Now that it's done, we'll start by giving it some basic settings like setting it's type of layout to "column" and it's width and height.
Since this will be a small icon in our table, we can go ahead a give it a fixed width and height (30px by 30px will do the job).
Now we have a our Reusable Element setup, we can go ahead and add our contextual menu Icon (which will be the icon that will show our group focus when clicked).
All we need now is to create our Group Focus and add it to our Reusable Element.
As you can see, I've set my Group Focus' reference element to the Group containing my Icon, and set a small vertical offset of 10px.
Step 3 - Adding workflows to show our Group Focus
Alright, now we simply need to add a workflow to toggle our Group Focus when our icon is clicked.
Nothing difficult, simply add a workflow to the group containing our Icon and add a "Toggle an element" action to toggle the Group Focus.
Step 4 - Adding our Reusable Element to our Table (or repeating group)
Now comes the last step : adding our reusable element into our table.
Pretty straightforward, simply drag and drop your reusable element into your table.
And there you go ! If you make a preview, you'll see your new Contextual Menu running perfectly fine !
Now, depending on your Use Case, you may need to do an additional step to pass data through the reusable element to be able to make operations with it.
Step 5 - Passing data to our Reusable Element
Let's take a quick example. As you can see, my Group Focus has 3 options :
- Edit
- Delete
- Duplicate
So I need to be able to pass the data from my Table to my Group Focus, to be able to perform these operations on the right objects (which are invoices in my case, but that can be anything).
For this, all you need to do is to set a Content Type on your Reusable Element, like follow :
As you can see, I set my content type to "Invoices", which is a Data Type I have in my app, but you can set it to anything you need.
Now that you've done that, when you click on the reusable element in your table, you'll need a new line allowing you to send data through your Reusable Element.
From there, you can send any data you like. In my case, I want to send the Current Row's Invoice, to be able to perform operations on it (like deleting it for example).
Now that it's done, you can perform any workflow using the Reusable Element's Data, like below :
And there you go ! You now have a fully functional Group Focus in a Repeating Group in Bubble !
