Is it possible to use keyboard events (up arrow & down arrow) to move from one RG cell to another?

Questions
1

I’m trying to build an app that shows a preview of a record and once you click on one of the cells in the “preview” repeating group it shows the details to the right, soft of like how Outlook works. Then, once the focus is on that “preview” repeating group you can use the keyboard’s up and down keys to traverse through the cells.

Example:

2

I’ve seen things in the forum about adding keyboard shortcuts for actions with Bubble. As such, it makes me think that something like this is possible, but I’m not quite sure how. Have you dug up any of those articles on using keyboard shortcuts with Bubble?

3

The only post I saw was for using them in the editor, not run mode.

4

Here’s one thread that may be helpful: Change input with button AND/OR keyboard?

5

Thanks, I don’t think that’s going to work. It’s only using hidden drop downs to select a number 1-9 for calculations.

6

Raising this one from the dead. Has anyone come across a solution for this?

7

@Kfawcett Would this plugin do the trick?

For example, if you set the shortcut to change a custom state value which then sets the state to the next or previous cell in the repeating group?

8

Doesn’t look like that will work for the cells in a repeating group. It does look like bubble is setting a class attribute for each cell in the repeating group (e.g. “entry-1”, “entry-2”, entry-3"), so I think it would be possibly to use JavaScript to target it and change which cell is “active” (i.e. set a state) by incrementing/decrementing the number with the up/down keys.

9

Does this one work as you need it to? The custom state is of type number instead (set on the Repeating Group Event element), and is set to 1 on page load. Then the up and down arrows change the value depending on how many cells are in the repeating group (and sets back to 1 if the User clicks the ‘down’ when they’re already on the last item in the rg) :slight_smile:

Preview:

Editor:

6 Likes
10

Thanks, @fayewatson. Will look at your example tomorrow!

1 Like
11

No problem at all! :slight_smile:

12

Thank you so much @fayewatson !!! Not sure I would have ever figured out that Bubble was able to do this without your help. :smiley:

Also thanks AirDev team (@vlad ) for the Keyboard Shortcut plugin!

2 Likes
13

Awesome!! My pleasure, @Kfawcett!! :relaxed:

1 Like
14

Just wanted to say that this also enabled me to easily make an image gallery browseable with arrow keys left & right.

Thanks so much! super easy!

1 Like
15

Hey! This plugin is fantastic!

Does anyone know how to trigger a keyboard shortcut if an input is focused?

Thanks,
Carlo