Former Member

February 26, 2016 Less than a 1 minute read

SAPUI5 Table Navigation with Tab Key

Hi guys,

I guess it’s no secret that the table handling in editable tables is not the best in SAPUI5.

Especially the keyboard navigation is, in my opinion, unnecessarily complicated (press tab to jump out of the input field, navigate with arrow keys to next input field, press tab again to jump into said input field). This was not acceptable for my clients, so I searched for another way.

After struggling for a while I created this discussion, where Sai Vellanki showed me his solution for table tab navigation.

I took his coding and extended it for my needs (sap.m input fields, backward navigation, consideration of read-only columns) and here is the result:

JS Bin – Table Navigation with Tab Key

The navigation with tab and SHIFT+tab works (almost 😉 ) perfectly fine.

It takes a bit of coding, but the function can easily be reused as it is.

What do you think of this solution? Any ideas for improvements?

Cheers,

Klaus

14 Comments

You must be Logged on to comment or reply to a post.

Former Member

April 29, 2016 at 8:11 am

Hi Klaus,

thanks for your blog, which addresses the same problem I have.

Based on your example at JSBin, I have adapted the code for sap.m.Table. You can find it at Table Tabbing Demo with extra Tab Handling - JSFiddle.
sap.m.Table fortunately takes care of scrolling itself.
After more investigation I decided for a solution which enables the up/down arrow keys instead of tab to cycle through the input fields of a table. I admit that only works if those keys are not reserved for some other handling within those input fields, for example text areas.
You can find an example at Table demo with patched item navigation - JSFiddle.

Regards,

Björn

Former Member

Blog Post Author

April 29, 2016 at 8:39 am

Hi Björn,

nice work. The problem I see with your second approach is that you cannot navigate inside the input field with left/right arrow keys. I think this will be an issue for most users.

Maybe we can expand our examples to work with tab key or up/down key for navigation inside the table and left/right key to navigate inside the input field. I will look into it when I find the time 😉

BR,

Klaus

Former Member

November 15, 2016 at 10:33 am

Hi guys,

Thank you for your blog and the development of the demo app. It helped me a lot to implement my own table navigation! I changed two things, which might help others:

1. for what ever reason the "focusin" event on the table to register last used cell didn't work properly in my case. Therefore I used the "keydown" event in the table cell to do the same. For the tab processing itself I used as suggested "keyup" event on the table control.

2. In my table I can also have other "input" controls then the input itself. Therefore I check against the control type instead the object attribute oCells[i]._$input:
var oMetadata = oCells[i].getMetadata();'

switch(oMetadata._sClassName){'
case "sap.m.Input":'
case "sap.m.Switch":'
case "sap.m.Button":'
aInputs.push(i);
break;'
}

Regards,
Matthias

Roland Bouman

December 25, 2016 at 10:56 pm

Thanks for sharing this! Great help 🙂

Former Member

January 16, 2017 at 6:15 am

Thanks for the code. It works perfectly when I am using a normal input field.

I have a table that has normal input fields, datepicker fields and timepicker fields. Unfortunately the command oBody.find('.sapMInputFocused')[0] returns undefined for both the datepicker and timepicker fields. Do you know what command is required to identify the currently focused field when it is a datepicker and timepicker field?

Regards

Darryl

RAMAKRISHNA VADDEPALLY

May 3, 2017 at 6:24 am

Hi Darryl, have you find the solution, if so, could you please let us know, since we need solution for such type of scenario currently.

RAMAKRISHNA VADDEPALLY

May 3, 2017 at 6:23 am

Hi Darryl, have you find the solution, if so, could you please let us know, since we need solution for such type of scenario

I. van Rijn

August 23, 2017 at 7:55 am

Hi Guys,

when you set the 'growing' property of the Table to true, it doesn't work. Is there any way to avoid this?

Kind regards,

IJsbrand

Konchada Sai Krishna

September 12, 2017 at 5:49 am

Hi Guys,

I did took some version of the code not sure is it from Sai or from some other but I extended it to my requirements.

We have a table with mix of elements (Date Picker, Select, checkbox, input etc..) and dynamic editable.
Our requirement is for Tab key with shift for left and right navigation and no need of arrow keys/buttons.
When a user modified a field and then clicked on Tab it should still navigate to the next possible Field.
We might have n Tables in a view and the focusing logic shouldn't get lost.

I couldn't address these completely.

Dropdown field selection from list with arrow keys, this will not work, but with mouse pointer if you select a value cusror/focus stays on the Dropdownfield and then a Tab key would still work.

2) Datepicker, if you change the date with keyboard tab key works, but if you open a date picker and select a date focus is lost and tab doesn't work from there on.

Note: Since on changing a field value in UI5 element entire dom is re rendered, I ended up having a change event handler for every field, note you need to capture Active element & is this a last field flags before model refresh as in "tempChangeEvent" for the code to work.

Below is the plunker link for the code for reference.

https://plnkr.co/A5fV8I

Krishna Kishor Kammaje

October 6, 2017 at 10:26 am

Please note that from SAPUI5 1.44, Tab navigation is supported.

SAP Note 2387996

Marvin Klose

November 14, 2017 at 2:36 pm

Above SAPUI5 1.44 you can do the following on the table to have tab navigation as default:

oTable.setKeyboardMode(sap.m.ListKeyboardMode.Edit);

this will do the same change on the table as the F2 hit.

Quoc Vuong Ho

February 23, 2018 at 3:30 am

Great help Marvin,

Thank for sharing.

Marcel Braaz

November 18, 2019 at 1:12 pm

hi,

yes thx for sharing. Can you explain why I have to hit manually F2 / execute the setkeyboardmode method? What is changing, what are the (side)effects when I'm doing this?

I'm just asking me why this is not implemented es default without pressing any key. thx in advance!

BR Marcel

sweta agrawal

June 13, 2019 at 3:07 am

Hi,

Thanks fo writing this blog !

looking for a similar solution for my sap.ui.table.

in my case, the tab key is working by default, but the issue is, when I press tab key, the next input field's value should be selected by-default, which is not happening so far..

please note, my sap.ui.table contains all the fields which are Input fields and editable.

I copied your solution in my controller, as the selection of values works in your table, but the same is not working for me.

SAPUI5 Table Navigation with Tab Key

Assigned Tags