Skip to Content

<body><p> </p><pre>!https://wiki.sdn.sap.com/wiki/download/attachments/42149/sdn_TE08meetclubhouse_v2.jpg|height=80|alt=I|width=235|src=https://wiki.sdn.sap.com/wiki/download/attachments/42149/sdn_TE08meetclubhouse_v2.jpg|border=0!</pre><p>This Blog explains how to show a Hierarchy Report in BSP using HTMLB  Table View and Tableview Iterator.</p><p>I explained with simple example using SFLIGHT as Header and SBOOK as item tables. With the Help of Table view and Tableview Iterator created the ALV hierarchy Report, which is having similar look and feel of ALV hierarchy report.</p><p>Steps to create the Hierarchy Tree</p><p>1. For getting the Hierarchy look and Feel, I created a common structure which can allow SFLIGHT data and SBOOK data.</p><p>Go to SE11 , Create the Type Group with Name ZTREE.</p><p><textarea cols=”73″ rows=”10″>TYPE-POOL ztree .

*-Unique fields for Header and Item

TYPES: BEGIN OF ztree_flight_book,

         carr type sflight-carrid,

         conn type sflight-connid,

         fldt type sflight-fldate,

         carrid(10),

         connid(10),

         fldate(10),

         price(10),

         currency(10),

         planetype(10),

         seatsmax(15),

         seatsocc(10),

         hier(1),         “Hierarchy Indicator

       END OF ztree_flight_book.

TYPES: ztree_t_flight TYPE STANDARD TABLE OF ztree_flight_book .

</textarea></p><p>2. Go to SE80 , and create a BSP application using MVC approach and mark the Appilcation as Stateful.</p><p>3. Uplaod the Images Expand and Collapse and create Mime Objects. </p><p>  !http://img213.imageshack.us/img213/729/98794129vk4.gif|height=20|alt=image|align=middle|width=19|src=http://img213.imageshack.us/img213/729/98794129vk4.gif|border=0! </p><p>  !http://img98.imageshack.us/img98/8994/15666080ly9.gif|height=20|alt=collapse|width=19|src=http://img98.imageshack.us/img98/8994/15666080ly9.gif|border=0!</p><p>4.Create a Controller “main.do”, Now create the Controller class ZLC_HEIR_CONT Redefine the method DO_REQUEST .</p><p>Add the TYPE GRPUP to the controller class.</p><p>Add the Attributes Mentioned in the screen shot for Data population.</p><p>!http://www.freeimagehosting.net/uploads/557d3a88dd.jpg|height=1|alt=Class Attributes|align=baseline|width=1|src=http://www.freeimagehosting.net/uploads/557d3a88dd.jpg|border=0!!http://www.freeimagehosting.net/uploads/557d3a88dd.jpg|height=1|alt=Class Attributes|align=middle|width=1|src=http://www.freeimagehosting.net/uploads/557d3a88dd.jpg|border=0!!http://www.freeimagehosting.net/uploads/557d3a88dd.jpg|height=1|alt=calss attributes|align=middle|width=1|src=http://www.freeimagehosting.net/uploads/557d3a88dd.jpg|border=0!!https://weblogs.sdn.sap.com/weblogs/images/251897213/newpictureql2.png|height=124|alt=Class Attributes|width=629|src=https://weblogs.sdn.sap.com/weblogs/images/251897213/newpictureql2.png|border=0!</p><p>Add the Interface IF_HTMLB_TABLEVIEW_ITERATOR to the controller class</p><p>Add the Following methods in the controller class.</p><p>!https://weblogs.sdn.sap.com/weblogs/images/251897213/newpicture1ft8.png|height=67|alt=Methods|width=450|src=https://weblogs.sdn.sap.com/weblogs/images/251897213/newpicture1ft8.png|border=0!</p><p>GET_FLIGHT_BOOK_DATA will populate the Flight details and Booking details</p><p><textarea cols=”73″ rows=”20″>METHOD get_flight_book_data.

  DATA: wa_flight TYPE sflight.

  DATA: wa_book type sbook.

  DATA: wa_fl TYPE ztree_flight_book.

  SELECT * FROM sflight

   INTO TABLE flight_tab

   UP TO 10 ROWS.

  IF sy-subrc EQ 0.

    SELECT * FROM sbook

     INTO TABLE book_tab

     FOR ALL ENTRIES IN flight_tab

     WHERE carrid EQ flight_tab-carrid AND

           connid EQ flight_tab-connid AND

           fldate EQ flight_tab-fldate.

  ENDIF.

  LOOP AT flight_tab INTO wa_flight.

*- For Unique Keys

    wa_fl-carr = wa_flight-carrid.

    wa_fl-conn = wa_flight-connid.

    wa_fl-fldt = wa_flight-fldate.

*-Display the Header information

    wa_fl-carrid = wa_flight-carrid.

    wa_fl-connid = wa_flight-connid.

    wa_fl-fldate = wa_flight-fldate.

    wa_fl-price  = wa_flight-price.

    wa_fl-currency = wa_flight-currency.

    wa_fl-planetype = wa_flight-planetype.

    wa_fl-seatsmax = wa_flight-seatsmax.

    wa_fl-seatsocc = wa_flight-seatsocc.

    wa_fl-hier  = ‘C’.

    APPEND wa_fl TO it_flight.

    CLEAR wa_fl.

  ENDLOOP.

ENDMETHOD.

</textarea></p><p>EXPAND_COLLAPSE method is used to Collpase or expand the Corresponding Hierarchy Items. This method takes the Importing parameter as ROW number of the Hierarchy node.</p><p>ROW Importing Type I</p><p><textarea cols=”73″ rows=”20″>METHOD expand_collapse.

  DATA: w_flight TYPE ztree_flight_book,

        wa_fl LIKE LINE OF it_flight,

        w_index type sy-tabix,

        wa_book TYPE sbook.

  w_index = row + 1.

  READ TABLE it_flight INTO w_flight INDEX row.

*-Read the record of the selected Node To exapnd or collapse

  IF sy-subrc EQ 0.

    IF w_flight-hier = ‘C’.

      LOOP AT book_tab INTO wa_book WHERE carrid = w_flight-carr AND

                                         connid = w_flight-conn AND

                                         fldate = w_flight-fldt.

        wa_fl-carr = wa_book-carrid.

        wa_fl-conn = wa_book-connid.

        wa_fl-fldt = wa_book-fldate.

        wa_fl-carrid = wa_book-bookid.

        wa_fl-connid = wa_book-customid.

        wa_fl-fldate = wa_book-custtype.

        wa_fl-price  = wa_book-smoker.

        wa_fl-currency = wa_book-class.

        wa_fl-planetype = wa_book-order_date.

        wa_fl-seatsmax = wa_book-passname.

        wa_fl-seatsocc = wa_book-passbirth.

        wa_fl-hier = ‘ ‘.

*-      Collect all the Information

        INSERT wa_fl INTO it_flight INDEX w_index.

      ENDLOOP.

      w_flight-hier = ‘E’.

      MODIFY it_flight FROM w_flight INDEX row TRANSPORTING hier.

    ELSE.

*-    when Action is Collapse Delete the entries from Table

      DELETE it_flight WHERE carr = w_flight-carr AND

                             conn = w_flight-conn AND

                             fldt = w_flight-fldt AND

                             hier = ”.

*-    Modify the Node to Become expandable

      w_flight-hier = ‘C’.

      MODIFY it_flight FROM w_flight INDEX row TRANSPORTING hier.

    ENDIF.

  ENDIF.

ENDMETHOD.

</textarea> </p><p>GET_COLUMN_VALUE is used to get the content of the Table Row data.</p><p>You can get the code of this method and prameters from the standard Iterator class</p><p>CL_HTMLB_CLIENT_ITERATOR<br /><textarea cols=”73″ rows=”10″>METHOD get_column_value .

*-To get the Column values which is used in the Interator

  FIELD-SYMBOLS: <row> TYPE ANY, <col> TYPE ANY, <cur> TYPE ANY.

  ASSIGN row_ref->* TO <row>.

  ASSIGN COMPONENT column_name OF STRUCTURE <row> TO <col>.

  DATA tempchar(240) TYPE c.

  IF currency IS NOT INITIAL.

    ASSIGN COMPONENT currency OF STRUCTURE <row> TO <cur>.

    WRITE <col> CURRENCY <cur> TO tempchar.

    MOVE tempchar TO column_value.

    CONCATENATE column_value ` ` <cur> INTO column_value.

  ELSE.

    WRITE <col> TO tempchar.

    MOVE tempchar TO column_value.

  ENDIF.

  CONDENSE column_value.

ENDMETHOD.

</textarea></p><p> DO_REQUEST method logic. By default Display the Header nodes , IF there is any Table event occur then capture the Record node index , based on the Index Call the method EXPAND_COLLAPSE</p><p><textarea cols=”73″ rows=”10″>METHOD do_request.

  DATA: main TYPE REF TO if_bsp_page.

  DATA:

      lo_tableview TYPE REF TO cl_htmlb_tableview,

      lo_tv_event  TYPE REF TO cl_htmlb_event_tableview.

  DATA: tv_event    TYPE REF TO cl_htmlb_event_tableview.

  DATA: event TYPE REF TO if_htmlb_data.

  DATA: o_event    TYPE REF TO cl_htmlb_event.

  dispatch_input( ).

*-Identify the Selected Node

  CALL METHOD cl_hrrcf_iterator=>get_tv_attr(

                EXPORTING

                  p_tv_id               = ‘flights’

                  p_component_id        = me->component_id

                  po_request            = me->request

                IMPORTING

                  po_tv_event    = tv_event ).

*-Check any Event Triggered or not

  event = cl_htmlb_manager=>get_event_ex( request ).

  o_event = cl_htmlb_manager=>get_event( request ).

  IF o_event IS NOT INITIAL.

    IF  event->event_name = ‘tableView’ AND

        event->event_type = ‘cellClick’ AND

        tv_event->server_event = ‘MycellClick’.

*-    Expand or collapse the nodes

      IF tv_event->row_index NE 0.

        CALL METHOD expand_collapse

          EXPORTING

            row = tv_event->row_index.

      ENDIF.

    ENDIF.

  ELSE.

*-  Populate the Default data

    get_flight_book_data( ).

  ENDIF.

*-Create and Calling the View

  main = me->create_view(

        view_name     = ‘main.htm’

         ).

  me->call_view( view_instance = main   ).

ENDMETHOD.

</textarea></p><p>Important method Which Table View Iterator RENDER_CELL_START, In this method compare the HIER field of the structure and Accordingly the Data will be displayed as Header or Item Details. Based on the Hier field value, Correspoding Image will be displayed using the p_replacement_bee of the Iterator.</p><p><textarea cols=”73″ rows=”10″>METHOD if_htmlb_tableview_iterator~render_cell_start.

  DATA  wa_flight TYPE ztree_flight_book.

  FIELD-SYMBOLS: <fs> TYPE ztree_flight_book.

  DATA: tmp TYPE string,

        tmptext TYPE string.

  DATA cell TYPE REF TO cl_phtmlb_hiercell.

  DATA text TYPE REF TO cl_htmlb_textview.

  DATA:wa_html TYPE REF TO cl_bsp_bee_html.

  CLEAR p_style.

  CLEAR p_class.

  ASSIGN  p_row_data_ref->* TO <fs>.

  CREATE OBJECT cell.

  CREATE OBJECT text.

     text->text = get_column_value( column_name = p_column_key ).

      cell->content = text.

  cell->ispositionedabsolute = ”.

  cell->positiontop = ”.

  cell->positionleft = ”.

  cell->headercellids = ”.

  CLEAR wa_flight.

  READ TABLE it_flight INTO wa_flight INDEX p_row_index.

  CASE p_column_key.

    WHEN ‘CARRID’.

      CREATE OBJECT wa_html.

      IF wa_flight-hier = ‘C’.

        tmptext = wa_flight-carrid.

        wa_html->add( html = `!TopPlus.gif|width=25% |src=TopPlus.gif|mce_src=TopPlus.gif!` ).

        wa_html->add( html =  ` ` ).

        wa_html->add( html = `<font color=”blue”>` ).

        wa_html->add( html =  tmptext  ).

        wa_html->add( html = `</font>` ).

        p_replacement_bee = wa_html.

        p_style = ‘celldesign:GROUP_LEVEL1’.

      ELSEIF wa_flight-hier = ‘E’.

        tmptext = wa_flight-carrid.

       wa_html->add( html = `!TopMinus.gif|width=25% |src=TopMinus.gif|mce_src=TopMinus.gif!` ).

        wa_html->add( html =  ` ` ).

        wa_html->add( html = `<font color=”blue”>` ).

        wa_html->add( html =  tmptext  ).

        wa_html->add( html = `</font>` ).

        p_replacement_bee = wa_html.

        p_style = ‘celldesign:GROUP_LEVEL1’.

      ELSEIF wa_flight-hier = ‘ ‘.

        p_style = ‘celldesign:CRITICALVALUE_LIGHT’.

        cell->level = 2.

        cell->status = ‘LEAF’.

        p_ishiercell = abap_true.

        p_replacement_bee = cell.

      ENDIF.

    WHEN OTHERS.

      IF wa_flight-hier = ‘C’ OR wa_flight-hier = ‘E’ .

        p_style = ‘celldesign:GROUP_LEVEL1’.

      ELSE.

        p_style = ‘celldesign:CRITICALVALUE_LIGHT’.

      ENDIF.

  ENDCASE.

ENDMETHOD.

</textarea></p><p>5. Design the Layout</p><p>Create the View “main.htm”, Now in the attibutes part specify the controller as ZLC_HEIR_CONT which you created in Step 4 , By default it will be CL_BSP_CONTROLLER. Go to Layout and Design the layout to display the Table data using the Tableview Tag of HTMLB.Specify the Iterator as controller.</p><p>Define the Column headings in such a way that it should display the heading in two line , one for heade and one for Item like the display of ALV hierarchy report.</p><p><textarea cols=”73″ rows=”10″><%@page language=”abap” %>

<%@extension name=”htmlb” prefix=”htmlb” %>

<%@extension name=”xhtmlb” prefix=”xhtmlb” %>

<htmlb:content design           = “design2003”

               controlRendering = “SAP”

               themeRoot        = “sap_standard” >

  <htmlb:page title=”Flight Details ” >

    <htmlb:form id     = “myFormId”

                method = “post” >

      <htmlb:gridLayout columnSize  = “1”

                        rowSize     = “1”

                        height      = “82%”

                        cellSpacing = “1”

                        cellPadding = “4” >

        <htmlb:gridLayoutCell columnIndex         = “1”

                              rowIndex            = “1”

                              width               = “100%”

                              style               = “WHITE”

                              horizontalAlignment = “CENTER”

                              verticalAlignment   = “TOP” >

          <xhtmlb:overflowContainer mode   = “SCROLL”

                                    width  = “800px”

                                    height = “100%” >

            <htmlb:tableView id               = “flights”

                             table            = “<%= controller->it_flight %>”

                             headerText       = “Flight Details”

                             headerVisible    = “True”

                             hasLeadSelection = “FALSE”

                             footerVisible    = “FALSE”

                             visibleFirstRow  = “1”

                             onRowSelection   = “onRowSelection”

                             iterator         = “<%= controller %>”

                             selectedRowIndex = “<%= controller->row %>”

                             width            = “100%”

                             design           = “ALTERNATING” >

              <htmlb:tableViewColumn columnName  = “CARRID”

                                     width       = “100%”

                                     onCellClick = “MycellClick”

               title = “<b><font color=’blue’>Airline Code</font><br><font color=’orange’>Booking number</font></b>” >

              </htmlb:tableViewColumn>

              <htmlb:tableViewColumn columnName = “CONNID”

               title = “<b><font color=’blue’>Flight Connection</font><br><font color=’orange’>Customer Number</font></b>” >

              </htmlb:tableViewColumn>

              <htmlb:tableViewColumn columnName = “FLDATE”

               title = “<b><font color=’blue’>Flight date</font><br><font color=’orange’>Customer type</font></b>” >

              </htmlb:tableViewColumn>

              <htmlb:tableViewColumn columnName = “Price”

                                     width      = “100%”

               title = “<b><font color=’blue’>Price</font><br><font color=’orange’>Smoker</font></b>” >

              </htmlb:tableViewColumn>

              <htmlb:tableViewColumn columnName = “CURRENCY”

               title = “<b><font color=’blue’>Currency</font><br><font color=’orange’>Flight Clas</font></b>” >

              </htmlb:tableViewColumn>

              <htmlb:tableViewColumn columnName = “PLANETYPE”

               title = “<b><font color=’blue’>Aircraft Type</font><br><font color=’orange’>Booking Date</font></b>” >

              </htmlb:tableViewColumn>

              <htmlb:tableViewColumn columnName = “SEATSMAX”

               title = “<b><font color=’blue’>Maximun Capacity</font><br><font color=’orange’>Name of the Passenger</font></b>” >

              </htmlb:tableViewColumn>

              <htmlb:tableViewColumn columnName = “SEATSOCC”

               title = “<b><font color=’blue’>Occupied seats</font><br><font color=’orange’>Date of Birth</font></b>” >

              </htmlb:tableViewColumn>

            </htmlb:tableView>

          </xhtmlb:overflowContainer>

        </htmlb:gridLayoutCell>

      </htmlb:gridLayout>

    </htmlb:form>

  </htmlb:page>

</htmlb:content>

</textarea></p><p>6. Now Activate the application and Test the application. Default output will be displayed  with expandable Icon.</p><p> !https://weblogs.sdn.sap.com/weblogs/images/251897213/outputxc6.png|height=400|alt=|width=600|src=https://weblogs.sdn.sap.com/weblogs/images/251897213/outputxc6.png|border=0!</p><p>After the display click on Expand Button of Flight node and you will see the corresponding Booking details as shown below. When you click on the Collapsed icon all the Details will be collapsed and display the similar output as shown above.</p><p>!https://weblogs.sdn.sap.com/weblogs/images/251897213/expandedmw4.png|height=500|alt=Expanded|width=700|src=https://weblogs.sdn.sap.com/weblogs/images/251897213/expandedmw4.png|border=0!</body>

To report this post you need to login first.

8 Comments

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

Leave a Reply