Display Hierarchy Report in BSP using TableView an...

former_member188685 · ‎08-04-2008

<body> <pre>!https://wiki.sdn.sap.com/wiki/download/attachments/42149/sdn_TE08meetclubhouse_v2.jpg|height=80|alt=...!</pre>This Blog explains how to show a Hierarchy Report in BSP using HTMLB Table View and Tableview Iterator.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.Steps to create the Hierarchy Tree1. For getting the Hierarchy look and Feel, I created a common structure which can allow SFLIGHT data and SBOOK data.Go to SE11 , Create the Type Group with Name ZTREE.<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>2. Go to SE80 , and create a BSP application using MVC approach and mark the Appilcation as Stateful.3. Uplaod the Images Expand and Collapse and create Mime Objects. !http://img213.imageshack.us/img213/729/98794129vk4.gif|height=20|alt=image|align=middle|width=19|src...! !http://img98.imageshack.us/img98/8994/15666080ly9.gif|height=20|alt=collapse|width=19|src=http://img...!4.Create a Controller "main.do", Now create the Controller class ZLC_HEIR_CONT Redefine the method DO_REQUEST .Add the TYPE GRPUP to the controller class.Add the Attributes Mentioned in the screen shot for Data population.!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/upl... Attributes|align=middle|width=1|src=http://www.freeimagehosting.net/uploads/557d3a88dd.jpg|border=0!!http://www.freeimagehosting.net/upl... attributes|align=middle|width=1|src=http://www.freeimagehosting.net/uploads/557d3a88dd.jpg|border=0!!https://weblogs.sdn.sap.com/weblogs... Attributes|width=629|src=https://weblogs.sdn.sap.com/weblogs/images/251897213/newpictureql2.png|border=0!Add the Interface IF_HTMLB_TABLEVIEW_ITERATOR to the controller classAdd the Following methods in the controller class.!https://weblogs.sdn.sap.com/weblogs/images/251897213/newpicture1ft8.png|height=67|alt=Methods|width=...!GET_FLIGHT_BOOK_DATA will populate the Flight details and Booking details<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>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.ROW Importing Type I<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.

ENDMETHOD.

</textarea> GET_COLUMN_VALUE is used to get the content of the Table Row data.You can get the code of this method and prameters from the standard Iterator classCL_HTMLB_CLIENT_ITERATOR <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> 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<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.

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>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.<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 = `` ).

wa_html->add( html = tmptext ).

wa_html->add( html = `` ).

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 = `` ).

wa_html->add( html = tmptext ).

wa_html->add( html = `` ).

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>5. Design the LayoutCreate 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.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.<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 = "Airline Code Booking number" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "CONNID"

title = "Flight Connection Customer Number" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "FLDATE"

title = "Flight date Customer type" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "Price"

width = "100%"

title = "Price Smoker" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "CURRENCY"

title = "Currency Flight Clas" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "PLANETYPE"

title = "Aircraft Type Booking Date" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "SEATSMAX"

title = "Maximun Capacity Name of the Passenger" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "SEATSOCC"

title = "Occupied seats Date of Birth" >

</htmlb:tableViewColumn>

</htmlb:tableView>

</xhtmlb:overflowContainer>

</htmlb:gridLayoutCell>

</htmlb:gridLayout>

</htmlb:form>

</htmlb:page>

</htmlb:content>

</textarea>6. Now Activate the application and Test the application. Default output will be displayed with expandable Icon. !https://weblogs.sdn.sap.com/weblogs/images/251897213/outputxc6.png|height=400|alt=|width=600|src=htt...!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.!https://weblogs.sdn.sap.com/weblogs/images/251897213/expandedmw4.png|height=500|alt=Expanded|width=7...!</body>

Display Hierarchy Report in BSP using TableView and Tableview Iterator

Are you there, SAP? It's me, Jelena

Integration Point of MM-FI-SD in SAP ERP

SAP Project System - A ready Reference ( Part 1 )