Let's follow up this discussion at the Neptune Community

(this forum will be kept in read-only mode)

Navigation through tab key in tables

I made a table in sap.ui.table.table but when I try to nagivate from field to field using the tab key on my keyboard, it does go through each cell and goes all over the page. 

I have a table with 6 rows 7 columns with input text fields. After filling every field I want to press tab and navigate to other field. How can I achieve that?


Hello Ayush,


The navigation in "sap.ui.table.table" for edit fields involves other keyboard keys to be achieved.

Basically when a cell has the focus (the dots around the cell), you can navigate with the arrow keys and once you have reach your target cell, you press "Enter" to edit it.

Once your input is done, press "Tab" to get the focus back and you can continue to nagivate accross table cells with arrow keys again.


Best regards.



PEB

That helps but like in forms we use tab key to navigate between different fields and I was wondering if that could be achieved in a sap.ui.table.Table too? 

I have a table with input fields and to make it easier for the users I want them to navigate between the fields through tab key. Is that possible? 

I am using neptune-designer version 4,0 .

It's possible Ayush. You can refer to this blog :


http://scn.sap.com/community/developer-center/front-end/blog/2016/02/26/sapui5-table-navigation-with-tab-key with this sample : http://jsbin.com/vivaratoze/1/edit?js,output


In the file attached a function "setupTabHandling" that you can call with your table in parameter. There are some adjustments done as CSS class "sapMInputFocused" has to be replaced by "sapUiTfFoc" and the syntax "oCells[i]._$input" was not correctly interpreted but it should work like for me if all your columns can be edited, otherwise you'll have to do a little adjustment in order to handle it.


Best regards.



PEB

txt
Login or Signup to post a comment