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
discussion, where 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
Hi Klaus,
thanks for your blog, which addresses the same problem I have.
sap.m.Table fortunately takes care of scrolling itself.
You can find an example at Table demo with patched item navigation - JSFiddle.
Regards,
Björn
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
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
Thanks for sharing this! Great help 🙂
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
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.
Hi Darryl, have you find the solution, if so, could you please let us know, since we need solution for such type of scenario
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
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.
I couldn't address these completely.
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
Please note that from SAPUI5 1.44, Tab navigation is supported.
SAP Note 2387996
Above SAPUI5 1.44 you can do the following on the table to have tab navigation as default:
this will do the same change on the table as the F2 hit.
Great help Marvin,
Thank for sharing.
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
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.