Creating a WebDynpro ALV Application in 30 easy steps



Background:While working on one or other Webdynpro component, we all have come across the implementation of ALV. Interactive ALV is the type of ALV where after giving the input, user is first shown the primary list of ALV. A secondary list will be displayed on the click by user in one of the records of primary ALV. This secondary list will have more elaborated data of the selected record. 

For implementation of ALV in ABAP Webdynpro, we have to create the component usage of one standard Webdynpro component named SALV_WD_TABLE. Further we have to do the external mapping of DATA node of SALV_WD_TABLE to our context node which is going to have the final value for display in ALV. We also have to embed the TABLE view of SALV_WD_TABLE into our ViewContainerUIElement of the respective view of our custom component, where we want to display the ALV.  

While working on one such ALV requirement, I came across one scenario where I need to implement the interactive ALV. As per the requirement both the ALVs must be displayed on the same screen (View).  

The usual approach to achieve this is to create as many separated usage of SALV_WD_TABLE as the number of ALVs you want to implement. In my case I could have to create 2 usages. The other approach is to implement the component usage dynamically. This approach can particularly be proved helpful when at design time you are not sure how many of component usage you need to create.  

So the component usage which we create at design time is called thestatic component usage, while the one created through program s called thedynamically created component usage  

Instead of following the static approach all the way, I created one component usage statically while other one I created through program (dynamic creation of component usage).  

Pre-requisite:Must have worked on normal Webdynpro application. Knowledge on static creation of component usage in own custom Webdynpro component. 

Creation of Static Component Usage:  

1.    Create one Webdynpro component with main view and a window.

2.    Now go to the webdynpro component -> Used component tab and create a static component usage of SALV_WD_TABLE. 

3.    Now go to component controller and create a new controller usage. 

4.    Now in context tab of component controller create 3 new node named sales_doc, sales_header_data, sales_item_data with the below mentioned attribute and properties.

 

 

 

5.    Go to Component Usage sub tree which is coming in left side panel and there click on INTERFACECONTROLLER_USAGE. There do the external binding of Sales_header_data context node to the DATA context node of SALV_WD_TABLE.  

Step 20: Now in the similar way create a view called ‘MAIN’. In this view create two elements of the type ViewContainerUIelement. As shown in the picture below. 

 

Step 21: Click on the ROOTELEMENTCONTAINER of the MAIN view and change the layout property to MATRIX LAYOUT.  

Step 22: Also click on each ViewConatinerUIElement and change the layout to MATRIX HEAD DATA. You will get the layout like this. 

Step 23: Navigate to the CONTEXT tab. And MAP both the nodes created in the component controller. (For mapping refer to Step 12). 

 

Step 24: Save MAIN view and double click on the Component name (ZSAM_TEST). 

Go to Properties tab of the component and declare the ALV component in it as shown below: 

Here ALV_TEST now stands for the ALV component that we are going to use in the application.  

Step 25: Now go to ‘Component usages’ in the left side tree and expand ALV_TEST and double click on the INTERFACECONTROLLER_USAGE.

 

 

 

Step 26: You will see the screen as in the given picture, click on the CONTROLLER USAGE Button.

 

 

Now the component controller will open in the right side panel as shown above. Drag and drop the NODE_ALV into the DATA node of the Interface Controller. This will declare a mapping. Meaning we have just declared which node is going to be displayed in the ALV.

 

Step 27: SAVE everything. Double click the link, WINDOWS > ZSAM_TEST. Drag and drop MAIN view onto the Window. Now click on the arrow next to MAIN, you will see the two View containers, Right click on container 1 (CONT1) and click on EMBED VIEW. Embed the Input View in the first container. Similarly right click on the second container and say Embed View. Press F4 on the ‘View To Be Embedded’ input box and enter the TABLE view of the ALV_TEST component. Refer to the screen shots below.

  

( After F4 )

Step 27: The Window will now look like this.

 

Step 28: Now save everything and right click on the Component (ZSAM_TEST).

Click the link Create > Application. Enter the following details.

 

 

Step 29: Now this is the most important step of all. CODINGJ

For coding, go to the Input View and click on METHODS, which is the last tab.

There you will find a method ONACTIONACTION_FIND already created. This is the event handler method of the action FIND.

  

Double click on the method name; on the editor write the following code:

METHOD onactionaciton_find .

  DATA: node_node_vbak           TYPE REF TO if_wd_context_node,

    elem_node_vbak                      TYPE REF TO if_wd_context_element,

    stru_node_vbak                        TYPE if_input_view=>element_node_vbak .


* navigate from <CONTEXT> to <NODE_VBAK> via lead selection

  node_node_vbak = wd_context->get_child_node( name = 'NODE_VBAK' )." if_input_view=>wdctx_node_vbak ).

* get all declared attributes
  elem_node_vbak = node_node_vbak->get_element( ).
  elem_node_vbak->get_static_attributes(
    IMPORTING
      static_attributes = stru_node_vbak ).

  DATA: ls_where(72) TYPE c,

        lt_where LIKE TABLE OF ls_where,

        lt_vbak TYPE STANDARD TABLE OF vbak.

* create where condition
  IF NOT stru_node_vbak-vbeln EQ ''.
    CONCATENATE 'VBELN = ''' stru_node_vbak-vbeln '''' INTO ls_where.
    APPEND ls_where TO lt_where.
  ENDIF.
  IF NOT stru_node_vbak-erdat EQ '00000000'.
    CONCATENATE 'ERDAT = ''' stru_node_vbak-erdat '''' INTO ls_where.
    IF stru_node_vbak-vbeln NE ''.
      CONCATENATE 'AND' ls_where INTO ls_where SEPARATED BY space.
    ENDIF.
    APPEND ls_where TO lt_where.
  ENDIF.

  SELECT  vbtyp
          vkorg
          vtweg
          vbeln
          erdat
  FROM vbak
  INTO CORRESPONDING FIELDS OF TABLE lt_vbak
  WHERE (lt_where).

  DATA:
    node_node_alv                       TYPE REF TO if_wd_context_node,
    stru_node_alv                       TYPE if_input_view=>element_node_alv .
* navigate from <CONTEXT> to <NODE_ALV> via lead selection
  node_node_alv = wd_context->get_child_node( name = 'NODE_ALV' ) ."if_input_view=>wdctx_node_alv ).
* get all declared attributes
  node_node_alv->bind_table( lt_vbak ).

ENDMETHOD.