Overriding tabindex with extended properties seems not work

Overriding tabindex with extended properties seems not work

  

I've some "links" elements in my page, and I would like disabled tabindex on them. I've tried use the "extended properties" and place: tabindex = "-1", but when page is render Outsystems seems autoasign tabindex, overriding my extended properties.

I've used a "workarround", placing an "special class" called "NoTabIndex", and using Jquery to find this elements, and replacing his tabindex propertu, like this:

"$('.NoTabIndex').prop('tabindex','-1');"

But really I do not like this solution, and I need to be careful with situations like ajax fresh, or things like that. Is there any cleaner solution? I am doing something wrong? Is any way to make Outsystems preserve my extended properties?

Hello Carlos,

Are you in Mobile or in Web?

In Web I can get to do it without problem. OutSystems is respecting.

Cheers,
Eduardo Jauch

Is a Web Application. I've cleared it all, and only left the link

And, when render the page:

The tabindex is "18" instead "-1". So I believe that Outsystems is automatically autonumering all inputs and links with some internal tabindex counter, ignoring my own extended property

Hello Carlos,

Could you make a small test?

Try it with an action instead of a navigate.

Cheers

Eduardo Jauch

I've tested with an screen action instead link, and as you suspected works fine this way, but the element from which I want to remove the tabindex is really a PopUp (that is rendered as a navigating link) so I should matain the navigate method... Any idea why or how I solve it?

Thx a lot!

Solution

I know a workaround... May be useful for you.

Make the button/link that opens the popup invisible (CSS display:none.
And add a new text with a div around it that executes a "$('#" + openpopup.id + "').click();" in the onclick (extended properties) of the div.

This will not be a link, but it will work.

You can also put an expression with a link tag with the code in the onclick, and use a link yourself (but if the page has form I think the outsystems link will be problematic).

Cheers,
Eduardo Jauch

Solution

Great idea! 

Apparently browsers ignores tabindex of hiddens elements, so autogenerated tabindex links is ignored if display:none is applied to link and use this workarround. 

Anyway, is a strange beheavior override the extended tabindex property; this behavior is not present when you use screen actions, or in inputs elements.


Regards,
Carlos

Eduardo Jauch wrote:

I know a workaround... May be useful for you.

Make the button/link that opens the popup invisible (CSS display:none.
And add a new text with a div around it that executes a "$('#" + openpopup.id + "').click();" in the onclick (extended properties) of the div.

This will not be a link, but it will work.

You can also put an expression with a link tag with the code in the onclick, and use a link yourself (but if the page has form I think the outsystems link will be problematic).

Cheers,
Eduardo Jauch

Hi Eduardo,

Can you please send a sample oml for solution you explained it will be helpful for me.

Regards

-SK-


Hi there,


I am faced with a similar issue, I am working on a data entry screen that requires a specific flow in order to match the form that is entered.  I have set the tabindex extended properties, but the tab index "jumps" from one tab to the logout link in the page header and then back to the next field as it should.  Does anyone know of a way to enforce the tabindex in such a way that is behaves, like set up?

Outsystems 

Outsystems does not let you put the tabindex that you want, so... in a similar scenario, what we did was put a specific class to the fields that I want to have a specific sequence, and execute a javascript function that renumbers the tabindex of the elements that have that class.

If your scenario has inputs or elements that "appear" after in ajax calls, you have the event osAjaxBackend.BindAfterAjaxRequest to execute a JS after an ajax refresh.

If your scenario contemplates an order that is not sequential on the screen, the classes that you put can be of the style "myTabClass-1", "myTabClass-2", etc ... take with jQuery all the class elements "myTabClass* " , and then sort it according to the subsequent number


Regards,
Carlos

Carlos Olías wrote:

Outsystems 

Outsystems does not let you put the tabindex that you want, so... in a similar scenario, what we did was put a specific class to the fields that I want to have a specific sequence, and execute a javascript function that renumbers the tabindex of the elements that have that class.

If your scenario has inputs or elements that "appear" after in ajax calls, you have the event osAjaxBackend.BindAfterAjaxRequest to execute a JS after an ajax refresh.

If your scenario contemplates an order that is not sequential on the screen, the classes that you put can be of the style "myTabClass-1", "myTabClass-2", etc ... take with jQuery all the class elements "myTabClass* " , and then sort it according to the subsequent number


Regards,
Carlos

"Outsystems does not let you put the tabindex that you want"

This isn't really the case. You can indeed put a tabindex with extended properties. The system does not remove it or override it. The browser will obey it about as well as a browser will (which is to say, "if it feels like it").

The problem is NOT that it does not "let you put the tabindex that you want".

The problem is that the browser picks a new tab order after an Ajax Refresh.

That said, your approach is the correct one (run some JavaScript to reset tabindex as-needed).

J.Ja