Question Re: sap.m.Table tab navigation in Technology Q&A

sap.m.Table tab navigation

hristina_kacheva — Fri, 20 Jan 2017 11:30:54 GMT

Hi,

I have sap.m.Table created in my application. There are cells, which are sap.m.Input field or sap.m.ComboBox field.

I want to be able to go through the cells using the Tab key, but when I try it I am able to go through the cells in the first row only. Then all other rows are skipped and the cursor goes to the element after the table.

What I have tried until now was:

- to move to next row using arrows keys, but this doesn't work, because if my element is ComboBox it just goes through its elements or if it is Input field of type Number it started to decrease or increase the numbers

- to override the .tabindex property of all cells as they should have this HTML5 property. I thought if I just do "cell.tabindex=someindex" it will work, but nothing was changed

- to get the Dom element of the cell (the input field) and then use the tabindex, but I was not able to get the Dom element. I've tried with .getDomRef() method of the Input field but it returns null.

Could you please tell me how can I go through all sap.m.Table cells using the Tab key. This is really a must for our clients and we have to get it work

Thank you and regards,

Hristina

Re: sap.m.Table tab navigation

former_member227918 — Fri, 20 Jan 2017 15:22:19 GMT

Hi Hristina,

are you looking something like This. have a look at this once, hope that help.

Regards,

Akhielsh

Re: sap.m.Table tab navigation

hristina_kacheva — Tue, 24 Jan 2017 06:27:49 GMT

Hi Akhielsh,

Yes, I need something like that. The problem I have is that $("#" + tableId) does not find the Dom table element and nothing happens.

The table is created in .js view:

var table = new sap.m.Table( "brTable", {
...
});

Then I use table.getId() to get its id:

var tableId = table.getId();

but $("#" + tableId) returns empty array e.g. the Dom table element is not found

Any idea what could be the reason?

Thank you for the help,

Hristina

Re: sap.m.Table tab navigation

former_member227918 — Wed, 01 Feb 2017 08:58:25 GMT

Hi Hristina,

sorry to late reply,

are you getting table id inside rendering function ? if not, you should get table id inside rendering function, check this link.

in fact in your case, you can use table id "brTable" as hard-coded to each function, or you can remove id property from table declaration (that can prevent duplicate id issue further) and in rendering function as this.sId.

Hope this help.

Thanks,

Akhilesh

Re: sap.m.Table tab navigation

hristina_kacheva — Wed, 01 Feb 2017 11:56:13 GMT

Hi,

I am taking the id exactly the way you explained - inside the rendering function and using this.sId or this.getId().

I investigated further and I found out that when the elements are "sections" of "ObjectPageLayout" or children of "sections" the DOM element is not found. I've tried even in the console (not in the code) of the application and the element is not found.

I do not know why this is happening and if the problem occurred only for ObjectPageLayout elements but that is what I noticed in my application

Furthermore even if I manage to set the tab order of a table this means that I have to control the tab index of all elements in the page. In my case I have more than one table and there are other elements before the tables, between them and after the tables. When I change the tabindex of table cells the other elements (outside the tables) stayed with their default tabindex and the tab order of the whole page is not correct. Taking care of the all DOM elements' tabindex manually looks not a good option.

Is there anything, which SAPUI5 offers for such cases?

Best regards,

Hristina