Creating an ALV List in Web Dynpro Application

This is the simple tutorial to create an ALV in using Abap Webdynpro.

Create a Web Dynpro Application in SE80
Now we have to use a standard ALV component SALV_WD_TABLE , assign a name to the component use like ALV_TABLE.

 

 
Double click on the Component Controller and goto Properties Tab in change mode  select two Components as shown below.

Create Nodes as Shown in Component Controller  CONTEXT tab

 Now in INTERFACECONTROLLER_USAGE click on Controller Usage and drap an drop the Node whose data is to be displayed on ALV list 

 

IN MAIN view Context Drap & Drop Two nodes from component to View as shown   

 
















Design the Layout with following UI Elements
1. ViewContainerUIElement:ALV
2. Button for navigation
also create Inbound & Outbound Plugs in Main View. 

 

 

In the Methods Tab in WDDOINIT method populate the ALV container with data i.e

METHOD wddoinit .
DATA lo_nd_sflight TYPE REF TO if_wd_context_node.
DATA lo_el_sflight TYPE REF TO if_wd_context_element.
DATA ls_sflight TYPE wd_this->elements_sflight.
DATA it_flight TYPE STANDARD TABLE OF sflight.
DATA lo_interfacecontroller TYPE REF TO iwci_salv_wd_table .
DATA lo_value TYPE REF TO cl_salv_wd_config_table.
DATA lo_cmp_usage TYPE REF TO if_wd_component_usage.
* navigate from  to  via lead selection
lo_nd_sflight = wd_context->get_child_node( name = 'SFLIGHT' ).
lo_cmp_usage = wd_this->wd_cpuse_alv_table( ).
IF lo_cmp_usage->has_active_component( ) IS INITIAL.
lo_cmp_usage->create_component( ).
ENDIF.
lo_interfacecontroller = wd_this->wd_cpifc_alv_table( ).
lo_value = lo_interfacecontroller->get_model( ).
CALL METHOD lo_value->if_salv_wd_table_settings~set_selection_mode
EXPORTING
value = cl_wd_table=>e_selection_mode-MULTI_NO_LEAD.
*& Fetch flight details from database table sflight
SELECT * FROM sflight
INTO CORRESPONDING FIELDS
OF TABLE it_flight
UP TO 100 ROWS.
*& Create binding between  and internal table
CALL METHOD lo_nd_sflight->bind_table
EXPORTING
new_items = it_flight.

ENDMETHOD.

Create an action for the Button like GET_FLIGHT_DETAIL  and on this action write the code below to pass the selected data to another View

METHOD onactionget_flight_detail .
DATA lo_nd_sflight TYPE REF TO if_wd_context_node.
DATA lo_el_sflight TYPE REF TO if_wd_context_element.
DATA ls_sflight TYPE wd_this->element_sflight.
DATA lt_sflight TYPE wd_this->elements_sflight.
DATA lt_flight TYPE wdr_context_element_set.
* navigate from  to  via lead selection
lo_nd_sflight = wd_context->get_child_node( name ='SFLIGHT' ).
CALL METHOD lo_nd_sflight->get_selected_elements
RECEIVING
set = lt_flight.
DATA ls_flight TYPE wd_this->elements_sflight.
DATA lw_flight LIKE LINE OF ls_flight .
LOOP AT lt_flight INTO lo_el_sflight.
CLEAR ls_sflight.
* Use the references to get the exact row data
CALL METHOD lo_el_sflight->get_static_attributes
IMPORTING
static_attributes = ls_sflight.
lw_flight-carrid = ls_sflight-carrid.
lw_flight-connid = ls_sflight-connid.
lw_flight-fldate = ls_sflight-fldate.
APPEND lw_flight TO ls_flight.
CLEAR lw_flight.
ENDLOOP.
DATA lo_nd_flight TYPE REF TO if_wd_context_node.
DATA lo_el_flight TYPE REF TO if_wd_context_element.
* navigate from  to  via lead selection
lo_nd_flight = wd_context->get_child_node('FLIGHT' ).
*& Bind the node with internal table
CALL METHOD lo_nd_flight->bind_table( ls_flight ).
wd_this->fire_out_plg(
).
ENDMETHOD.

 

Create another view SBOOK and create the context for it as shown below ...

Design the Layout for the View in Layout Tab with following UI Elements
1.) Table
2.) Button
Do the binding with the NODE and the TABLE
create an inbound & outbound plug for the view  

 In Method *HANDLEIN *read the node FLIGHT and accordingly display the data into the table

METHOD handlein .
DATA lo_nd_flight TYPE REF TO if_wd_context_node.
DATA lo_el_flight TYPE REF TO if_wd_context_element.
DATA ls_flight TYPE wd_this->elements_flight.
DATA fs_flight LIKE LINE OF ls_flight.
DATA it_sbook TYPE TABLE OF sbook.
* navigate from  to  via lead selection
lo_nd_flight = wd_context->get_child_node( 'FLIGHT' ).
CALL METHOD lo_nd_flight->get_attribute
EXPORTING
name = 'CARRID'
IMPORTING
value = fs_flight-carrid.
CALL METHOD lo_nd_flight->get_attribute
EXPORTING
name = 'CONNID'
IMPORTING
value = fs_flight-connid.
CALL METHOD lo_nd_flight->get_attribute
EXPORTING
name = 'FLDATE'
IMPORTING
value = fs_flight-fldate.
SELECT * FROM sbook INTO TABLE it_sbook
WHERE carrid EQ fs_flight-carrid
AND connid EQ fs_flight-connid
AND fldate EQ fs_flight-fldate.
DATA lo_nd_sbook TYPE REF TO if_wd_context_node.
DATA lo_el_sbook TYPE REF TO if_wd_context_element.
DATA ls_sbook TYPE wd_this->element_sbook.
* navigate from  to  via lead selection
lo_nd_sbook = wd_context->get_child_node( name = 'SBOOK' ).
*& Binding  and internal table
lo_nd_sbook->bind_table( it_sbook ).
ENDMETHOD.

 Create an APPLICATION  and save & activate the application and Test it..

 

 Following is the ALV list generated for Main View..