Skip to Content

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

To report this post you need to login first.

7 Comments

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

  1. Björn Gerth

    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

    (0) 
    1. Klaus Kronawetter 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

      (0) 
  2. Matthias Bickel

    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

    (0) 
  3. Darryl Mee

    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 

    (1) 

Leave a Reply