0

More

Next Blog

Create Blog

SAP ABAP, WebDynpro

Wednesday, 22 February 2012

Google Search
Search

The ALV application:

Create a web dynpro application with ALV component in it.

Pages
Home Page
Google

Step 1: Open transaction SE80 and from the drop down list select WebDynpro
Component.
Step 2: Enter the application name (Here ZSAM_TEST).

Yahoo
Play Free Games

Followers
Join this site
w ith Google Friend Connect

Members (5)

Already a member? Sign in

Blog Archive
2012 (10)

Sign In

 February (10)
SAP ABAP interview questions and
answers 1. Can w...
SAP ABAP Webdynpro Interview
Questions and Answer...
Using Select-Options in Web Dynpro for
ABAP Creat...
Calling an URL on click of a button (Web
Dynpro f...
OVS help in the WebDynpro application
(WebDynpro ...
The ALV application:Create a web
dynpro applicati...
Building a simple WebDynpro
applicationScenario:...
ABAP INTERNAL TABLE Attributes of
Internal tabl...
ABAP String Manipulation : String
manipulation is...

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

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.

ABAP Data Types Difference between

Type & Like:...

About Me
Sam Siv
Follow

View my complete profile

Step 5: A Web Dynpro component will then be created. A COMPONENT

CONTROLLER, WINDOW and 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, which will show the fields of the table. (Here VBAK).

Now you have created a NODE called NODE_VBAK. This will be used for storing
the values of the input 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 be used to store the records for displaying in the ALV
output.

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

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

Step 12: We have now created a view where we will be displaying the input fields
and which will accept values 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
confirmation message will follow, click yes on the pop up. Now the node
NODE_VBAK is mapped with the INPUT_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 the
ROOTELEMENTCONTAINER 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 look as follows.

<
Step 16: Now create a button. To create it right click on the
ROOTELEMENTCONTAINER and add button as the button name and select
BUTTON from the list as shown below.

Step 17: In the properties of the button type FIND in front of the TEXT property.
This will appear as a caption on the button.
Step 18: You can play around with different elements and their properties here.
After arranging the elements on the screen, the input view will look like this.

Step 19: In the properties on the button, there is a property called EVENTS. There
will be a create button next to it. Click on the create button. The following pop up
will be displayed.

Enter the corresponding details. An action called ACTION_FIND is now created and an
EVENT HANDLER method will also be created automatically to handle this.

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. CODING J
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 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 <CONTEXT> to <NODE_VBAK> via lead selection

node_node_vbak = wd_context->get_child_node( name =
if_input_view=>wdctx_node_vbak ).
* get element via lead selection
elem_node_vbak = node_node_vbak->get_element( ).
* get all declared attributes
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 zstr_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 VBELN ERDAT ERZET ERNAM ANGDT BNDDT AUDAT VBTYP TRVOG
AUART
AUGRU GWLDT SUBMI LIFSK FAKSK NETWR WAERK VKORG VTWEG
SPART
VKGRP VKBUR GSBER GSKST GUEBG GUEEN KNUMV
FROM vbak INTO TABLE lt_vbak WHERE (lt_where).

DATA:
node_node_alv
stru_node_alv

TYPE REF TO if_wd_context_node,

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 =
if_input_view=>wdctx_node_alv ).

* get all declared attributes

node_node_alv->bind_table( lt_vbak ).
ENDMETHOD
Step 30: SAVE the application and activate the Component.

Now run the application. Heres the output J

Posted by Sam Siv at 19:52

Recommend this on Google

Labels: Webdynpro

No comments:
Post a Comment

Enter your comment...

Comment as:

Publish

Google Account

Preview

Links to this post

Create a Link

Newer Post

Home

Older Post

Subscribe to: Post Comments (Atom)

Watermark template. Powered by Blogger.