Using keyboard arrow keys to tab through repeated

[UKRiggers]

Is it possible to set-up a repeat table or region and use the keyboard arrow keys to traverse up or down the list?

And would it be possible to keep going onto the next page?

And then hit enter/return to action something?

If so, how?

[Teodor]

Please check:

Using Shortcut Keys for Dynamic Events

With Wappler you can assign different Keyboard Keys as shortcuts for different dynamic events, like: controlling a slideshow, run server action, refresh data, update record, show modal etc. We will show you how to assign shortcut keys for controlling the Swiper component. Select App in the App Structure(1) and add new Dynamic Event (2): [Screenshot_7] Then in the Keyboard group select on Key Down: [Screenshot_8] And click the dynamic action button, to select what to happen on key down: [S…

[UKRiggers]

Hi @Teodor, thanks for helping out this morning. I have read this article and tried to relate it to my particular situation. Here is my available actions after clicking on the

Dynamic Events > Keyboard > Key Down > Action Picker

I really don’t know what to do from here. I guess it may be something like
Dir > business_ID+1 or business_ID-1
but I need some guidance please.

And then I probably select ArrowUp or ArrowDown

[UKRiggers]

Has anyone ever done this and can give me some guidance?

[brad]

I’m not sure how to do it but I’ll be watching this thread. Interesting concept.

[Teodor]

@UKRiggers are you using a paged query here?

[UKRiggers]

Yes

[Teodor]

Then select the bindings controlling the paging:

[UKRiggers]

But that is for ‘tabbing’ between pages and not records, is it not?

I want to ‘tab’ or move between records on the page (see screenshot) as if I am clicking them with the mouse.

If I am wrong then I apologise and will try your suggestion.

[Teodor]

I thought you want to change the pages, using your keyboard without having to use the paging buttons?

Can you explain a little more detailed what are you trying to achieve?

[UKRiggers]

I want the user to use the up and down arrow keys to traverse through the list. I suppose I want a tabindex type of thing on each of the table’s rows <tr>. Then they can use your suggestion to move between pages.

[Hyperbytes]

Don’t ask me how, it’s not my area of expertise however I believe you are going to have to do some custom coding

The DOM model provides element objects lastSibling and nextSibling and I think you are going to have to manipulate them by custom code.

Lots of references on google if you search those terms

[Teodor]

But do you wish to just visually select these rows, or should that do anything on the page - like changing the active record or something?
What’s your idea?

[UKRiggers]

Sorry @Teodor, you’re right, I wasn’t giving you enough, clear information. This little clip shows what I want to achieve, but using the mouse.

Screen.mp4 (5.5 MB)

[Teodor]

I got your idea now - are you using the data detail component there?

[UKRiggers]

No. A series of Server Connect with Bootstrap generated tables.

[Teodor]

@UKRiggers
Please explain how do you filter the data on the right - can you just explain in one post what have you done on your page? If i don’t have this info i won’t really be able to help you…

[UKRiggers]

The table on the left is a simple paged-query server action.
There is a variable “business_ID_var” which is set with “business_id” everytime the row is clicked.

There are 4 other query server actions, each with a $_GET variable “business_ID_getvar”.

There are 4 generated tables on the right using Server Connect linked to their respective query server actions.

So everytime a row is clicked, it sets the value in the variable, which, in turn is read by the server actions and changes the tables.

I hope this helps to explain. Really appreciate your advice.

[Teodor]

Yes, thank you for your explanation.

You can do the following.

1. Add data iterator component. Use the same data source, as you are using for the paged table.
2. Set its value as the business_ID_var value:

3. On arrow up and on arrow down control the data iterator prev/next:

You are done

[Hyperbytes]

Genius as always Teodor