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?
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.
@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…
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!
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?
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.
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.
I definitely think this is possible with the Air Keyboard Shortcuts plugin, and I’ve almost got a demo working
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.
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.
@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 @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.