Hi all,
I’m trying to improve on the work my colleague has done. The goal is to “walk” through a grid of elements using only keyboard arrows. The highlighted element should have “selected” state within the group.
The example below works great, but it requires creating hidden symbols for every new element in the grid. I’m trying to achieve the same functionality, but without need to create hidden elements, while keeping the grid easily scalable.
Any suggestion?
grid-test.rp (57.9 KB)
Use a horizontal repeater that wraps. Left and right arrow keys decrement and increment an index variable, respectively. Up arrow key decrements the index variable by the number of items in a row while down arrow key increments by as much.
You haven’t fully specified the behavior so you’ll have to determine what happens if you press the right arrow key when the rightmost item in a row is selected. If it wraps to the start of that row you’ll need logic to check if the selected index is the end of a row ([[Item.index % ItemsPerRow]] is 0 if it’s the end of the row) and adjust behavior accordingly (decrement index variable by the row length). If you’re happy with it progressing to the next row then no additional cases are needed.
Use the index variable to determine which item in the repeater should be selected. Build interactions around that.
This is how I’d do it.
Thanks for a quick reply.
The selector behaviour should be the same as in the example above, meaning that when the end of the row is reached, selector should not move to the next row.
I remember trying the repeater solution some time ago, but I had trouble figuring out how to mark the proper item inside the repeater as selected. I’ll give it another go.
I’ve made the grid selector using the repeater, as suggested. The only way I’ve found to update the selected item is to move the element inside the repeater. I’m not sure if there’s a better way.
One feature I’m missing is stopping the selector from moving into the next row when the end of the row is reached. To do this I need to know how many items are in the row. How do I get the “items per row” value without hardcoding it?
grid-test-v02.rp (57.2 KB)
I think you’re right about needing to move, or another action, to update the repeater. This has to do with what triggers repeater updates. I believe applying a simple [[true]] filter would work too.
I don’t think there’s a way to programmatically access the number of items per row, you might need to hardcode it.