Shift click to select multiple rows in repeating group like in GMail

Hey all,

I’m hoping to reproduce a multi-select functionality that exists in gmail… See video here: https://cl.ly/98091f25a29f

Basically, when a user checks one item in a repeating group, and then holds the “Shift” key and then selects another item down the list, it automatically checks every item in between the two check marks.

Would there be any way to do that in a Bubble Repeating group?

Thanks in advance!

Just food for thought: Maybe you could work something with keeping an index of the items positions as numbers and then have a state called “selected” to be set to yes when clicked, then also set the “selected” state of the ones between the two clicked to yes.

About holding the shift button, I don’t know if Bubble already supports keyboard actions, but try to look into it both as a native feature or something provided by a plugin. Maybe not using a keyboard action may also do the trick, if possible to use another way to let the user interact with your screen.

1 Like

@richardsonjj36 - I started working on a proof of concept of this yesterday. There’s one bug holding me up, but the short answer it is possible. Nothing too complicated, just requires a good understanding of states and conditional logic, and index values in repeating groups.

As @vini_brito mentioned, having keyboard actions may be a limiting factor (for the moment, barring a plugin to support the action. (Anecdotally, I’ll say keyboard actions are really only used by power users).

Will follow-up here once I have an example to show…

1 Like

@dan1 did you try the Air Keyboard Shortcut plugin for the keyboard actions?

1 Like

Ah, I missed this! Thanks for letting me know about it.

1 Like

Thank you all! Really appreciate you steering me in the right direction. I got something to work! The only difference is the user has to hit shift after checking the start box & after checking the end box. Then, when user hits “shift” it selects everything in between the two.

I accomplished it by using custom states & indexes, as recommended. Basically, when the user selects a tic-box and only when none are already selected, that tic box’s index is saved as a custom state “Start box index”

Then, when the user selects a tic-box and only when one or more boxes are already selected, that tic box’s index is saved as a custom state “end box index” – and then it calculates the difference between the two & saves that difference+1 as another custom state “difference”

Then, when user clicks “shift”, it starts a workflow which saves everything from the start to the very end of the repeating group as custom state “Start box index to very end” and then finally saves the custom state “selected” (the one I actually want/care about) as everything in “start box index to very end” :items until “difference”

Haha. Was a bit of a mind bender but works great now!

2 Likes

Hey glad you go this working.
Have two questions, does your solution take into consideration that the user may select a lower index before an upper index?

Second questons

How did you detect the Shift click? Did you use the Air Keyboard Shortcut plugin or another method?

Thanks

Hey @seanhoots

  1. Good question, & unfortunately I didn’t take that into consideration haha… Only works when they select from top-down. I’m ok with it for now but will ponder on solutions for selecting from the bottom-up.

  2. Yes, I’m using AirKeyboardShortcut. Works great.

Thank you

1 Like

@seanhoots just realized you were the creator of the plugin. Thank you & nice work! Gonna be super useful.

Glad the plugin was useful here.
I’m trying to gather different use cases for the plugin and I think this is a really nice use case.

For the issue of the user selecting bottom up here is an idea.
Instead of explicitly making the custom states as start or end you can simply make them endpoint1, endpoint2.
Then when both have been set, you find the minimum and maximum and make them the start and end respectively.

1 Like

Awesome. Yes, definitely a great use case for that plugin. I’m sure I’ll find more now that I’m aware of it :slight_smile:

Will try the idea you mentioned – sounds promising! Thanks

I definitely think this is possible with the Air Keyboard Shortcuts plugin, and I’ve almost got a demo working :slight_smile:

Would it be possible to have a state on the Airkeyboard element, so that we can use something along the lines of “Airkeyboard ‘is triggered’ and ‘isn’t triggered’?” in conditions on worfklows?

For example, when creating this functionality with checkmarks within a repeating group, I think the workflow needed is “When an input’s value is changed (a repeating group checkbox is checked), and Airkeyboard shortcut (shift) is triggered” --> set the custom state to select all of the the Mail items from endpoint 1 to endpoint 2.

Then there could be a separate event which is “When an input’s value is changed (a repeating group checkbox is checked), and Airkeyboard shortcut (shift) isn’t triggered” --> add that single Mail item to the list of selected Mail.

I’ve created a short example which is a little buggy, but I think it will work 100% of the time with ‘is triggered’ and ‘isn’t triggered’ to detect when the User is holding shift, and when they are not.

Preview:

Editor:

Ok guys, so i decided to create a plugin to do exactly this so you don’t have to create any workflows or use custom states.
Here is a demo of it. You can shift click to select/deselect multiple ranges. And it doesn’t matter where you start the selection from.
Preview:

Editor:

I will clean up the plugin code and release it later in the day.
Yes it will be a free plugin.

3 Likes

@seanhoots approach is considerably better than what I came up with. So I’ll defer to your setup. :smiley:

Nicely done, @seanhoots and @fayewatson

1 Like

@seanhoots Ah, even better! Thank you so much, Sean! Can’t wait to try this out!

1 Like

@seanhoots is the best gracypie for bubblers GodBless @seanhoots

1 Like

@fayewatson - you’re a genius! Love the solution.

@seanhoots - amazing, thanks! Quick question on this: If my repeating group has a fixed number of cells & pagination (such as demonstrated here: https://www.youtube.com/watch?v=FMkNV8_1tSk), will this selection plugin work for selecting half of page 1, all of page 2, and part of page 3, for example? If not, no worries, just curious.

Thanks again to all.

2 Likes

@fayewatson, @dan1, @richardsonjj36, I’ve published the plugin to the plugin store.
Yes it’s free, try it out and let me know if you find any issues.

@richardsonjj36, i’m not sure the selection will work across pagination, give it a try and let me know how it goes.

2 Likes

Thanks @seanhoots! Plugin is awesome. It doesn’t select across a repeating group with fixed pages/pagination, but works like a charm for any other use case.

1 Like

Amazing plugin, @seanhoots! Just tested it and all works perfectly! :relaxed:

P.S. For everyone using this plugin, let’s all give it a great rating in the plugin store for Sean’s continued contributions to the community!

Edit: when giving a rating, my page gets stuck on “submitting…”. Is anyone else experiencing this?