Skip to Content
Introduction:
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.


image

In below figure, the numbers indicated in arrow is the tabbing order.


image

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.


image


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.

!https://weblogs.sdn.sap.com/weblogs/images/11786/TV_TAB_data.JPG|height=98|alt=image|width=337|src=https://weblogs.sdn.sap.com/weblogs/images/11786/TV_TAB_data.JPG|border=0!

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 `

To report this post you need to login first.

2 Comments

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

Leave a Reply