In this Bubble tutorial, I'm eager to demonstrate how you can leverage the arrow keys to effortlessly navigate up and down records in a repeating group. Initially, I planned to feature the new Bubble table element in this tutorial. However, the data sources for the element didn't quite align with the intended workflow for this demonstration. Instead, I have utilised a repeating group where I can conveniently navigate using my arrow keys. So, let's say I wanted to view Peter's records, all I'd have to do is navigate to Peter using my arrow keys and hit Enter on my keyboard. That action will lead me straight to Peter's page.

Exclusive Content on Planetnocode.com

Before we delve deeper into this tutorial, did you know we have a website called planetnocode.com? Here, you will find exclusive tutorial videos that are unavailable on YouTube. There's currently a fantastic membership offer you really should take advantage of. Just head over to planetnocode.com right now.

Building Process Using Air Keyboard Shortcuts

To construct this, I have employed the Air Keyboard Shortcuts by Zeroqode and installed three on my page. The three are for navigating - one each for Enter, Down, and Up.

The Workflow for Arrow Keys Navigation

Regarding workflows, let's focus first on the Up function. I have implemented a custom state on the page to store an index value for the currently highlighted row. This custom state, dubbed Selected Row, is numerical, and it defaults to one. In my repeating group, there's a conditional statement which changes the background color corresponding with the Selected Row, providing visual feedback to the user. So when I press Up, the Selected Row decreases by one. If I hit Down, it increases by one.

Bonus Challenge: Handling Custom State Boundary

Here's a challenge for you - what happens if the Selected Row is one and you subtract one from it? You get a zero, right? Now, how would you prevent that? Feel free to share your solution in the comments.

Keyboard Navigation with Enter Key

So, what transpires when a user presses the Enter key? Currently, the Bubble table element does not have the functionality to list through entries. However, in my repeating group of contacts, I have enabled item selection based on the Selected Row. Therefore, if a user starts on one and hits the down arrow key, they move to two, updating our contact Selected Row to two. The workflow then moves to the second item in the repeating group, allowing the user to navigate through the set seamlessly.

Conclusion: Enhance User Experience with Keyboard Navigation

And there you have it! This is a straightforward way to introduce handy keyboard shortcuts into a repeating group presented as a table. By enabling keyboard navigation, particularly arrow key navigation, you significantly enhance the overall user experience within your app.