How to use keyboard shortcut navigation with a table in Bubble

Adding Keyboard Navigation to a Table in Bubble

In a previous video, I showed how to use the plugin Air Keyboard Shortcut to add a nice pop-over search box to search through my contacts. But what if I wanted to just use my arrow keys to go up and down? So if I hit the down key, it goes to Tony Stark, then hit down again it goes to Peggy Carter, and so on, and then have an action to enact on the row in my repeating group that is selected. Let's set that up.

Setting Up the Repeating Group

Here is my Bubble editor and I'm going to begin by looking in my repeating group. 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. This is a prime example of where an option set will come in useful.

Creating an Option Set

I will just put an option set up here. I'm just going to change this to "list of users" so that it's more clear. Let's create an option set and I'll say "selected row" and it's going to be a number. The default will be zero.

Styling the Selected Row

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. This refers to this index. You just have to work out on the platform you're using because in web development some indexes start with zero, Bubble starts with one. So this is row one, row two, row three, and so on.

Adding Background Color

When the custom state's row is current cell's index, I'm going to change the background. You see it doesn't give me background color; that's because I haven't set a background color. So I'm going to set a background color here of default white. Now if I go back to the conditional here, I can set color and I'll just change it to a light gray. That makes a nice difference.

Setting Up Keyboard Shortcuts

I want to enact an action if my user hits the down key. In my plugins, I've got Air Keyboard Shortcut. I need to add an element of Air Keyboard Shortcut for every key that could possibly be pressed that I want to enact a workflow on.

Creating Workflows for Arrow Keys

I'm gonna call this one "down" and then in my workflows, I'm gonna say when Air Keyboard Shortcut is triggered. I have to choose one; my shortcut A is for my search box popover, so I need to make this one B. I want to add one to my custom state. Set state of "list of users selected row" and then with custom states, unlike when I'm modifying a value in a database, I have to refer to itself and then the action. So I can get "list of users selected row" plus one.

Adding Up Arrow Functionality

Let's copy and paste that. Now I have C, and C is going to be up. I can duplicate this. When C is clicked, I'm gonna say minus one.

Testing the Navigation

Let's test this. No row is selected if I press down. You see it goes down. Now you also notice that the window moves. That's because when you're running with the debugger, Bubble includes this view that's 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.

Adding Enter Key Functionality

Let's say I went down to Natasha Romanoff and I wanted to hit a key combination or maybe enter to view her profile. We need to have another instance, this time it's D, and I'm going to try enter. 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. Obviously, a key combination, or something like enter, is quite commonly used in forms, etc.

Creating a Navigate Workflow

I'm going to try enter, and so this time when shortcut D is selected, I'm going to go for a navigate go to page. Let me just check I have got a contact page setup here. My page here is of type contact and all the entries in my database here are also of type contact. That then means that I can on D go to page destination contacts.

Sending Data to the Contact Page

I have to send some data. Now how do I retrieve that data? Because all I'm doing at the moment is just storing in a custom state a number value. I can refer to the repeating group. I've got a couple of repeating groups there, just go that one master because that's the one I'm using. 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.

Testing the Navigation

Let's test it. Go down to Natasha Romanoff, hit enter, and Bubble enacts a workflow and takes me across. Just so that stands out even more clearly, I haven't got my database fields here set up. This is type contact of page contact, and so then I can add the name and last name fields. Let's test it with one other. This list of my users, we'll go to preview and let's go down to Bruce Banner, hit enter, and there we go, we're taken through to Bruce Banner.

Conclusion

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 like the huge services that people use like Gmail and other business applications, there are so many keyboard shortcuts going on. It would be a good way to set your Bubble app aside from the rest and make it even more professional by adding in keyboard shortcuts and keyboard navigation as it's becoming increasingly popular with SaaS apps.