SAP ABAP, WebDynpro

Wednesday, 22 February 2012

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).

Search

Google Search

Home Page

Google

Yahoo

Play Free Games

Pages

Join this sitew ith Google Friend Connect

Members (5)

Already a member? Sign in

Followers

▼ 2012 (10)

Blog Archive

0 More Next Blog» Create Blog Sign In

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.

▼ February (10)

SAP ABAP interview questions andanswers 1. Can w...

SAP ABAP Webdynpro InterviewQuestions and Answer...

Using Select-Options in Web Dynpro forABAP Creat...

Calling an URL on click of a button (WebDynpro f...

OVS help in the WebDynpro application(WebDynpro ...

The ALV application:Create a webdynpro applicati...

Building a simple WebDynpro applicationScenario:...

ABAP INTERNAL TABLE Attributes ofInternal tabl...

ABAP String Manipulation : Stringmanipulation is...

ABAP Data Types Difference betweenType & Like:...

Sam Siv

Follow 3

View my complete profile

About Me

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 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 =

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. Here’s the output J

Posted by Sam Siv at 19:52

Labels: Webdynpro

Recommend this on Google

No comments:

Post a Comment

Newer Post Older PostHome

Subscribe to: Post Comments (Atom)

Enter your comment...

Comment as: Google Account

Publish

Preview

Create a Link

Links to this post

Watermark template. Powered by Blogger.