WebDynPro ABAP A complete Example

with Screenshots
1 Introduction
SAP WebDynPro, a programming model for user interfaces is a platform independent that can
be written in both Java & ABAP. Derived from the MVC (model view controller ) pattern, this
structure is used for user interface applications for graphical modeling of the code generated
from the meta model declarations. In the Java platform, it is developed using the standard UI
design interface NWDS while in ABAP, it uses the ABAP workbench ( SE80 ). It is suited to
design the UIs using the declarative approach for software modularization.

From the technical point of view, SAP ABAP WebDynPro(WD ABAP) is a

revolutionary step in the development of web based use interfaces(UI). According to the
requirements, you can specify what UI you wish to have and where those elements will
fetch the data from. All the code to create the UI elements are automatically generated
within the normal standard runtime framework. Hence you are relieved from the
extensive coding. SAP WD ABAP is the best suited technology for developing ABAP
based applications that can be used on the web. The benefits are manifold. It involves low
cost, high speed and standardized UIs.

2 Dawn of SAP WD ABAP

SAP WD ABAP has been made available since SAP NW 04s. The best part is that it is
integrated into the existing ABAP development environment. You can use the standard
ABAP developer workbench (transaction SE80) to develop and support the WD
applications. The software modularized units are called WD components that are
combined to create a complex application.

3 Meta model declaration vs Custom coding

The WD application uses the meta model declarations approach as opposed to the
common application design strategy.
In WD Java the following model is used.

(Image copied from SAP content)

In WD for ABAP mostly the same structure is used with the generated code & the custom
code processed for load generation to finally render the runnable application.

4 Application scenarios with WD

The WD application can be used to access different kinds of data sources. From an
ABAP workbench, all kinds of re-usable components like function modules, BAPIs &
methods can be directly accessed. This rules out the very possibility of the application
being disrupted abruptly to give an HTTP error when connection from the Java to the
ABAP stack when working with the normal WD for Java scenarios. It is even possible to
access the database using the ABAP SELECT statement (Not recommended).

(Image copied from SAP content)

The Web services can be used using the standard SOAP protocol to business data in the
dynpro page.

The SAP Java connector (JCo) can be used to call methods of an EJB residing on the
SAP J2EE engine.
Model objects are yet NOT supported by SAP WD ABAP. It is recommended to have
reusable entities which will encapsulate the business logic to create the ABAP classes
containing the source code. The development of faceless WD components are also
supported which is later accessed by other WD components.

5 Benefits of WD
The main goal of WD is to provide applications using minimal development efforts
and devoting maximum effort on the design time.
By using a a declarative approach and meta model declarations, the language
independent UIs can be developed with the least effort. Though the provision of hand
written code exists, the structure is designed to manipulate the business data.
WD for ABAP supports Internalization, flicker free screen and a clean separation of UIs
and business logic. It also supports value help, dynamic programming, SAP List Viewer
and seamless integration with the SAP Portal.

6 Developing an application using WD ABAP

Objective: The objective of this application is to get people started with the
development of web based application in the SAP ABAP engine using the SAP
WebDynPro for ABAP programming model.
Structure of the application:
The requirement is to have 2 views, (START and RESULT view). User enters the name in
the first view and clicks on the submit button. The second view recognizes the name and
welcomes the user.
STEPS
Step 1) Open ABAP Workbench (se80), select WebDynPro Comp/Inf, enter a name for
your WD component and press enter.

Step 2) Save the object in a transport package or as a local object.

You should now get the following screen. A component controller, component interface
and window is created by default.

Step 3) Create a WD view START View

Step 4) Create the RESULT View

Save your application.

Step 5) Double click on the Window. Select EDIT mode.

Step 6) Right click on the Window. Select EMBED View

Step 7) Select your view

Step 8) Repeat the same process for RESULT View

Step 9) Activate all objects

Step 9) Goto START View. Select the Layout tab. Right click on
ROOTUIELEMENTCONTAINER.

Step 10) Create an UI element of type TextView. Enter the Text for the element.

Step 11) Repeat step 9 & 10 for creating other UI elements as follows :

Save & Activate

(You might get this error on activation)

( Reason: The error means that whenever u define an UI element u need to do data
binding with the view context which we have not done as of now.
To avoid this error u can remove the inputfield element now and add later. )
Step 12) Now select Result View. Repeat steps 9 & 10 to create the following UI elements

Save
You should get a screen as under for the RESULT View

Step 13) Double click on Component Controller. Goto EDIT mode.

Step 14) Create a NODE

Save.
Step 15) Create an Attribute

SAVE

Step 16) CONTEXT MAPPING

Drag NAME of Component Controller to RESULT view context.

Click on YES.
You should get this screen

Step 17) Do the same for START_VIEW

SAVE
Step 18) Define NAVIGATIONAL Links Inbound & Outbound
From START View Define an Outbound Plug

Step 19) Result View Define Inbound Plug & Outbound Plug

Step 20) Define an Inbound Plug in START VIEW

SAVE
Step 21) DATA BINDING
Open START View

Step 22) Double click on INP_NAME. Goto EDIT mode. Select the context

Step 23) Now select the button element .

Goto EVENTS, OnEnter. Define an action & Outbound Plug

SAVE
Step 24) Select the RESULTS View. Select the input field and bind it to a context as
before.

Step 25) Now define the action for the BACK button.

Attach a Plug to the Action

Step 26) Create Navigation Links

Open Window.

Select the Outbound Plug of the START View. Right click Create Navigational Link

Step 27) Repeat the same process for the Outbound Plug of the RESULT View

SAVE
Step 28) Now create the WD Application

Save.
You should get a screen as under

Double click on the Application Name. You will get the URL.
Activate ALL objects.
To run the application, copy the URL and paste it in the browser.
OUTPUT

START View

Click on SUBMIT button

RESULT View