🛡️ [NEW Plugin] Context Warrior | Master the Right-Click Context Menu

[draked123]

Introducing Context Warrior

---

Greetings, fellow Bubblers!

Brace yourselves, for the Context Warrior has arrived! This new plugin is designed to equip your Bubble applications with formidable context-menu capabilities, making your apps not only efficient but also intuitive for end-users.

Features & Capabilities:

1. Custom Context-Menu Creation: Design a tailor-made context-menu, associate it with a unique ID, and behold as it breathes life into your Bubble app.
2. Seamless Integration:

• Context Warrior slots smoothly into your app, demanding minimal setup.
• Place it on your page, feed in the needed details, and let it oversee the intricate mechanics behind the scenes.

3. Repeating Groups Compatibility:

• For those employing repeating groups, position the Warrior Data Beacon at the pinnacle (top-most level) of the repeating group for optimal results. Ensure it resides directly in the RG Cell and not nested inside another group.

4. Data Exposure:

• Actively Selected: A dynamic state that remains active when the context menu is on display. This value reverts to empty once the menu disappears.
• Last Selected: Retains the last selection, updating with every right-click action and persisting even after the menu closes.

Try It Out:

Dive into the realm of the Context Warrior and test its prowess. Witness firsthand the power it can imbue into your applications, and share your experience with the community. Your feedback is the elixir that fuels further refinement!

View my plugin page here:

Bubble - Visual Programming

View the Marketplace listing here:

Context Warrior | Right Click Menu Plugin for Bubble, by TerminalCAD, LLC

View the demo here:

Bubble - Visual Programming

---

A huge thank you to our beta testers!

---

Let me know any feedback, or if you need any assistance.

[draked123]

Update Log

• Updated the display functionality, previously when the context-menu was triggered I utilized display: block, that caused issues with context menu’s not following the design given to them in the bubble editor. Now, they will display with display: flex

Thanks to the user who pointed this out to me.

[brendan.a.ford]

@draked123 I’ve just subscribed because it looks like it can right click on individual RG cells.

Do you have any instructions? I can’t seem to get any of it working.

so far I have the Warrior Data Beacon at the top-most level of the repeating group, but can’t find how to trigger, or even what to trigger.

Please help!
Thanks

[draked123]

Hey Brendan!

Thank you so much for subscribing. If you need any further help, feel free to post here (or DM me, your choice). If you need more assistance or want to discuss your use case, we can always setup a time to talk.

At the bottom of this page, you should see a loom video where I set it up. Yes, you can right click on specific elements in a RG.

Bubble - Visual Programming

Let me know if you need any further help,
Drake

[brendan.a.ford]

I didn’t see the Loom! Thank you! Will check it out and come back if I have any questions!

[brendan.a.ford]

Hi @draked123 not sure what I’m doing wrong - I’m hoping it’s not to do with the fact that I’m trying to use it on a nested RG?

[draked123]

Hmm - I honestly have never tested it in a nested RG. Let me do some testing, and if I have to push an update to allow this functionality I will.

I’ll tag you once I have a resolution.

[brendan.a.ford]

Thank you - that’s awesome! I’m assuming all the screenshots check out then? granted the IDs are correct, which they are…

[draked123]

Hey @brendan.a.ford,

Looks like you’ve set it up correctly from what I can tell (assuming IDs are correct).

I just duplicated a similiar-ish type setup, and the experience I am having is that the context menu will appear when I right click on the specific elements, however the incorrect data from the cell is being passed.

For example, here I right clicked on this image:

and when I click edit, I actually get the details of:

Which is another image.

Just want to make sure this is the same issue you are facing.

[draked123]

Hey there @brendan.a.ford and others who may want to duplicate this behavior:

---

Using Nested Repeating Groups with Context Warrior

So, in order to understand the solution, we need to first look at what is actually happening. I want to give some “behind the curtains” look at what is happening in the code that runs this.

The Beacon element has 1 main goal, and uses several steps to complete its goal. The Beacon’s goal is to set the “data” attribute of the HTML DOM element of each individual cell. This way, when you right click, you get the Unique ID, and in turn you get the object of that cell.

---

The issue

The issue with nested repeating groups is that the RG inside the RG, no longer has a unique ID, because there could be 4 “copies” of that nested RG, all with the same name, it doesn’t know which one to grab, causing mayhem to be induced.

---

The solution

The solution is to force the IDs to be unique. We can do this with the current cells index. Here is my tree:

I have my pictures sorted into albums. I then have a group, which is just the title of each album, and inside that group I created a completely invisible group called “?? var - RG Index”. We will come back to this, but it is set to:

and it’s main purpose is for us to be able to access that index number from inside the nested RG.

Now, in the ID slot of the nested RG, I have:

Since the nested RG is a member of the main RG, it’s current’s cell index refers to the one of the main RG.

Now, in my Beacon:

Here, we can no longer access the top-level cell index, so we have to reference our variable we have set up.

---

I hope this helps.

[brendan.a.ford]

thanks @draked123 - to confirm, the issue I was facing was that the right click just wasn’t working at all, and nothing was appearing. I’ll give the above set up a try now though. Thanks!

[brendan.a.ford]

@draked123 so with this setup, I should be able to now just refresh my app and right click on the Target Element, as detailed in the Target Element Select field, and it should work?

If so, I’m right clicking and its still not showing

Here’s a screenshot of my tree:

DropArea B - Group is the Target Element Select (which is a JS) plugin - would that matter even though it has the HTML ID applied to it?

Any idea what I’m doing wrong?

[brendan.a.ford]

So I’ve got it working now!
The only way I got it working was to disable the below:

Will disabling this prevent me from making changes on that specific cell’s item, in this case, that cell’s task?

Also, another issue is that its not appearing where I’m right clicking on the screen. It’s appearing elsewhere on the screen. How can I fix that?

Thanks!

[draked123]

Changelog 1.0.4

I pushed an update late last night (actually pushed two, 1.0.3 and 1.0.4), but they included a bug fix:

• Previously, if you were trying to target an ID of an element with the context menu, and not a class, and you were trying to do this all with a Repeating Group, it would error out. I had a bug in the code causing using IDs in RGs to not work. I never caught this in testing, as I only really tested with Classes. This was an error on my part.

• I adjusted the positioning code. Another update will be made this weekend in regards to positioning, as user reports still indicate funky behavior with weird offsets.

Note: V1.0.3 was pushed too early by accident, and should not be used.

[draked123]

Changelog

1.0.5

• Updated the initialization section to move context menu’s to the body of the page. This should resolve positioning issues with having your context menu in a group with margins, or padding.
  That is the hope, anyway. Self testing, worked well.

---

Also, if you are considering this plugin, just know that Brendan and I took our discussions to DM to not flood this thread. I don’t just ignore people

[draked123]

Price Drop Alert!

---

I’ve lowered the price for this plugin down to $3 / month or $50 / forever!

With this, you can build custom context menu’s directly on Bubble!

Take a look at the demo itself here:

Bubble - Visual Programming