How to use keyboard shortcut navigation with a table in Bubble

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

In this Bubble.io tutorial we demonstrate how to nagivate up and down a table using the up and down arrows on a keyboard. This Bubble tutorial shows how to use custom states to track the selected row of a repeating group and change this selection with the arrow keys. The plugin used is Air Keyboard Shortcut by Zeroqode.

In a previous video I showed how to use the plugin Air Keyboard Shortcut to add in a nice popover search box like this to be able to search through my contacts. But what if I wanted to just use my arrow keys to go up and down?

So maybe I hit the down key, it goes to Tony Stark and then hit down again, it goes to Peggy Carter and so on and then have an action to enact on the row in my
that is selected.

Setting up a repeating group


So let's set that up. Here is my Bubble editor and I'm going to begin by looking in my repeating group and I've already got all of my elements contained in a group and I'm going to use that to style the row whether it is selected or not selected.

Using Custom States to store active row


So this is a prime example of where an
will come in useful. So I will just put an custom state up here. I'll just change this to list of users so that it's more clear and let's create an custom state set and I'll say selected row and it's going to be a number and so the default will be zero. Then I can go into my group here. So the first child of my repeating group and I can go condition when list of users selected row is current cell's index so that refers to this index.

Understanding repeating group index


You just have to work out on the platform you're using because in web development some indexes start with zero Bubble, it starts with one.

So this is row one, row two, row three and so on. So when the custom states row is current cell index, I'm going to change the background. So you see, it necessary, it doesn't give me background colour, that's because I haven't set a background colour. So I'm going to set a background colour here of default white. And now if I go back to the conditional here, I can set colour and I'll just change it to a light grey, see if that makes that difference.

Yes, that will be what am I going here? Why is that an error? Oh, from a different tutorial for a
. Let's remove that.

Running a Workflow with a keyboard shortcut


So I want to enact an action if my user hits the down key. So in my plugins I've got Air Keyboard Shortcut, so I need to add an element of Air Keyboard Shortcut for every key that could possibly press that I want to enact a
on. And so I'm going to call this one down and then in my workflows I'm going to say when Air Keyboard Shortcut is triggered, I have to choose one. My shortcut a Air Keyboard Shortcuts a is for my search box pop over. So I need to make this one B. As you can see, that's the one that I've just dragged in. There's my A, my command k is in there, there's my B which is my down and I want to add one to my custom state.

So
, I have to refer to itself and then the action so I can get a list of users selected row plus one. Okay, then let's just assume that works. I'm going to be bold.

Let's copy and paste that. So now I have C and C is going to be up and I can duplicate this. So when C is clicked I'm going to say minus one. Okay? Right.

Let's test this. So no row is selected. If I press down, you see it goes down. Now you also notice that and there we go up and it goes up. That's working. Now you will have noticed that the window moves and that's because when you're running with the debugger, Bubble includes how big is this like 60, 70 extra pixels on the bottom. If I get rid of the debugger you can see that as long as my page is not too big and too high, then it works perfectly.

Run a workflow with Enter key


So let's say I went down to Natasha Romeloff and I wanted to hit a key combination or maybe Enter will try that to view her profile.

So we need to have another instance this time it's D. And I'm going to try enter. Now the reason I'm a little bit apprehensive about Enter is that in some instances you're competing with what the browser thinks is the default action. And so obviously a key combination well, not a key combination, but something like Enter is quite commonly used in forms, et cetera. So I'm going to try enter. And so this time when shortcut D is selected, then I'm going to go for and navigate go to page and let me just check I've got contact two page set up here. So my page here is of type contact and all the entries in my database here are also of type contact. So that then means that I can on the go to page destination contacts two.

Custom states and Current Cell's index value


Okay, and I have to send some data. And now how do I retrieve that data? Because all I'm doing at the moment is storing in a custom state a number value so I can refer to the repeating group.

Let me get the right one here. I've got a couple of repeating groups there. Just going to call that one master because that's the one I'm using. So I can go repeating group, master, list of contacts, item number. And now I can refer to my list of users selected row because that's the number. And so that if the so Natasha Romanov is row three and my custom state is holding the value of three when this row is selected. So let's test it, go down to Natasha Romanov, hit Enter and Bubble actions a workflow and takes me across.

Now just so that stands out even more clearly. I haven't got my database fields here set up. So this is type contact of page contact. And so then I can text on.

There we go. Type contact, name, parent contact, last name, just to prove that it's worked. There we go. We've got Natasha Romanoff.

Let's test it with one other. So this list of my users will go to preview and let's go down to Bruce Banner, hit enter and there we go. We're taken through to Bruce Banner. So there we have it. That is quite a cool way of using keyboard shortcuts in your app.

I think it's certainly something that you can do that will up the professionalism of your app. If you think of the huge services that people use, like Gmail and other business applications, there's so many keyboard shortcuts going on. And it will be a good way to set your Bubble app aside from the rest and make it even more professional by adding in keyboard shortcuts, keyboard navigation as it's becoming increasingly popular with SaaS apps.