cancel
Showing results for 
Search instead for 
Did you mean: 

How to disable TAB navigation from controls/elements?

Qualiture
Active Contributor
0 Kudos

Hi,

I was wondering, is there a way to disable the TAB navigation from SAPUI5 controls/elements?

I have a sap.ui.commons.ProgressIndicator element of which I would have the tabIndex removed.

In JQuery you would use something like

$("#progressIndicator").attr("tabindex", -1);

but that doesn't seem to work...

Is there a way I can achieve this the SAPUI5-approved way?

Best,

Robin van het Hof

Accepted Solutions (1)

Accepted Solutions (1)

AndreasKunz
Advisor
Advisor
0 Kudos

Hi Robin,

you can do the same thing in SAPUI5, but you have to keep two things in mind:

  • the HTML of UI5 controls is created only when the page hs been loaded, so doing that jQuery call too early (or maybe even directly in the <head>, when the browser has not even parsed and created the <body> yet) will not find any HTML element.
  • SAPUI5 controls can remove and re-create their HTML at any time (triggered by a modification of their state, and usually delayed, to only have ONE re-rendering for multiple modifications)

- so your call needs to be done late enough and also re-done when the ProgressIndicator re-creates its HTML.

To support this, on all controls the "afterRendering" event is fired and you can also get informed about this when adding a delegate to the respective control.

The "addDelegate" API in SAPUI5 1.8.x is a private one (but still works if you want to test), in SAPUI5 1.9+ there will be a public "addEventDelegate" method.

So you can do:

    myProgressIndicator.addDelegate({

        onAfterRendering: function() {

            $("#progressIndicator").attr("tabindex", -1);

        }

    });

- this will be executed whenever the ProgressIndicator HTML has been (re-)created. And make sure to switch to "addEventDelegate" when the next version of SAPUI5 is released.

Note that this feature can also be used to listen to browser events (mouse, keyboard,...) happening on the respective control (by adding methods like "onclick" to the delegate object).

And it can/should be used for other modifications of SAPUI5 control HTML as well.

Regards

Andreas

Qualiture
Active Contributor
0 Kudos

Hi Andreas,

Excellent, this solved my issue!

It appears to be quite a powerful feature as well, awesome!

AndreasKunz
Advisor
Advisor
0 Kudos

Yes...

Just remember that with power and freedom there comes a lot of responsibility to do things right.

Andreas

Answers (1)

Answers (1)

Former Member
0 Kudos

This message was moderated.