Navigate across sapui5 table using arrow key

[Former Member]

Hi All,

I have a requirement to navigate across the table input fields using tab navigation and arrow key in SAPUI5.  My table is attached to a scroll bar.

Any pointers towards it will be appreciated.

Thanks and Regards,

Kamalpreet kaur

[former_member189945]

Hi Kamalpreet,

There's already keyboard build in in Table. Once you set focus to the table, you can move around using arrows. You can start editing a cell by pressing enter. Values can be changed, for example, with space or arrows. That depends on the control that is in the cell. Once you've entered edit mode on a cell, you can move to different cell with tab (forward) or shift+tab (backward).

Here's the table in demokit with which you can try it:

SAPUI5 SDK - Demo Kit

Regards,

Kimmo

[Former Member]

Hi kimmo,

Thanks for your response.

Yes, sap ui5 table when we select the whole cell and press tab or navigation key we are able to scroll across the table but here in this scenario, we have text field column .

For example, in a table column first row - the user enters some value and to go to the second row, he simply want to press arrow key or an enter key Like in an excel sheet .

Regards,

Kamalpreet kaur

[former_member189945]

I haven't tested it, but you should be able to add eventListener for keyUp on the table cells (or maybe on the table itself) and if the key pressed is either enter or arrow, set the focus to the next item.

Regards,

Kimmo

[Former Member]

Yes I tried with it, but it is possible only for visible row count. It will fail when we try to scroll the table.

With the following code I can navigate across the tabs but could not scroll

sap.ui.commons.TextField.prototype.onkeyup =
oController.excelNavigation;

excelNavigation : function(keyEvent) {

    switch (keyEvent.keyCode) {

             case 13: // Enter

          
oController.cellMove("down", this.getId());

             break;

  
           case 38: // Up arrow

                  oController.cellMove("up", this.getId());

                   break;

 
            case 40: // Down arrow

                     oController.cellMove("down", this.getId());

               break;

     }

   },

          buildId : function(id, field, row, column){

              var newId = id;

           if (typeof field
!== "undefined") {

              newId = newId.substring(0,
newId.indexOf("field") + 5) + field +

              newId.substring(newId.indexOf("-col"),
newId.length);   // Field

           }

           if (typeof row  
!== "undefined") {

               newId = newId.substring(0,
newId.indexOf("row") + 3) + row; // Row

           }

           if (typeof column !== "undefined") {

               newId = newId.substring(0,
newId.indexOf("-col") + 4) + column +

               newId.substring(newId.indexOf("-row"), newId.length);   // Column

           }

           return newId;

       },

extractRowCount : function(id) {

 
            return parseInt(id.substring(id.indexOf("-row") + 4, id.length),
10);

},

cellMove : function(direction, id,ind) {

       var newRow,newId;

 
           switch (direction) {

    case "up":

            newRow =
oController.extractRowCount(id) - 1;

            newId  = oController.buildId(id, undefined, newRow,            undefined);

            break;

    case "down":

            newRow =
oController.extractRowCount(id) + 1;

            newId  = oController.buildId(id, undefined, newRow,      undefined);

            break;

        default:

            // Something went
wrong

            return;

       }

 
                  try {

                            //Enhance: Scroll table if necessary

  
                        $('#' + newId).focus();

  
                  } catch (ignore) { }

       },

[former_member189945]

Hi Kamalpreet,

You could try use jQuery scrollTop to increment scroll position before moving the focus.

Regards,

Kimmo

[Former Member]

I tried but could not get the result . ScrollTop doesn't seem to work .

[former_member189945]

Hi Kamalpreet,

You should be able to use setFirstVisibleRow method. This is partly how it is done on Table with the default keyboard navigation (there's also some other methods responsible for scrolling at first/last visible row):

/**
 * scrolls down a single row
 * @private
 */
sap.ui.table.Table.prototype._scrollNext = function() {
    // we are at the end => scroll one down if possible
    if (this.getFirstVisibleRow() < this._getRowCount() - this.getVisibleRowCount()) {
        this.setFirstVisibleRow(Math.min(this.getFirstVisibleRow() + 1, this._getRowCount() - this.getVisibleRowCount()));
    }
};

/**
 * scrolls up a single row
 * @private
 */
sap.ui.table.Table.prototype._scrollPrevious = function() {
    // we are at the beginning => scroll one up if possible
    if (this.getFirstVisibleRow() > 0) {
        this.setFirstVisibleRow(Math.max(this.getFirstVisibleRow() - 1, 0));
    }
};

Here's the link for debug js for table: https://openui5.hana.ondemand.com/resources/sap/ui/table/Table-dbg.js

Regards,

Kimmo

[Former Member]

Hi kimmo , I appreciate your effort But the desired result is to navigate across it using tab /arrow keys.I am able to scroll the table but after scrolling the $('#' + newId).focus(); does not work .

Do you have any idea about it.

[former_member189945]

Hi Kamalpreet,

I don't know what's the best way of implementing that but I would recommend extending or duplicating Table and replacing key codes for the default functionality with key codes for your required functionality. There seems to be many "private" methods (_onSelect, _enterActionMode...) that implement the default keyboard navigation. They in turn take dom/jQuery events or jQuery objects as input and I wouldn't recommend constructing those yourself. Also, it may be difficult to duplicate only the needed functionality from those functions without breaking anything else. And those private functions may change in the future version of UI5.

Of course, if you replace the original Table with your own you also may not be able to update a newer version of ui5 easily.

If you still have the option, I would try to reconsider whether modifying the default keyboard functionality of the Table is really needed. One good part of the Fiori/UI5 approach is consistency between different applications. If you modify keyboard navigation in your application it might, now or in the future, be different than in some other applications the users use.

Or maybe someone else can find a better solution to the problem.

Regards,

Kimmo

[former_member189945]

Another option is to use different control. Here's an example for such from :

Regards,

Kimmo

[Former Member]

Hi kimmo, the focus  $('#' + newId).focus(); works well with version .1.16 but not with 1.18 and 1.20 .