Skip to Content
Introduction:
This blog will narrate the phenomenon of Tabbing order & Auto-Tab.
As we know HTMLB is not supporting to specify the Tab index or Tabbing order as we wanted.(It’s nice to have !https://weblogs.sdn.sap.com/weblogs/images/37298/smile2.JPG|height=22|alt=image|width=23|src=https://weblogs.sdn.sap.com/weblogs/images/37298/smile2.JPG|border=0! )

Most of the time we happen to have lot of icons & read-only inputfield in BSP Application. So when you press TAB, obviously focus will go to read-only fields as well.
If you have BSP application with many fields, it’s hard to move between fields via mouse or multiple Tabbing. Ideally client expects always to tab on editable fields, on press of TAB key.

There are so many ways to achieve this requirement. But each one has it’s pros & cons. I wish to share all my views.
Below explained example is the feasible way to implement the same.

Along with this blog i also emphasized to achieve the Auto-tab.

Tabbing & Auto Tab raised so many times in BSP forum, but it remains unsolved. Even i raised this same question in SDN, 2004.. 🙂

In this series of blog i will explain below items:

  • Tabbing between HTMLB Elements.
  • Auto-Tab between Input fields.
  • Tabbing between HTMLB Elements within Tableview.

I divided this blog into 2 parts.


Part-I


Tabbing between HTMLB Elements & Auto-Tab.

Before we see how we are going achieve, let’s look at what we are going to achieve.

I have following Elements..

    1. Employee Number – TAB Here to go to City.
    2. Employee Number Search help – Icon – Will not be focused when you TAB.
    3. First Name & Last name – Read-only Input field – Will not be focused when you TAB.
    4. City.
    5. State – Dropdown list.
    6. Phone Number – Inputfield – Here is the place where i implemented the Auto-Tab.
    7. Zip code – Inputfield.
    8. Delete Record – Checkbox.


image

!https://weblogs.sdn.sap.com/weblogs/images/11786/Tab2.JPG|height=232|alt=image|width=524|src=https://weblogs.sdn.sap.com/weblogs/images/11786/Tab2.JPG|border=0!

Note: I didn’t take all the HTMLB elements (like Buttons, radiobutton etc) to explain, though the logic will be the same.

Let’s look at how we can achieve this…

I took advantage of onKeyDown event to implement Tabbing among all other JavaScript events.

The reason I took onKeyDown event was, Onblur event will trigger when you TAB as well as when the field looses its focus during onMouseout also, so this may not be the right event which will server our needs.

onKeyup event is not triggering any event on TAB in IE though it does in Mozilla etc. But it supposed to trigger event on any Key press in IE.

Following Javascript functions used to achieve this:

    1. Inputfield – sapUrMapi_InputField_keydown(id,event);
    2. Checkbox – sapUrMapi_CheckBox_keydown(id,event);
    3. RadioButton – sapUrMapi_RadioButton_keydown(id,event);
    4. etc. – To get all the functions please view the source code generated by HTMLB Extensions.


I checked, is there any implementation for above Javascript functions by SAP? luckily nothing. Might be SAP provided for customer use like what i did, i feel 🙂

Here is the code i used to achieve Tabbing..

Note: Inline comments added between Javascript for better understanding.


Option 1 – Static Approach: –


Static approach with use of different Javascript functions for each kind of HTMLB element.


Here i had to use event.returnValue=false; since when i TAB in IE, it always over jumped. It’s so weird. But i could over come.

In case of Tabbing from Dropdown list to other element, i couldn’t find any JavaScript function in HTMLB Extension to implement TAB functionality.
But when i used <htmlb:content design=”design2003″ controlRendering=”SAP” > i could get the sapUrMapi_ComboBox_keydown() function but got a error in browser “Object doesn’t support this property or method” while setting the focus on Dropdown list, So i used different approach. You can follow below process for other HTMLB elements also, if required:

Option 2 – Dynamic Approach:


Dynamic approach with use of different Javascript functions for each kind of HTMLB element.

If we’re developing BSP application with lots of HTMLB elements, certainly we don’t like to write more Javascript code for each elements. Here is my thought to make it dynamic.

Hope it may make our life easier…

Create the Transparent table with following fields:(You can change the fields as per your needs)


image


Thanks to Payal Sinha to make this blog complete…

Accomplishment of Tab and Auto-Tab in BSP: Part-II


To report this post you need to login first.

3 Comments

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

  1. Rajeev Patkie
    Hello

    Good. Actually even I implemented the onKey events to achieve this the only exception is i used plain HTML input fields with the look and feel of HTMLB using style attribute.

    Regards

    Rajeev

    (0) 
      1. kishore kamakoti
        Hi Raja,

        Thanks. Was able to learn something new through your blog…. 🙂

        I have a question, Would we be able to do a select query when we traverse from one field to another( using TAB button ). I was thinking of using SUBMITONENTER property of the input field, but if I can get this done using ONKEYDOWN, it would be great. 🙂

        My Scenario
        Suppose, I have a table with material, material description and quantity in a table view, All three being an input field.

        Say, I enter the material in the first column and hit on tab button, would I be able to get the corresponding material description in the second column.

        Thanks.

        Warm Regards,
        Kishore 🙂

        (0) 

Leave a Reply