Tabbing from field to field on a form

Tabbing from field to field on a form

  
I'm just starting to play around with Outsystems and have designed a form using the Edit Record widget.  I set it to be two columns and put some fields in the first column and some in the second.  When the form is shown in the browser, if you use the tab key, it goes through all the fields top to bottom in column one and then top to bottom in column two.  I'd like to control how the tab key moves through the form.  In other IDE's, this is typically done but setting a tab sequence number but there is nothing like that in the form design that I can find.

Any ideas on how best to accomplish controlling the field that gets focus when the tab key is used.  In my example, I'd like to go left to right then top to bottom.


Solution
Hi Curt,

Welcome to the Outsystems community.

You can override the tabindex property using extended property. 



Regards,
Paulo Garrudo

Solution
Thanks!  I'll start working with that.
That worked!  I was surprised that it wasn't listed in the dropdown but I typed it in and it worked.  I assume all of these extended properties are documented somewhere?
Hi Curt,

Extended properties can be any possible attribute that the HTML element can accept as specified in the HTML language reference.

You can check more information using the Service Studio help

Regards,
Paulo Garrudo
Thanks!
Hi to all. My name is Alex and I work for Webb  and I have the following problem:

I have a webscreen with several text boxes and some Web Blocks. I can set the tabindex for the text boxes, but inside the Web Blocks I have more text boxes but the tabindex doesn´t work properly. Is there any limitation using Web Blocks to set the tabindex correctly?

Best Regards,
Alex
Alex -

No, there isn't a limit.

I'm assuming that you are using "tabindex" as an extended property, correct? How do the Web Blocks know which values to use if you are setting them on the page as well? You may be accidentally using the same tabindex on multiple fields.

J.Ja
I have not overridden any tabindex property currently. Pressing tab moves correctly all throughout the page except when it has a date field (within a webblock).
So, when I press tab from a specific text field, it skips the date field weblock which follows it and moves to the immediate textbox after the date field. This date field uses a calendar picker.
Can you advise ?

In the webblock, add an input parameter for 'tabindex". In the webblock, on the date field, add Extended Property called "tabindex" and set it to tabindex. On the form that has this webblock, pass in the tabindex that the date should have.

The problem is how one knows what is the tab index of each element. I have a whole bunch of fields in my screen and only one is not following the right tab order (it jumps to the field after it and then it comes back to the prior field). It is weird and I can't figure it out.

So, I wanted to set the right tab order, but I have no idea what number to use since there are so many other fields/controls/weblocks/buttons on my screen.

How one deals with that?

Macro101 wrote:

The problem is how one knows what is the tab index of each element. I have a whole bunch of fields in my screen and only one is not following the right tab order (it jumps to the field after it and then it comes back to the prior field). It is weird and I can't figure it out.

So, I wanted to set the right tab order, but I have no idea what number to use since there are so many other fields/controls/weblocks/buttons on my screen.

How one deals with that?


AjaxRefresh can mess it up if it add items to the screen. A while ago I had a bit of script that would just go through the page and reset everything to tabindex = 0, and would call it after the ajax refresh on problem screens.


J.Ja

Yeah, just by editing it it went back to normal. Thanks. So, as far as you know, there is no way to know the current tab order of elements in a screen?

What about web blocks? I have the following

Field 1

web block (holds a editable list)

Field 2

The tab goes from field 1 to field 2. The tab never gets inside the list unless I click there. 


What am I missing?


Thanks.

1. You can detect the order with JavaScript/jQuery. Unless you manually set it through the attribute, the browser does whatever it wants.

2. That doesn't sound right? Check the source code for something weird like a tabindex of -1 (which keeps it from tabbing in at all).

J.Ja