Thanks Brian, which reminds me that the iterator component is really useful in cases like this - i’ll create some basic tutorial explaining how to use it 
3 Likes
Still so many components I don’t know enough about in Wappler, it’s like a magic box that keeps on giving
3 Likes
I’ve never used the data iterator, so I’ll be investigating Teodor’s solution. I expect this will offer more control than the option below.
There is a basic option I was experimenting with recently, which might be useful to consider in some situations. It needs minimal work to set up - just a matter of tweaking the tab order.
In this example, I don’t want users to navigate the edit or delete button via the keyboard (they’re linked to modals) - so I gave these buttons a tabindex of -1. This means I can navigate through the records using the tab key (or shift+tab to go in reverse). That’s all that’s needed.
I’ve also add added the data detail component to show a preview as each record is accessed. Depending on how you set this up you could navigate the record, and carry on tabbing to access the page navigation buttons.
The data iterator is like a repeat region which returns one record at time.
I suggested using it, instead just incrementing the variable value directly, as the data iterator iterates through your existing records - so it will always return an existing ID.
When incrementing the variable value by adding var.value+1 it may reach a record that’s already been deleted and nothing will show up (which will confuse the users of course).
Thanks - it certainly looks like a very useful feature which I’m sure I’ll be using.
In the method I used, I didn’t use any extra variables - I just set the data detail ‘select’, with both onclick and onfocus events (so it would work with the mouse or keyboard).
1 Like
Many thanks @Teodor, you make it look so simple as always. I am with this client at the moment but will try your suggestion when I get back later.
Cheers
1 Like
Hi @Teodor, I have been following your instructions and playing around with this for over an hour but I can’t get it to work. I have tried different modifiers for the key down actions but still nothing. I have been watching the XHR results in DevTools but nothing seems to happen when I press the Alt-DownArrow (for instance) but nothing appears in DevTools.
If I manually click with the mouse then I can see various actions such as business_address_actions.php?business_id_getvar=8
Any thoughts?
Are you sure you followed the 3 steps I posted above?
There is nothing much to go wrong there. Did you add the iterator and it’s value as value for your var?
Did you try using just arrow down?
Also, you are not supposed to see anything in the xhr tab, when the iterator changes the values - this happens on the clientside.
As you say the instructions are simple. I will have another go in a little while.
Thinking about this a little further. Not sure I would bind it to the up and down arrows. Browsers use that for scrolling. Never a good idea to mess with someone’s browser functions. May use right and left arrow keys instead?
You can assign any key you like
Hi @Teodor , I tried last night, and again this morning with fresh eye but I cannot get it to work.
The content of the page is in an SPA with Iterator, Variable, Server Connects and tables all on the SPA page rather than the master/head page. Could this make a difference? I would doubt it as everything else works fine.
Any further ideas?
I’ll need a link to your page to see what’s going on there.
Sent PM