WebDynpro ALV Application(Scribd)

7/28/2019 WebDynpro ALV Application(Scribd)

1/13

Page 1 of13

Creating a WebDynpro ALV Application

1.1 Background

The SAP Web Dynpro is based on a model driven framework. It is platform independent and defines a

standard structure for UI of applications. Web Dynpro applications are based on Model View Controller(MVC) design.

1.2 Pre requisites:

To be able to use this document, one has to be familiar with WebDynpro for ABAP and must have createdan ALV application using Web Dynpro.

The ALV application:

Create a web dynpro application with ALV component in it.

Step 1: Open transaction SE80 and from the drop down list select WebDynpro Component.

Step 2: Enter the application name (Here ZSAM_TEST).

Step 3: You will get a pop up as shown above. Click YES.


2/13

Page 2 of13

Step 4: Enter the description on the next pop up as shown in the below screenshot.

Here the Window name can be changed. It is defaulted to the name of the application.

Step 5: A Web Dynpro component will then be created. A COMPONENT CONTROLLER, WINDOWand INTERFACE COMPONENTS will be created automatically.

Step 6: Double click on the Component controller. You will see an empty context.

Right click on the CONTEXT and click on create > node.

Step 7: Enter the details on the pop up as shown below. (Create NODE_VBAK)

Step 8: Click on Add Attribute from structure button. A pop up will be displayed on the screen, whichwill show the fields of the table. (Here VBAK).


3/13

Page 3 of13

Now you have created a NODE called NODE_VBAK. This will be used for storing the values of theinput fields. i.e. the inputs given by the user.

Step 9: Again right click on the context and create another Node called NODE_ALV. This node will beused to store the records for displaying in the ALV output.

Step 10: Again click on Add attributes from structure and select the following fields.


4/13

Page 4 of13

Step 11: Now save the component controller. Right click on the Component name (ZSAM_TEST) andclick on create > View. Enter the following details on the pop up.


5/13

Page 5 of13

Step 12: We have now created a view where we will be displaying the input fields and which will acceptvalues from the user. Now the LAYOUT of the view will be displayed. Navigate to the CONTEXT tab.You will see the following screen

This screen shows different nodes created in the component controller.

Step 13: Drag NODE_VBAK from the right panel to the Context on the left panes. A confirmationmessage will follow, click yes on the pop up. Now the node NODE_VBAK is mapped with theINPUT_VIEW and can be used in it. The context will look as the screen shot above.

Step 14: Navigate to the LAYOUT tab on the input view. Right click on theROOTELEMENTCONTAINER and click on create container form.

Step 15: A pop up will appear with a CONTEXT button, click on it and select NODE_VBAK.

Input fields will be created and corresponding labels will be taken from the DDIC. So the screen will lookas follows.

ZSAM_TEST. Drag and drop MAIN viewonto the Window. Now click on the arrow next to MAIN, you will see the two View containers, Right clickon 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 BeEmbedded input box and enter the TABLE view of the ALV_TEST component. Refer to the screenshots below.

( After F4 )

Step 27: The Window will now look like this.


11/13

Page 11 of13

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. CODING 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 handlermethod of the action FIND.


12/13

Page 12 of13

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

METHOD onactionaction_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 to via lead selectionnode_node_vbak = wd_context->get_child_node( name = if_input_view=>wdctx_node_vbak ).

* get element via lead selectionelem_node_vbak = node_node_vbak->get_element( ).

* get all declared attributeselem_node_vbak->get_static_attributes(IMPORTINGstatic_attributes = stru_node_vbak ).

DATA: ls_where(72) TYPE c,lt_where LIKE TABLE OF ls_where,lt_vbak TYPE STANDARD TABLE OF zstr_vbak.

* create where conditionIF 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 VBELN ERDAT ERZET ERNAM ANGDT BNDDT AUDAT VBTYP TRVOG AUARTAUGRU GWLDT SUBMI LIFSK FAKSK NETWR WAERK VKORG VTWEG SPARTVKGRP VKBUR GSBER GSKST GUEBG GUEEN KNUMV

FROM vbak INTO TABLE lt_vbak WHERE (lt_where).


13/13

Page 13 of13

DATA:node_node_alv TYPE REF TO if_wd_context_node,stru_node_alv TYPE if_input_view=>element_node_alv .

* navigate from to via lead selectionnode_node_alv = wd_context->get_child_node( name = if_input_view=>wdctx_node_alv ).

* get all declared attributesnode_node_alv->bind_table( lt_vbak ).

ENDMETHOD

Step 30: SAVE the application and activate the Component.

Now run the application. Heres the output

Documents

WebDynpro ALV Application(Scribd)