Accomplishment of Tab and Auto-Tab in BSP: Part-II
This blog will narrate the phenomenon of Tabbing order between HTMLB elements in Tableview.
If you have not read the Part-I of this series blog, I would recommend to read Part-I before continuing Part-II.
Part-II
Tabbing between HTMLB Elements in Tableview.
When we edit the Tableview Rows, if you TAB, the focus goes to cells & then particular HTMLB element inside the cell. Also focus will go to non-editable columns in Tableview, if you have any.
This blog will explain, how to focus the HTMLB Elements (Inputfield, Dropdown list etc) in Tableview & over jump the non-editable fields.
Nutshell: Say when you select the particular Row, to edit in Tableview, HTMLB extension generates unique ID for each editable HTMLB elements.
For example if I select the Row 3, in Tableview TV to edit & assume I have 5 editable columns. Each columns of Row 3 will have the unique ID.
The naming convention as follows:
The ID for Row 3 & Column 1 will TV_3_1 (TableviewID_RowNo_Column_No). There are some exceptions like radiobutton. A radiobutton group may have more than one Radiobutton, so TableviewID_RowNo_Column_No will not generate a unique ID. In this case the ID will be TableviewID_RowNo_Column_No__RadiobuttonID.
Let’s look at the senario, which I took it to explain this..
Here is my Tableview
Note: I used Iterator methodology to create the tableview; it not covered in this blog.
In below figure, the numbers indicated in arrow is the tabbing order.
If the next Row also selected in Tableview, say Row 1 & 2 is selected as shown below, when you tab from last column of Row 1, then control will be passed to 1st column of Row 2.
I will explain this example with Dynamic approach. You can also follow any of options, which I mentioned in Part-I to achieve the same.
Here the Config. Table data maintained for this scenario.
At runtime, * will be replaced with selected Rows by program.
Highlights: When you select the Row in Tableview what happens.
- Capture the selected Rows in OnInputProcesing.
- Read the configuration table, which has the Tabbing order.
- Replace the * from database table with selected Row number.
- Write the JavaScript to get the focus when you TAB.
- Repeat the step 2 to 4 for all selected Rows.
Code to focus HTMLB elements inside Tableview:
<%
Data: it_elements type table of ZTAB,
wa_elements type ZTAB,
v_next type string,
wa_ind_next type string,
js_code type string.
- Get the Tabbing order from DB Table
select * from ztab into table it_elements where
appl_id = ‘ZBSP’.
Loop at selected_ind into wa_ind.
Condense wa_ind no-gaps.
v_next = sy-tabix + 1.
Condense v_next no-gaps.
loop at it_elements into wa_elements where src_field CS ‘TV_’.
Replace all occurrences of ‘*’ in wa_elements with wa_ind.
Concatenate `<script for=”` wa_elements-src_field
`” event=onkeydown type=”text/javascript”>`
into js_code.
Translate js_code to lower case.
%>
<%= js_code. %>
<%
clear js_code.
%>
var keycode;
if (window.event)
{ keycode = window.event.keyCode;}
else if (event)
{ keycode = event.which;}
if (keycode == 9)
{
<%
Concatenate ` document.myform.` wa_elements-trt_field `.focus();`
CL_ABAP_CHAR_UTILITIES=>CR_LF
into js_code.
Translate js_code to lower case.
%>
<%= js_code.%>
event.returnValue=false;
}
</script>
<%
clear js_code.
Endloop.
- Look ahead to Tab from Last cell to Next row 1st Cell if its selected.
read table selected_ind into wa_ind_next index v_next.
IF sy-subrc EQ 0.
Condense wa_ind_next no-gaps.
- Next row selected
Concatenate `<script for=”TV_` wa_ind `_7`
`” event=onkeydown type=”text/javascript”>`
into js_code.
Translate js_code to lower case.
%>
<%= js_code. %>
var keycode;
if (window.event)
{ keycode = window.event.keyCode;}
else if (event)
{ keycode = event.which;}
if (keycode == 9)
{
<%
clear js_code.
Concatenate ` document.myform.TV_` wa_ind_next `_1.focus();`
CL_ABAP_CHAR_UTILITIES=>CR_LF
into js_code.
Translate js_code to lower case.
%>
<%= js_code.%>
event.returnValue=false;
}
</script>
<%
clear js_code.
ENDIF.
Endloop.
%>
</textarea><br><br>
<b> Page attribute:</b><br><br>
!https://weblogs.sdn.sap.com/weblogs/images/11786/TV_tAB_page_attr.JPG|height=80|alt=image|width=351|src=https://weblogs.sdn.sap.com/weblogs/images/11786/TV_tAB_page_attr.JPG|border=0!<br><br>
<b>Oncreate:</b><br><br>
<textarea rows=”3″ cols=”79″>
SELECT * FROM SFLIGHT INTO TABLE IT_EMP.
</textarea><br><br>
<b>OnInputProcess:</b><br><br>
<textarea rows=”10″ cols=”79″>
DATA: TV TYPE REF TO CL_HTMLB_TABLEVIEW,
EVENT TYPE REF TO CL_HTMLB_EVENT,
TABLE_EVENT TYPE REF TO CL_HTMLB_EVENT_TABLEVIEW.
FIELD-SYMBOLS <I> LIKE LINE OF SELECTED_IND.
TV ?= CL_HTMLB_MANAGER=>GET_DATA( REQUEST = REQUEST
NAME = ‘tableView’
ID = ‘tv’ ).
IF TV IS NOT INITIAL.
TABLE_EVENT = TV->DATA.
CLEAR SELECTED_IND.
SELECTED_IND = TABLE_EVENT->PREVSELECTEDROWINDEXTABLE.
IF TABLE_EVENT->EVENT_TYPE EQ CL_HTMLB_EVENT_TABLEVIEW=>CO_ROW_SELECTION.
READ TABLE SELECTED_IND WITH KEY TABLE_LINE = TABLE_EVENT->ROW_INDEX
TRANSPORTING NO FIELDS.
IF SY-SUBRC EQ 0.
DELETE SELECTED_IND INDEX SY-TABIX.
ELSE.
APPEND INITIAL LINE TO SELECTED_IND ASSIGNING <I>.
<I> = TABLE_EVENT->ROW_INDEX.
ENDIF.
ENDIF.
ENDIF.
</textarea><br><br>
<b>Entire Layout:</b><br><br>
<textarea rows=”10″ cols=”79″>
<%@page language=”abap” %>
<%@extension name=”htmlb” prefix=”htmlb” %>
<htmlb:content design=”classicdesign2002design2003″ >
<htmlb:page title=”Test” >
<htmlb:document>
<htmlb:documentHead title=”BSP Extension: HTMLB / Document Structure” >
</htmlb:documentHead>
<htmlb:form id=”myform” >
<%
Data: it_elements type table of ZTAB,
wa_elements type ZTAB,
v_next type string,
wa_ind_next type string,
js_code type string.
- Get the Tabbing order from DB Table
select * from ztab into table it_elements where
appl_id = ‘ZBSP’.
Loop at selected_ind into wa_ind.
Condense wa_ind no-gaps.
v_next = sy-tabix + 1.
Condense v_next no-gaps.
loop at it_elements into wa_elements where src_field CS ‘TV_’.
Replace all occurrences of ‘*’ in wa_elements with wa_ind.
Concatenate `<script for=”` wa_elements-src_field
`” event=onkeydown type=”text/javascript”>`
into js_code.
Translate js_code to lower case.
%>
<%= js_code. %>
<%
clear js_code.
%>
var keycode;
if (window.event)
{ keycode = window.event.keyCode;}
else if (event)
{ keycode = event.which;}
if (keycode == 9)
{
<%
Concatenate ` document.myform.` wa_elements-trt_field `.focus();`
CL_ABAP_CHAR_UTILITIES=>CR_LF
into js_code.
Translate js_code to lower case.
%>
<%= js_code.%>
event.returnValue=false;
}
</script>
<%
clear js_code.
Endloop.
- Look ahead to Tab from Last cell to Next row 1st Cell if its selected.
read table selected_ind into wa_ind_next index v_next.
IF sy-subrc EQ 0.
Condense wa_ind_next no-gaps.
- Next row selected
Concatenate `
The blog is nice, but i need the information about the ZTAB. Please tell the fields and the data to be field in it.
Here is the link..
Accomplishment of Tab and Auto-Tab in BSP: Part-I
Raja T