Web Dynpro for ABAP

How To Create Web Dynpro Application

Create a Simple Web Dynpro Component

 

Development Objectives

In this step-by-step tutorial we will create a simple Web Dynpro component, which consists of one view.

For the view, you will create a view context, which is linked to a table element on the view layout and which contains the data from table SFLIGHT.

This table will be displayed in the browser at runtime.

Furthermore, you will create a Web Dynpro application for this simple Web Dynpro component, which can be run in the browser.

 

Creating a Web Dynpro Component

 

1. Start ABAP Workbench (SE80) and select Web-Dynpro-Comp./Intf. From the available object list.

 

 

2. To create a new Web Dynpro component, enter the name ZZ_00_SFLIGHT

for the new component in the selection dialog of the object list, and select Display.

 

 

3. In the dialog box that appears, you can enter a description of the new object and select as type Web Dynpro Component. In this dialog you also have the chance to maintain the name of the default window.

 

 

Assign the component ZZ_00_SFLIGHT to package $TMP.

 

As a result, you can now see the newly created Web Dynpro component ZZ_00_SFLIGHT object tree, which contains the objects component controller, component interface (which contains the entries interface controller and interface views) and windows. You can access the objects using double-click.

 

 

 

Creating a new View and Assigning the View to the Window

 

1. Click on the Web Dynpro component ZZ_00_SFLIGHT in the object tree and open the context menu to create a new view.

 

 

2. Create a view MAINVIEW.

 

 

The View Editor will be started on the right side of the Workbench window. In order to open the Layout tab and the View Designer,

a popup appears asking for user and password for

the SAP Web Application Server.

Use the same user/password which you used for logon to the SAP system.

 

3. Save the view MAINVIEW.

 

After saving the view MAINVIEW, it appears in the object tree of the Web Dynpro component under entry Views.

 

4. Now open window ZZ_00_SFLIGHT by clicking on Windows and double-clicking on ZZ_00_SFLIGHT. Switch to change mode.

 

5. Now open the view structure and move the view MAINVIEW inside the window structure on the right hand side by Drag and Drop.

 

Open the window structure on the right hand side and you will see the embedded MAINVIEW.

 

6. Save your changes.

 

 

• < Prev
• Next >