An SAP Consultant: Web Dynpro ABAP

To provide the data we want to display in the ALV output, perform the following three steps:

Internal data table - We provide an internal data table.
Context node - We provide a suitable context node and attributes in the context of your application.
Transfer data to the ALV component - We provide this context node for the ALV component.

External Context Mapping

External mapping is a cross-component mapping and can be directly mapping or reversely mapping. We can create an external context mapping if we have firstly declared a usage for the component that holds the respective context and the respective context node has been marked as interface.

Concept of the example program.

->Input - Employee number
->Prepare Address data into itab to be displayed in ALV
->Suitable Context node to be mapped to ALV DATA node.
->Output is through ALV TABLE view.
->We include ALV TABLE view into VIEW_CONTAINER_ELEMENT of our view.

Steps to display data in ALV output

Create Web Dynpro Component and Save as Local Object

Double click on COMPONENTCONTROLLER->Under Used Components tab ->Define Component Use as ALV and Component type SALV_WD_TABLE.

Save and Activate Web Dynpro Component.

Define Component Controller Context ->Two nodes 1). INPUT - PERNR attribute to get input 2). OUTPUT - ADDRESS node with cardinality 0..n to display internal table data in ALV.

Map Component Controller context INPUT node to View Context.

Go to Layout -> Change ROOTUIELEMENTCONTAINER layout type to MatrixLayout.
Place GROUP ui element - Layout type MatrixData ->Create UI element for Input field and bind Context element to input field -> Create Button to search employees address details.

Go to COMPONENTCONTROLLER -> Methods Tab ->Create EMP_ADD_DATA method->Double click on method and generate the code as shown below.

METHOD get_emp_add .
  DATA lo_nd_output TYPE REF TO if_wd_context_node.
  DATA lt_output    TYPE wd_this->elements_output.
  DATA lo_nd_input  TYPE REF TO if_wd_context_node.
  DATA lo_el_input  TYPE REF TO if_wd_context_element.
  DATA ls_input     TYPE wd_this->element_input.

* navigate from <context> to <input> via lead selection
  lo_nd_input = wd_context->get_child_node( name = wd_this->wdctx_input ).

* get element via lead selection
  lo_el_input = lo_nd_input->get_element( ).

* get all declared attributes
  lo_el_input->get_static_attributes(
    IMPORTING
      static_attributes = ls_input ).
  SELECT *
    FROM pa0006
    INTO CORRESPONDING FIELDS OF TABLE lt_output
    WHERE pernr EQ ls_input-pernr.
*   navigate from  to  via lead selection
  lo_nd_output = wd_context->get_child_node( name = wd_this->wdctx_output ).
  lo_nd_output->bind_table( new_items = lt_output set_initial_elements = abap_true ).

ENDMETHOD.

Go to view ->Layout tab-> Double click on button ->Create event GET_EMP_ADDRESS ->Generate the code as shown below.

METHOD onactionget_emp_address .
  DATA lo_componentcontroller TYPE REF TO ig_componentcontroller .

  lo_componentcontroller =   wd_this->get_componentcontroller_ctr( ).
  lo_componentcontroller->get_emp_add( ).

ENDMETHOD.

Go to View -> Layout tab -> Create VIEW_CONTAINER_ELEMENT ui element and set Layout data property to MatrixHeadData -> Save.

Double click on INTERFACECONTROLLER_USAGE and Click on Controller Usage button and follow as shown in the screen.

Map OUTPUT node of COMPONENTCONTROLLER context with ALV Context DATA node. This is called reversal mapping or External mapping .

Go to Window ->Embed the TABLE view of Component SALV_WD_TABLE into VIEW_CONTAINER_ELEMENT. Please follow the print screen steps.

Activate Web Dynpro component.
Create Web Dynpro Application and Save

Run Web Dynpro Application and output as follows.

6 comments:

swamyApril 1, 2012 at 5:52 PM
unable to see the sreen shots,if resolution inscrease it woulb be good
An SAP ConsultantApril 1, 2012 at 6:32 PM
Hi Swamy,
If you are not able to see screen shot, you have to click on screen shot to view in large. Thanks for the cooperation. That is why scrolling message in yellow has been set up.
ChandanMishraDecember 28, 2012 at 4:03 PM
Hi there, I am new to webdynpro. Your sample applications are very much useful to all beginners. I am using the steps you prescribed but I am getting one problem while making this application.
In the method called Get_Emp_Add of componentcontroller, I am using the same code wizard to get the code as you have written. but i am getting different code for that. that is as below:
DATA lo_nd_output TYPE REF TO if_wd_context_node.

DATA lt_output TYPE wd_this->elements_output.

* navigate from to via lead selection
lo_nd_output = wd_context->get_child_node( name = wd_this->wdctx_output ).

* @TODO handle non existant child
* IF lo_nd_output IS INITIAL.
* ENDIF.

lo_nd_output->get_static_attributes_table( IMPORTING table = lt_output ).

I don't know why I am getting this code. I am following your steps.
Please let me know the where I am missing.
Rest is ok with me.
An SAP ConsultantDecember 31, 2012 at 3:11 PM
Hi Mishra,
There u have to use wizard again to read input fields.
You will get the below one.
* get element via lead selection
lo_el_input = lo_nd_input->get_element( ).

->I wrote my own SELECT Query without using wizard.
ChandanMishraJanuary 4, 2013 at 4:03 PM
Hello
Thanks for your reply. I got my query solved with your hints.
Can I have any Interactive ALV demo with 3 views, Like:
give entry from first view
1st ALV listing in 2nd view
while selecting any row with double click 3rd view should appear with detail.
Its urgent please.
ChandanMishraJanuary 8, 2013 at 8:26 PM
Please I am waiting for your reply.......