Skip to end of metadata
Go to start of metadata

Iterator  - When there is a requirement of displaying extra columns in a tableview or we want to display a dropdownlist or a link or an inputbox we make use of the "iterator". 

Create a page in BSP.

Type Definitions

types: tt_error_data type table of z0bs_err_data.

 Page Attributes


Layout

<htmlb:tableView
                             id            = "tv_idint"
                             table         = "<%=it_error_data%>"
                           visibleRowCount = "100"
                             selectionMode = "LINEEDIT"
                            onRowSelection = "onRowSelection"
                            emptyTableText = "No Data Found"
                             width         = "740"
                             sort          = "SERVER"
                             iterator      = "<%=iterator%>" >

 </htmlb:tableView>

Now we come to our Iterator. HTMLB Iterator is nothing but a class which implements the interface "IF_HTMLB_TABLEVIEW_ITERATOR". For this we will now create a class in transaction SE24. 

Go in the "Implementation->Public Section" and type this code there...public section.

  interfaces IF_HTMLB_TABLEVIEW_ITERATOR .

----Save and Activate.

Now you will have 3 methods:


 Double click IF_HTMLB_TABLEVIEW_ITERATOR~GET_COLMN_DEFINITIONS and write this code for the columns you want to display in your tableview.

---<begin of code>

METHOD if_htmlb_tableview_iterator~get_column_definitions.
  FIELD-SYMBOLS: <def> LIKE LINE OF p_column_definitions.

  APPEND INITIAL LINE TO p_column_definitions ASSIGNING <def>.
  <def>-columnname = 'System_no'.
  <def>-title      = 'System<br>Number'.
  <def>-sort       = 'TRUE'.

  APPEND INITIAL LINE TO p_column_definitions ASSIGNING <def>.
  <def>-columnname = 'CLient'.
  <def>-title      = 'Client'.
  <def>-sort       = 'TRUE'.
  APPEND INITIAL LINE TO p_column_definitions ASSIGNING <def>.
  <def>-columnname = 'i_number'.
  <def>-title      = 'Interface / Idoc<br>Number'.
  <def>-sort       = 'TRUE'.

  APPEND INITIAL LINE TO p_column_definitions ASSIGNING <def>.
  <def>-columnname = 'Sender'.
  <def>-title      = 'Sender'.
  <def>-sort       = 'TRUE'.

  APPEND INITIAL LINE TO p_column_definitions ASSIGNING <def>.
  <def>-columnname = 'Receiver'.
  <def>-title      = 'Receiver'.
  <def>-sort       = 'TRUE'.

  APPEND INITIAL LINE TO p_column_definitions ASSIGNING <def>.
  <def>-columnname = 'Mestyp'.
  <def>-title      = 'Message<br>Type'.
  <def>-sort       = 'TRUE'.

  APPEND INITIAL LINE TO p_column_definitions ASSIGNING <def>.
  <def>-columnname = 'PROCESSED'.
  <def>-title      = 'Status'.
  <def>-edit       = 'X'.

  APPEND INITIAL LINE TO p_column_definitions ASSIGNING <def>.
  <def>-columnname = 'WORK_ORDER_NO'.
  <def>-title      = 'Work<br>Order'.
  <def>-edit       = 'X'.

  APPEND INITIAL LINE TO p_column_definitions ASSIGNING <def>.
  <def>-columnname = 'mail_status'.
  <def>-title      = 'Mail<br>Status'.
  <def>-sort       = 'TRUE'.

  APPEND INITIAL LINE TO p_column_definitions ASSIGNING <def>.
  <def>-columnname = 'Pr_REMARKS'.
  <def>-title      = 'Remarks'.
  <def>-edit       = 'X'.
  <def>-width      = '200'.

  APPEND INITIAL LINE TO p_column_definitions ASSIGNING <def>.
  <def>-columnname = 'popup'.
  <def>-title      = 'PopUp'.
  <def>-edit       = 'X'.
ENDMETHOD.                    "check_download_inputs
 

----<End of code>

----Save and Activate.  

Now next step is to create an attribute which would be a reference to our Z* table.
 

Now we come to the implementation of the second method "IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_ROW_START" Double click this method and write this code.

---<Begin of code>

method IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_ROW_START.
  m_row_ref ?= p_row_data_ref.
endmethod.

---<End of code>

 Now the Implementation of the Third Column "IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_CELL_START". 

METHOD if_htmlb_tableview_iterator~render_cell_start.
  DATA: v_prompt TYPE string.
  CASE p_column_key.

    WHEN 'WORK_ORDER'.
      IF p_edit_mode IS NOT INITIAL.
        DATA: work_order TYPE string.
        work_order = m_row_ref->work_order_no.
        p_replacement_bee = cl_htmlb_inputfield=>factory(
                               id    = p_cell_id
                               value     = work_order
                               cellvalue = 'TRUE' ).
      ENDIF.

    WHEN 'REMARKS'.
      IF p_edit_mode IS NOT INITIAL.
        DATA: remarks TYPE string.
        remarks = m_row_ref->pr_remarks.
        p_replacement_bee = cl_htmlb_inputfield=>factory(
                                  id    = p_cell_id
                                  value     = remarks
                                  cellvalue = 'TRUE' ).
      ENDIF.

    WHEN 'PROCESSED'.
      IF p_edit_mode IS NOT INITIAL.
        p_replacement_bee = cl_htmlb_dropdownlistbox=>factory(
                                id      = p_cell_id
                                selection   = m_row_ref->processed
                                table          = me->m_processed_ref
                                nameofkeycolumn   = 'VALUE'
                                nameofvaluecolumn = 'NAME' ).

      ENDIF.

    WHEN 'POPUP'.
      IF p_edit_mode IS NOT INITIAL.
        p_replacement_bee = cl_htmlb_link=>factory(
                  id        = p_cell_id
                  onclientclick = 'javascript:var pmpt = prompt("Enter the Remarks!");transf(pmpt);'
                  tooltip   = 'For Entering Remarks Click here...'
                  text      = 'Click' ).

      ENDIF.

  ENDCASE.
ENDMETHOD.                    "IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_CELL_START

 

Here in this code you can clearly see that for rendering an inputfield we are using "CL_HTMLB_INPUTFIELD", for dropdownlist we are using "CL_HTMLB_DROPDOWNLISTBOX" and for displaying a link we are using "cl_htmlb_link".

CL_HTMLB_INPUTFIELD and CL_HTMLB_LINK works fine here but for CL_HTMLB_DROPDOWNLISTBOX we require an internal table in which we will insert desired values which will be displayed in the dropdown of this column, for this we create two attributes.


IT_STATUS is the internal table and M_PROCESSED_REF is the attribute we are using above in the code -ME->M_PROCESSED_REF.But the question is where to populate the internal table?We do it using a CLASS_CONSTRUCTOR.

Type the following code in the CONSTRUCTOR.

METHOD class_constructor.

  DATA: wa_status LIKE LINE OF it_status.

  wa_status-name = 'Error'.
  wa_status-value = ' '.
  APPEND wa_status TO it_status.

  wa_status-name = 'Processed'.
  wa_status-value = 'X'.
  APPEND wa_status TO it_status.

  GET REFERENCE OF it_status INTO m_processed_ref.

ENDMETHOD.                    "CLASS_CONSTRUCTOR

 

----Save and Activate.

Now your Iterator class is ready. Come back to the Page you created in which you have used the iterator.

We have to create an object of this class. Type the following code:

onCreate Event

---<Begin of code>

create object iterator type z0bs_cl_iterator.

select * from z0bs_err_data
      into table it_error_data.

---<End of code>

  Final Output:

       
  Now if you want to get these rendered values at runtime,  use this code in "onInputProcessing ()"

OnInputProcessing Event

DATA: tv      TYPE REF TO cl_htmlb_tableview,
      tv_data TYPE REF TO cl_htmlb_event_tableview.

tv ?= cl_htmlb_manager=>get_data( request = request
                                  name    = 'tableView'
                                  id      = 'tv_idint' ).

IF tv IS NOT INITIAL.
  tv_data = tv->data.

  IF tv_data->prevselectedrowindex IS NOT INITIAL.

    value = tv_data->get_cell_id(
                row_index    = tv_data->prevselectedrowindex
                column_index = '7' ).

    DATA: inputfield TYPE REF TO cl_htmlb_inputfield.
    inputfield ?= cl_htmlb_manager=>get_data(
                         request      = request
                         name         = 'inputField'
                         id           = value ).

    wa_err_data-processed = inputfield->value.

    value = tv_data->get_cell_id(
                row_index    = tv_data->prevselectedrowindex
                column_index = '8' ).

    inputfield ?= cl_htmlb_manager=>get_data(
                       request      = request
                       name         = 'inputField'
                       id           = value ).

    wa_err_data-work_order_no = inputfield->value.

    value = tv_data->get_cell_id(
                row_index    = tv_data->prevselectedrowindex
                column_index = '10' ).

    inputfield ?= cl_htmlb_manager=>get_data(
                         request      = request
                         name         = 'inputField'
                         id           = value ).

    wa_err_data-pr_remarks = inputfield->value.

  ENDIF.

ENDIF.
 

1 Comment

  1. Former Member

    Hi ,

    I tried to implement the column SORT functionality in my tableview  but I just see the sort buttons in the tableview when i click on them i am unable to sort the data .Can you please tell me where i went wrong .

    In the layout i have added the sort ="server" in the htmlb:tableview tag and in the method IF_HTMLB_TABLEVIEW_ITERATOR~GET_COLMN_DEFINITIONS wriiten the below code .

    CLEAR p_column_definitions.
    CLEAR p_overwrites.

    LOOP AT it_cols INTO wa_cols .

    FIELD-SYMBOLS: <def> LIKE LINE OF p_column_definitions.
    APPEND INITIAL LINE TO p_column_definitions ASSIGNING <def>.
    <def>-columnname = wa_cols-fieldname.
    <def>-title = wa_cols-reptext.
    <def>-sort = 'TRUE'.
    ENDLOOP.

    Please let me know if anything else needs to be added .