Skip to Content
Author's profile photo Former Member

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 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

Assigned Tags

      14 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Klaus,

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

      1. 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.
      2. 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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Roland Bouman
      Roland Bouman

      Thanks for sharing this! Great help 🙂

      Author's profile photo Former Member
      Former Member

      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 

      Author's profile photo Former Member
      Former Member

      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.

       

      Author's profile photo Former Member
      Former Member

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

      Author's profile photo I. van Rijn
      I. van Rijn

      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

      Author's profile photo Konchada Sai Krishna
      Konchada Sai Krishna

      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.

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

      I couldn't address these completely.

      1. 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

       

       

       

      Author's profile photo Krishna Kishor Kammaje
      Krishna Kishor Kammaje

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

      SAP Note 2387996

      Author's profile photo Marvin Klose
      Marvin Klose

      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.

      Author's profile photo Ho Quoc Vuong
      Ho Quoc Vuong

      Great help Marvin,

      Thank for sharing.

      Author's profile photo Marcel Braaz
      Marcel Braaz

      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

      Author's profile photo sweta agrawal
      sweta agrawal

      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.