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.
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..
- Employee Number – TAB Here to go to City.
- Employee Number Search help – Icon – Will not be focused when you TAB.
- First Name & Last name – Read-only Input field – Will not be focused when you TAB.
- State – Dropdown list.
- Phone Number – Inputfield – Here is the place where i implemented the Auto-Tab.
- Zip code – Inputfield.
- Delete Record – Checkbox.
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…
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.
- Inputfield – sapUrMapi_InputField_keydown(id,event);
- Checkbox – sapUrMapi_CheckBox_keydown(id,event);
- RadioButton – sapUrMapi_RadioButton_keydown(id,event);
- etc. – To get all the functions please view the source code generated by HTMLB Extensions.
Here is the code i used to achieve Tabbing..
Option 1 – Static Approach: –
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.
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:
Hope it may make our life easier…
Create the Transparent table with following fields:(You can change the fields as per your needs)
Thanks to Payal Sinha to make this blog complete…