Introduction to web dynpro for ABAP, introduction to SAP web technologies

Web Dynpro is a new SAP programming model to develop SAP web based applications.

Web dynpro is delivered in 2 languages.

Web Dynpro ABAP and Web Dynpro Java.

Web Dynpro ABAP is released from SAP ECC 6.0.

Basic differances between web dynpro ABAP and web dynpro Java

Web Dynpro ABAP

Web Dynpro JAVA

Uses ABAP as programming language.

Uses JAVA as a programming language

Uses ABAP stack for executing web dynpro

ABAP objects.

Uses JAVA stack for executing web dynpro JAVA

objects.

Uses ABAP workbench (SE80) for designing Uses NWDS (Net-weaver Developer Studio) for
web dynpro ABAP applications.
designing web dynpro JAVA applications.
Supports ALV, select-options etc

Dosen`t support ALV, select-options.

Not highly developed language.

It is a Highly developed language.

What is SAP Enterprise Portal ? Advantages of SAP Enterprise Search

+Enterprise Portal (EP) is a portal software developed by SAP AG.

Portal
Portal is a container of developed internet applications which connects to various heterogeneous servers for
execution .
The best example for portal is www.yahoo.com ,yahoo.com is web portal contains different internet application
like Yahoo News, Yahoo Sports, Yahoo Finance etc, all these applications are individually developed and
integrated into one portal (yahoo.com).

Web Dynpro applications in Portal

In SAP the web dynpro applications will be developed individually by web dynpro ABAP consultants.

Once the web dynpro application is developed and tested, the application will be integrated into portal
where end users uses these applications.

SAP Enterprise Portal

There are different portal software's available in market ex: web sphere portal, SAP also released it`s own portal
software called Enterprise Portal for integrating SAP applications .
The main advantage of SAP Enterprise Portal is Single Sign On (SSO), SSO is a concept of connecting and
accessing different heterogeneous servers with single username and password.
In Enterprise Portal we integrate different SAP business applications like SD Applications, HR applications, BI
applications(Reports), CRM applications etc which are connected to different servers (SD--R/3 Server, HR--R/3
Server, BI--BI Server, CRM--CRM server etc), by using SSO we can connect to all these applications with single
user name .

Roles and responsibilities of Web Dynpro ABAP consultants and Web dynpro java
consultants
+Web Dynpro is delivered in two programming languages, web dynpro ABAP and web dynpro JAVA.
The below are roles and responsibilities of Web dynpro ABAP and web dynpro JAVA Consultants .

Web Dynpro ABAP Consultants

Web Dynpro JAVA Consultants

Web Dynpro ABAP consultants are responsible for

developing web dynpro applicatins using SAP
ABAP programming language.

Web Dynpro JAVA consultants are

responsible for developing web dynpro
applications using JAVA language .

Need to develop both front end (screens) and back

end logic.

Need to develop front end (screens) only,

back end logic will be developed by ABAP
consultants in the form of BAPI, RFC etc

Web Dynpro ABAP consultants are not responsible

for integrating web dynpro applications into portal
( some times may need to integrate based on
project).

Web Dynpro JAVA consultants are

responsible for integrating web dynpro
applications to portal.

What is MVC architecture in web dynpro ABAP ? Model View Controller in Web Dynpro
ABAP
+Web Dynpro is based on MVC (Model-View-Controller) architecture.

Item

Description

Model

Objects which can communicate with database.

View

Screen/View/page

Controller

Controller is an interface between View and Model.

Model

Models are objects which contains business logic statements to read or write data into database.The models can
be developed in the form of Function Modules, BAPI`s, Classes etc.

View
View is a screen displayed in browser.

Controller
Controller is an interface between model and the view, it is responsible for taking the input from screen and it
submits to the model, the model will communicate with the database and gives back the result to controller, which
intern submits the result to the screen.

Different types of controllers used in web dynpro for ABAP programming as a part of MVC
architecture
+-

What is a controller ?
Controller is an interface between model and view ( part of MVC architecture), controller is responsible for
communicating view and model.
There are five types of controllers in web dynpro for ABAP.

1. View Controller
A view is nothing but a screen that contain different screen elements like input, table etc
A controller which is responsible for view related logic or programming is called as view controller, a web dynpro
component can have multiple views, each view has it`s own controller.

2. Window controller

A window is a container of views, in web dynpro all views must be inserted into a window to display.
Window controller is a controller which is responsible for window related programming.A web dynpro component
can have multiple windows, each window has it`s own controller.

3.Component Controller
This is a global controller for a web dynpro component, the methods, attributes etc declared in component
controller can be used by all controllers in a component.

4.Interface Controller
Interface controller is a controller which is responsible for communication between two or more web dynpro
components .

5.Custom Controller
This ia an optional controller and this is used to reduce the burden on component controller to improve the
performance.
Custom controllers be also used as a configuration controller and will be used for personalization.

what is a context ?, what is a node ? in web dynpro for ABAP

+-

Context
Context is a temporary place where we declare data deceleration's in the form of nodes and attributes.

Attribute
It is used to store a single value, these are similar to fields in table or structure.
Ex: MATNR, MTART, VBELN

Node
Node is a collection of attributes, it is similar to structure or internal table.

Properties of node
Cardinality
It specifies how many records that can be stored in a node, four options are available under cardinality.

Minim
um

Maxim
um

Node can store only one record i:e same as work area.
Node can only be filled through back end logic only ( can not be
used for user input ).

Node can store only one record I:e same as work area
Node can be used for user input .

Node can store maximum 'n' number of records.

Node can only be filled through back end logic only ( can not be
used for user input )

Node can store 'N' number of records I:e same as internal table
Node can be used for user input .

Description

If maximum value = 1, it can store 1 record.

If maximum value = n, it can store 'N' records.
If minimum value = 0, data is selected from back end (using select, itab etc).
If minimum value = 1, data can be selected from front end (user input).

Understanding for Basic Users

For basic understanding, here I am comparing web dynpro with ABAP.

In ABAP we declare internal table like below.
DATA : IT_MARA TYPE TABLE OF MARA.

In web dynpro we create a node for mara with cardinality 0-n or 1-n, both can store 'n' number of records(Internal
table can store n records).In future lesson we will learn when to take 0-n and 1-n cardinality for creating a node.
In ABAP we declare work area like below.
DATA : wa_MARA TYPE MARA.

In web dynpro we create a node for mara with cardinality 0-1 or 1-1, both can store one record only(work area
can store only one record).In future lessons we will learn when to take 0-1 and 1-1 cardinality .

Creating a node in webdynpro for ABAP, nodes and attributes in web dynpro for ABAP
programming.
+Node : Node is nothing but a collection of attributes, node can be used as internal table or work area based on
the selected cardinality .
Nodes can be created in view controller, component controller and window controller .

Follow the below steps to create a node in web dynpro ABAP.

Go to SE80, select Web Dynpro Comp./Intf. from drop down, provide a web dynpro component name and press
enter.

A pop up will open, click on create

Provide description, enter.

Save it in a local object, expand views and double click on main view.

Click on change icon to go to change mode.

Select Context tab, right click on context, create, node.

A pop up will open provide node name, select cardinality, enter.

Now node is created with mara structure( work area for MARA table because cardinality is 1-1, it can store only
one record).
We will discuss more details in future lessons.

Creating UI elements in webdynpro for ABAP, UI element properties in SAP web dynpro
+UI Element : UI elements are screen elements which are used to design screen in web dynpro ABAP, each UI
element has some specific properties .Properties of UI elements:There are three kinds of properties for UI
elements.
1.

Mandatory.

2.

Can be bindable.

3.

Not bindable.

We will discuss about all properties of UI elements in future lessons, in this lesson we will be learning how to
create UI elements.

Follow the below steps to create a UI element in web dynpro ABAP.

Go to SE80, select Web Dynpro Comp./Intf. from drop down, provide a web dynpro component name and press
enter.

A pop up will open, click on create.

Provide description, enter.

Save it in a local object, expand views and double click on main view.

Click on change icon to go to change mode.

Select Layout, right click on ROOTUIELEMENTCONTAINER, Insert Element.

A popup will open, provide ID, select type from drop down, enter.

Now the UI element is inserted, we will learn designing layout with UI elements in next lessons.

Data binding in web dynpro for ABAP, binding UI elements to nodes and attributes
+

Binding the UI element data { ex: Input field, check box, table etc } to corresponding node or attribute is
called data binding.

The data is automatically transported from a view controller context to a UI element

.By using the data binding concept we can control multiple properties of a UI element like visibility,
enable/disable etc.

The UI element properties can be manipulated through context by using data binding.

Why we need data binding ?

We all know that all the UI elements are just user interfaces, they can not store any data, the best example is
explained below.
The simple example for data binding is check box, when ever the check box is checked/unchecked from user
interface, we need to access the value of check box whether it is selected or not, this can be accessed by using
data binding .
Ex: I have created a check box UI element in view and I have binded the check box to a context attribute the
check box value can be retrieved through context attribute, if the check box is selected X will be stored in context
attribute, if check box is deselected space will be stored in context.

Creating first webdynpro ABAP

component
Web dynpro component : It is a central control of a application, it has views, windows, controllers.
Web dynpro application : It is a URL which is associated to a web dynpro component, through which we can test
a web dynpro component.
Creating hello world application in Web Dynpro ABAP.
Go to SE80, select web dynpro component/ intf from drop down, provide componenet name as
ZSAPN_HELLO_WORLD, press enter a pop up will open click yes.

Provide description and enter.

Save it in a local object, save the component (Ctrl S).

Go to main view, layout, rootuielementcontainer, insert element, provide id, select page header from drop down
and press enter.

Select PageHeader, and provide title in the properties area and enter.

Save (Ctrl S), double click on component name (ZSAPN_HELLO_WORLD), right click and aativate.

A pop up will open just press enter.

Now the hello world component is created, we have to execute and test this component, to test a web dynpro
component we need a application...So we have to create an application for this
Again right click on component, create, Web Dynpro application.

Provide application name, description, enter and Save (Ctrl S).

Application is created, right click on application name (not component name) and test.

The out put will open in a browser...

Working with UI elements in webdynpro ABAP

Simple Web Dynpro component to display customer details based on a customer number
+Requirement: Develop a web dynpro component to display customer basic details for a customer number input.
Understand and follow below diagram.

Step1: Go to transaction SE80, select web dynpro component from drop down, provide name as
ZSAPN_CUSTOMER_DETAILS, enter, click yes, provide description, enter and save it in a local object.
Step2: Go to main view, go to context, right click on context -> Create -> node, provide name as KNA1, provide
dictionary structure as KNA1, cardinality 1-1, selection 0-1 and click on add attributes from structure.
Step3: A popup will come, select KUNNR, NAME1, ORT01 and LAND1 and press enter.
Step4: Select node and remove dictionary structure under node properties.
Step5: Go to layout tab, right click on rootuielementcontainer, create container from, click on context and select
KNA1, enter.
Step6: Again right click on rootuielementcontainer -> insert element , provide id as BTN_GET and type as
BUTTON, press enter.
Step7: Provide button text as get customer and create an action method on_get.
Step8:Go to actions tab, double click on on_get.
1. Read node static attributes using code wizard.
2.Get data from KNA1 and set data to node using set_static_attributes method.
Step8:Save and activate the component.
Step9:Test the application.
Provide a customer number(get from KNA1 table) and clcik on get customer, it will fill all fields.

Working with table UI element in SAP web dynpro ABAP programming, table UI element
properties
+Requirement : Develop a web dynpro component to display list of vendors .
UI elements to be used in this requirement are INPUT FIELD,LABEL, BUTTON and TABLE .

Step1 : Create context for storing table data.

Step2: Insert TABLE UI element .
Step3: Create data binding for table.
Step4: Add logic to get data.
Step1: Go to Context and Create a node.Go to SE80, create a web dynpro component ZSAPN_TABLE, save it in
a local object.

Go to context of main view, click on change mode, right click on context -> create -> node.

A popup will open, provide node name as LFA1, data dictionary structure as LFA1, click on add attributes from
structure button.

Select required attributes, enter.

Step2: Go to layout and insert table UI element.Go to view layout, right click on ROOTUIELEMENTCONTAINER,
insert element, provide a id and select table, enter.

Step3:Create data binding for table.Right click on table, click on create binding, click on context.

Select LFA1.

Step4: Add logic to get data.Go to METHODS tab, double click on WDDOINIT add below code.
DATA LO_ND_LFA1 TYPE REF TO IF_WD_CONTEXT_NODE.

DATA LT_LFA1 TYPE WD_THIS->ELEMENTS_LFA1.

* navigate from <context> to <lfa1> via lead selection

LO_ND_LFA1 = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_LFA1 ).

* @TODO handle non existant child

* IF lo_nd_lfa1 IS INITIAL.
* ENDIF.

* * @TODO compute values

* * e.g. call a model function
*
SELECT LIFNR NAME1 LAND1 ORT01 FROM LFA1 INTO TABLE LT_LFA1 UP TO 50 ROWS.
LO_ND_LFA1->BIND_TABLE( NEW_ITEMS = LT_LFA1 SET_INITIAL_ELEMENTS = ABAP_TRUE ).

Step5: Right click on component, create application and test.

working with check box UI element in web dynpro for ABAP, web dynpro ABAP check box UI
element
+Create and design component as per below diagram.

Step1: Go to SE80, create a web dynpro component ZSAN_CHECKBOX, save it in a local object.
Step2: Double click on main view, click on change, go to context, create a node CHK with (1 1) cardinality and create two attributes as below.
CHK -> TYPE -> CHAR1.
SELECTED -> TYPE -> CHAR30.
Step3: Go to layout, right click on ROOTUIELEMENTCONTAINER, insert element id : CHK, type : Checkbox,
enter, create binding for the property VALUE to CHK of node CHK, create an action method
ON_CHK_SEL for ON_TOGGLE of CHK. Similarly insert another UI element
id: TEXT, type: TextView, enter, create data binding for the property text to SELECTED of node
CHK.
Step4: Go methods, double click on WDDOINIT, and add below logic.
Step5: Save and activate whole component, create application and test.

Working with radio button group in web dynpro for ABAP, using radio button group UI
element
+As a part of real-time projects, we don`t use individual radio buttons, instead we use radio button group UI
element, Radio Button Group Ui element is a UI element which created multiple radio buttons in the form of a
group.
SAP has provided two options for this radio buttons groups in web dynpro ABAP, based on the requirement we
can choose suitable one.

Radio Button Group by Key:

This is used when ever we have fixed values for a domain ex: Gender (go to SE11, select domain,
provide GENDER, display to check fixed values).

The number of radio buttons created will be determined statically ex:Gender.

Radio Button Group by index:

This is used when ever we have dynamic number of radio buttons with dynamic values.

The number of radio buttons are determined dynamically ex: radio buttons for material type (we will
discuss in next lessons)

Working with radio button group by key UI element in SAP web dynpro ABAP

+-

Radio Button Group by Key: When ever we have fixed values for a domain, we will use this UI element to
display them in the form of radio button group.

In the below example we are going to display GENDER, in the form of radio button by using radio button
by key UI element.I recommend you to check GENDER domain in SE11 and understand fixed values.

Step1: Go to SE80, create a web dynpro component ZSAPN_RB_GROUP.

Step2:Create View Context.

Go to main view, go to context, right click and create a node.

Provide node name RBG, enter

Right click on node RBG, create attribute.

Provide name as GENDER, type as GENDER and enter.

Step3: Insert Radio Button Group in Layout.

Go to layout, right click on ROOTUIELEMENTCONTAINER, create element, name as RBG, type as

RadioButtonGroupByKey.

Step4: Create binding for radio button group.

Select RBG UI element, click on the yellow icon under properties, select GENDER attribute.

Now you can see 5 radio buttons in a group.

Step5: Go to Context and create one more attribute.

Go to view context, create one more attribute with name text, type char30.

Go to layout, create one more UI element TextView UI element, bind text property to TEXT attribute.

Step6:Create action method for Radio Button Group, on select property.

Step7:Go to methods, add logic.

Go to methods tab, double click on method ONACTIONON_SELECT, add below logic.

Use Code Wizard to read node and set text attribute.

DATA LO_ND_RBG TYPE REF TO IF_WD_CONTEXT_NODE.

DATA LO_EL_RBG TYPE REF TO IF_WD_CONTEXT_ELEMENT.

DATA LS_RBG TYPE WD_THIS->ELEMENT_RBG.

* navigate from to via lead selection

LO_ND_RBG = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_RBG ).

* @TODO handle non existant child

* IF lo_nd_rbg IS INITIAL.

* ENDIF.

* get element via lead selection

LO_EL_RBG = LO_ND_RBG->GET_ELEMENT( ).
* @TODO handle not set lead selection

IF LO_EL_RBG IS INITIAL.

ENDIF.

* get all declared attributes

LO_EL_RBG->GET_STATIC_ATTRIBUTES(

IMPORTING

STATIC_ATTRIBUTES = LS_RBG ).

DATA LO_EL_CONTEXT TYPE REF TO IF_WD_CONTEXT_ELEMENT.

DATA LS_CONTEXT TYPE WD_THIS->ELEMENT_CONTEXT.

DATA LV_TEXT TYPE WD_THIS->ELEMENT_CONTEXT-TEXT.

get element via lead selection

LO_EL_CONTEXT = WD_CONTEXT->GET_ELEMENT( ).

@TODO handle not set lead selection

IF LO_EL_CONTEXT IS INITIAL.

ENDIF.

@TODO fill attribute

lv_text = 1.

IF LS_RBG-GENDER = 'F'.

LV_TEXT = 'Female Selected'.

ELSEIF LS_RBG-GENDER = 'M'.

LV_TEXT = 'Male Selected'.

ELSEIF LS_RBG-GENDER = 'N'.

LV_TEXT = 'Neutrel Selected'.

ENDIF.

set single attribute

LO_EL_CONTEXT->SET_ATTRIBUTE(
NAME = `TEXT`

VALUE = LV_TEXT ).

Activate the component, create application and test.

Working with radio button by index in web dynpro ABAP

+-

RadioButtonByIndex: It is a Ui element, which creates radio button group with dynamic number of radio
buttons.

Step1: Go to SE80, create a web dynpro component ZSAPN_RBG_INDEX.

Step2: Create context.

Go to main view, go to context , create a node RBG_INDEX with cardinality (0 - n), create two attributes
MTART ->TYPE-> MARA-MATRT, TEXT -> TYPE -> CHAR30.

Step3:Design Layout.

Go to layout, create RadioButtonGroupByIndex UI element, bing text property to attribute MTART of

node RBG_INDEX, create action method for ON_SELECT .

Create another UI element TextView, bind text property to attribute SELECTED of node RBG_INDEX.

Step4: Go to action method and add below code.

DATA LO_ND_RBG_INDEX TYPE REF TO IF_WD_CONTEXT_NODE.

DATA LT_RBG_INDEX TYPE WD_THIS->ELEMENTS_RBG_INDEX. "internal table

DATA LS_RBG_INDEX TYPE wd_this->ELEMENT_RBG_INDEX. "work area

* navigate from <context> to <rbg_index> via lead selection

LO_ND_RBG_INDEX = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_RBG_INDEX ).

* @TODO handle non existant child

* IF lo_nd_RBG_INDEX IS INITIAL.

* ENDIF.

**add radio buttons

LS_RBG_INDEX-TEXT = 'Radio 1'.

APPEND LS_RBG_INDEX TO LT_RBG_INDEX.

CLEAR LS_RBG_INDEX.

LS_RBG_INDEX-TEXT = 'Radio 12'.

APPEND LS_RBG_INDEX TO LT_RBG_INDEX.

CLEAR LS_RBG_INDEX.

LS_RBG_INDEX-TEXT = 'Radio 3'.

APPEND LS_RBG_INDEX TO LT_RBG_INDEX.

CLEAR LS_RBG_INDEX.

LS_RBG_INDEX-TEXT = 'Radio 4'.

APPEND LS_RBG_INDEX TO LT_RBG_INDEX.

CLEAR LS_RBG_INDEX.

* * @TODO compute values

* * e.g. call a model function

LO_ND_RBG_INDEX->BIND_TABLE( NEW_ITEMS = LT_RBG_INDEX SET_INITIAL_ELEMENTS =

ABAP_TRUE ).

Step5: Go to actions tab, double click on ON_SELECT, add below code.

DATA LO_ND_RBG_INDEX TYPE REF TO IF_WD_CONTEXT_NODE.

DATA LO_EL_RBG_INDEX TYPE REF TO IF_WD_CONTEXT_ELEMENT.

DATA LS_RBG_INDEX TYPE WD_THIS->ELEMENT_RBG_INDEX.

DATA LV_TEXT TYPE WD_THIS->ELEMENT_RBG_INDEX-TEXT.

* navigate from <CONTEXT> to <RBG_INDEX> via lead selection

LO_ND_RBG_INDEX = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_RBG_INDEX ).

* @TODO handle non existant child

* IF lo_nd_RBG_INDEX IS INITIAL.

* ENDIF.

* get element via lead selection

LO_EL_RBG_INDEX = LO_ND_RBG_INDEX->GET_ELEMENT( ).

* alternative access via index

* lo_el_RBG_INDEX = lo_nd_RBG_INDEX->get_element( index = 1 ).

* @TODO handle not set lead selection

IF LO_EL_RBG_INDEX IS INITIAL.

ENDIF.

* get single attribute

LO_EL_RBG_INDEX->GET_ATTRIBUTE(
EXPORTING
NAME = `TEXT`
IMPORTING
VALUE = LV_TEXT ).

DATA LO_EL_CONTEXT TYPE REF TO IF_WD_CONTEXT_ELEMENT.

DATA LS_CONTEXT TYPE WD_THIS->ELEMENT_CONTEXT.

DATA LV_SELETEXT TYPE WD_THIS->ELEMENT_CONTEXT-SELETEXT.

* get element via lead selection

LO_EL_CONTEXT = WD_CONTEXT->GET_ELEMENT( ).

* @TODO handle not set lead selection

IF LO_EL_CONTEXT IS INITIAL.

ENDIF.

* @TODO fill attribute

* lv_seletext = 1.

IF LV_TEXT = 'Radio 1'.

LV_SELETEXT = 'Radio 1 selected'.
ELSEIF LV_TEXT = 'Radio 2'.
LV_SELETEXT = 'Radio 2 selected'.
ELSEIF LV_TEXT = 'Radio 3'.
LV_SELETEXT = 'Radio 3 selected'.
ELSEIF LV_TEXT = 'Radio 4'.
LV_SELETEXT = 'Radio 4 selected'.
ENDIF.
* set single attribute
LO_EL_CONTEXT->SET_ATTRIBUTE(

NAME = `SELETEXT`

VALUE = LV_SELETEXT ).

Step7:Activate, Create Application and test

Working with drop downs in SAP Web Dynpro for ABAP to display drop down lists
+Just like Radio Button Group, drop down also have two kinds of development options.
1.

Drop Down By Key.

2.

Drop Down By Index.

Just like Radio Button Group, drop down also have two kinds of development options.

Drop Down By Key:

This UI element will be used, when ever we wants to display drop down based on fixed values of a domain. ex:
GENDER
Number of drop down options will be determined statically.

Drop Down By Index:

This is used when ever we have dynamic options in drop down.
Number of drop down options will be determined dynamically.

Working with Drop Down by Key in Web Dynpro for ABAP to display drop down list using
domain fixed values.
+-

Step1: Go to SE80, create a web dynpro component ZSAPN_DDK.

A popup will come provide some description and enter, save in a local object.

Step2: Double click on main menu, click on change, go to context tab, right click on context, create->node.

A popup will come provide name as DDK, cardinality (1 1) and enter.

Step3: Right click on node DDK, create->attribute, provide name as GENDER -> TYPE -> GENDER and enter.

Similarly create another attribute SELECTED -> TYPE -> CHAR30.

Step4: Go to layout tab, right click on ROOTUIELEMENTCONTAINER -> Insert element.

A popup will come, provide id: DDK, type: DropDownByKey and enter.

Create binding by clicking on bind icon.

A popup will come, select GENDER and enter.

Similarly right click on ROOTUIELEMENTCONTAINER, insert element id: Test, type: TextView and enter.

A popup will come select SELECTED, enter.

Select DDK UI element, create action method.

Step5: Go to actions tab, double click on ON_SELECT method and add below code.

DATA LO_ND_DDK TYPE REF TO IF_WD_CONTEXT_NODE.

DATA LO_EL_DDK TYPE REF TO IF_WD_CONTEXT_ELEMENT.
DATA LS_DDK TYPE WD_THIS->ELEMENT_DDK.
DATA LV_GENDER TYPE WD_THIS->ELEMENT_DDK-GENDER.

* navigate from <CONTEXT> to <DDK> via lead selection

LO_ND_DDK = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_DDK ).

* @TODO handle non existant child

* IF lo_nd_ddk IS INITIAL.
* ENDIF.

* get element via lead selection

LO_EL_DDK = LO_ND_DDK->GET_ELEMENT( ).
* @TODO handle not set lead selection
IF LO_EL_DDK IS INITIAL.
ENDIF.

* get single attribute

LO_EL_DDK->GET_ATTRIBUTE(
EXPORTING
NAME = `GENDER`
IMPORTING
VALUE = LV_GENDER ). "get selected drop down
DATA LV_TEXT TYPE WD_THIS->ELEMENT_DDK-SELECTED.
IF LV_GENDER = 'M'.
LV_TEXT = 'Male Selected'.
ELSEIF LV_GENDER = 'F'.
LV_TEXT = 'Female selected'.
ELSEIF LV_GENDER = 'N'.
LV_TEXT = 'Neutral selected'.
ENDIF.

* get single attribute

LO_EL_DDK->SET_ATTRIBUTE(
EXPORTING
NAME = `SELECTED`
VALUE = LV_TEXT ). "set text

Step6: Save, activate the component, create application and test.

working with Drop Down by index UI element in web dynpro for ABAP
+Create and design component as per below diagram.

Step1: Go to SE80, create a web dynpro component ZSAN_DD_INDEX, save it in a local object.
Step2: Double click on main view, click on change, go to context, create a node DD_INDEX with (0 - n) cardinality
and create two attributes as below.
MTART -> TYPE -> MARA_MTART.
SELECTED -> TYPE -> CHAR30.
Step3: Go to layout, right click on ROOTUIELEMENTCONTAINER, insert element id : DDI, type :
DropDownByIndex, enter, create binding for the property texts to MTART of node DD_INDEX.

Similarly insert another UI element id: TEXT, type: TextView, enter, create data binding for the property
text to SELECTED of node DD_INDEX.
Step4: Go methods, double click on WDDOINIT, and add below logic.
Step5: Save and activate whole component, create application and test.

Hook Methods in webdynpro ABAP

What are hook methds in web dynpro ABAP? list of hook methods availabel in web dynpro
ABAP
+-

HOOK METHODS in View Controller:

Hook Methods are standard SAP methods in web dynpro programming which are automatically created by SAP
to control the execution flow of a web dynpro application.
These methods are similar to events in SAP reports (classical reports).

WDDOINIT:
Method for initialization logic, this is the first method displayed before view is displayed. This method is used to
initialize variables, default data etc.

WDMODIFYVIEW:
This method is used to modify view dynamically based on user actions, this is used for dynamic programming.

WDDOBEFOREACTION:
This method is used to validate user input.

WDDOAFTERACTION:
Method for all common logic used in all methods or event handler methods.

WDEXIT:
This method is used for clearing/refreshing nodes, attributes etc.

Using WDDOINIT method in web dynpro ABAP, initialization in web dynpro for ABAP
+WDDOINT is the hook method which will trigger first and it will be triggered before displaying the view, so we can
use this method to initialize data(input fields, display data etc), it is like initialization event in SAP ABAP.
Previously we have used this method so many times, in different demo components. check for example: Using
table UI element in web dynpro ABAP etc.

Uisng WDDOMODIFYVIEW in web dynpro for ABAP

Using WDDOBEFORACTION in Web Dynpro ABAP to validate user inputs

Webdynpro Programming
web dynpro programming for reading nodes, attributes without using code wizard
+Most of the times we use code wizard to read a node or attribute, but is very important for us to write code
manually or reading a node or attribute or table, by the end of this lesson you will be able to understand manual
code writing.

Code generated using code wizard:

The below is used to read static attributes of a node(one record).
DATA LO_ND_NODE_NAME TYPE REF TO IF_WD_CONTEXT_NODE.

DATA LO_EL_NODE_NAME TYPE REF TO IF_WD_CONTEXT_ELEMENT.

DATA LS_NODE_NAME TYPE WD_THIS->ELEMENT_NODE_NAME.

* navigate from <context> to <node_name> via lead selection

LO_ND_NODE_NAME = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_NODE_NAME ).

* @TODO handle non existant child

* IF lo_nd_node_name IS INITIAL.
* ENDIF.

* get element via lead selection

LO_EL_NODE_NAME = LO_ND_NODE_NAME->GET_ELEMENT( ).
* @TODO handle not set lead selection

IF LO_EL_NODE_NAME IS INITIAL.
ENDIF.

* get all declared attributes

LO_EL_NODE_NAME->GET_STATIC_ATTRIBUTES(
IMPORTING
STATIC_ATTRIBUTES = LS_NODE_NAME ).

Manually writing code to read static attributes

Step1: Data decelerations for node instance, element instance, work area and other variables.
DATA : <NODE> TYPE REF TO IF_WD_CONTEXT_NODE. "node declaration

DATA : <ELEMENT> TYPE REF TO IF_WD_CONTEXT_ELEMENT. "element declaration

DATA : <WA> TYPE IF_<VIEW_NAME>=>ELEMENT_<NODE_NAME>. "work area declaration

DATA : <ITAB> TYPE IF_<VIEW_NAME>=>ELEMENTS_<NODE_NAME>. "work area deceleration

DATA : <LV_VAR> TYEP MARA-MATNR.

Step2:Create an instance for the node using root node instance and by using method get_child_node .
CALL METHOD WD_CONTEXT->GET_CHILD_NIDE(
EXPORTING
NAME = '<NODE_NAME>'
IMPORTING
INSTANCE = <NODE> ).

Step3: Get element instance using node instance and method get_element.
CALL METHOD <NODE>->GET_ELEMENT(
*EXPORTING
* INDEX = <INDEX> "by default lead selection
RETURNING
INSTANCE = <ELEMENT>).

Step4: Now read node or attribute into work area or internal table using node and element instance.
To read a single attribute .
CALL METHOD <ELEMENT>->GET_ATTRIBUTE(

EXPORTING
NAME = <ATTRIBUTE_NAME> ex: MATNR in MARA node
IMPORTING
VALUE = <LV_VAL>).

Read all attributes into work area.

CALL METHOD <ELEMENT>->GET_STATIC_ATTRIBUTES(
IMPORTING
STATIC_ATTRIBUTES = <WA>).

Read whole node into an internal table.

CALL METHOD <NODE>->GET_STATIC_ATTRIBUTES_TABLE(
IMPORTING
NEW_ITEMS = <ITAB>).

Most commonly used methods in web dynpro ABAP for context operations
+The below are the methods we use most commonly in web dynpro component development.

Reading

Writing

To read a single record.

To write a single record.

CALL METHOD -> GET_ATTRIBUTE.

CALL METHOD -> SET_ATTRIBUTE.

To read a all attributes of an

element.

To write all attributes of an element.

CALL METHOD -> SET_STATIC_ATTRIBUTES.

CALL METHOD -> GET_STATIC_ATTRIBUTES.

To read a all attributes of all

elements of a node.
CALL METHOD -> GET_STATIC_ATTRIBUTES_TABLE.

To write all attributes of all elements

of a node.
CALL METHOD -> BIND_TABLE.

Other useful methods from IF_WD_CONTEXT_NODE, using node instance.

CREATE_ELEMENT - Creates an element into a node.

GET_CHILD_NODE - Gets child node instance.

GET_ELEMENTS - Get all elements of a node.

GET_ELEMENTS_COUNT - Returns number of elements in a node.

GET_LEAD_SELECTION_INDEX - Returns index number of lead selection.

GET_LEAD_SELECTION - Get elements of lead selection .

GET_SELECTED_ELEMENTS - Returns all selected elements.

INVALIDATE - Refresh node elements.

Other useful methods from IF_WD_CONTEXT_ELEMENT, using element instance.

GET_ATTRIBUTE - Get an attribue of an element.

GET_INDEX - Get index number of an element.

GET_STATIC_ATTRIBUTES - Get attributes of an element.

SET_ATTRIBUTE - Set an attribue to an element.

SET_STATIC_ATTRIBUTES - Set attributes to an element.

Container UI elements in webdynpro ABAP

Containers are UI elements which can embed other UI elements into it, these containers are used for design
formatting based on requirements.
There are three types of containers

1. Group Container
Using group container, we can embed other UI elements into it with a title (caption), borders and colors. We can
specify height and width to it.

2. Transparent Container
This container is a plain container, which doesnt have borders, colors and caption.

3. TRAY
It is a container with expandable and collapsible options, by using TRAY we can get caption, borders but no
colors.

Working with container UI elements in web dynpro ABAP, container UI elements in web
dynpro ABAP
+-

Group container is an UI element, we can insert other UI elements into it, using this we can format design of a
web dynpro screen(view).
Step1: Go to SE80, create a web dynpro component ZSAPN_GROUP_CONTAINER.
Step2: Go to Main view, go to layout, right click on rootuielementcontainer ->insert element, provide id as G1,
type as group.
Step3: Group is inserted, by default caption will be created for group, select CAPTION, provide text under
properties.
Step4: Now you can insert other UI elements into it.

Working with transparent container in web dynpro for ABAP, transparent container web
dynpro ABAP
+Transparent container is an UI element, we can insert other UI elements into it, using this we can format design of
a web dynpro screen(view).
Step1: Go to SE80, create a web dynpro component ZSAPN_TRANSPARENT_CONTAINER.
Step2: Go to Main view, go to layout, right click on rootuielementcontainer ->insert element, provide id as T1, type
as 'TransparentContainer'.
Step3: Transparent container is inserted.
Step4: Now you can insert other UI elements into it.

Working with tray container in web dynpro ABAP, tray container in web dynpro abap
+TRAY container is an UI element, we can insert other UI elements into it, using this we can format design of a
web dynpro screen(view).
Step1: Go to SE80, create a web dynpro component ZSAPN_TRAY_CONTAINER.
Step2: Go to Main view, go to layout, right click on rootuielementcontainer ->insert element, provide id as TR1,
type as 'Tray'.
Step3: Group is inserted, by default caption will be created for group, select CAPTION, provide text under
properties, we can set borders for this.
Step4: Now you can insert other UI elements into it.

Layouts in webdynpro ABAP

Layout is a concept of arranging UI elements in a screen as per the client requirements.
There are four types of layouts.

Flow Layout
This layout arranges all the UI elements sequentially in a single line form left to right.This ts the default layout in
web dynpro ABAP.

Row layout
This layout arranges the UI elements in a same line or separate line, this layout have two options.
1.

Row Head Data:It arranges UI elements in a separate line.

2.

Row Data: It arranges UI elements in the same line.

Row layout doesn`t follow any vertical arrangement format.

Matrix Layout
This layout is same as row layout, by using this we can arrange UI elements in same line or separate line with
vertical formatting options.
Matrix layout have two options
1.

Matrix head data: It arranges UI elements in a separate line.

2.

Matrix data: It arranges UI elements in the same line.

Grid Layout
This layout arranges the UI elements with the help of column count, we can display UI elements as columns.By
using grid layout we can specify column spacing, column count(UI elements ti display in specific columns),
padding etc.
This layout arranges all the UI elements sequentially in a single line from left to right, this is a default layout.

Example of using flow layout.

Go to SE80, select web dynpro component from drop down, provide name as ZSAPN_FLOW_LAYOUT and press
enter.

Provide description and enter.

Go to main view, click on change, go to context and right click on context -> Create -> node, provide name as
KNA1, dictionary structure as KNA1, cardinality as 1-1 and click on add attributes from structure.

Select some attributes as below and press enter.

Clear dictionary structure immediately after creating node.

Go to layout, right click on ROOTUIELEMENTCONTAINER -> insert element.

Click on context.

Select KNA1 and enter.

Select follow layout from drop down and enter.

Again right click on ROOTUIELEMENTCONTAINER -> insert element.

Provide an ID, select button from drop down and press enter.

Select button, provide a button text and click on create to create an action method.

Provide action method name, descriptions and press enter.

Go to actions tab, double click on ON_GET and add below code.

METHOD ONACTIONON_GET .
DATA LO_ND_KNA1 TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LO_EL_KNA1 TYPE REF TO IF_WD_CONTEXT_ELEMENT.
DATA LS_KNA1 TYPE WD_THIS->ELEMENT_KNA1.
* navigate from to via lead selection
LO_ND_KNA1 = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_KNA1 ).
* get element via lead selection LO_EL_KNA1 = LO_ND_KNA1->GET_ELEMENT( ).
* @TODO handle not set lead selection
IF LO_EL_KNA1 IS INITIAL.
ENDIF.
* get all declared attributes
LO_EL_KNA1->GET_STATIC_ATTRIBUTES(
IMPORTING
STATIC_ATTRIBUTES = LS_KNA1 ).
SELECT SINGLE * FROM KNA1 INTO CORRESPONDING FIELDS OF LS_KNA1
WHERE KUNNR = LS_KNA1-KUNNR.
LO_EL_KNA1->SET_STATIC_ATTRIBUTES(
EXPORTING
STATIC_ATTRIBUTES = LS_KNA1 ).
ENDMETHOD.

Double click on component and right click -> activate.

Right click on component and create -> web dynpro application.

Provide name, enter, click save (Ctrl + S) and save it in a local object.

Right click on application name and click test to test the application.

A browser will open, provide a customer no(get from KNA1 table) and click on get.

Working with row layout in web dynpro ABAP, UI element allignment using row layout
+Step1: Go to Se80, create a web dynpro component ZSAPN_ROW_LAYOUT.
Step2: Expand view, double click on main view, click change.
Step3: Go to context right click on context -> create -> node, provide name as KNA1, dictionary structure as
KNA1, cardinality 1-1 and click on add attributes from structure. Select KUNNR, NAME1, LAND1 and ORT01,
press enter.
Step4: Select node KNA1 and remove dictionary structure.
Step5: Go to layout, right click on rootuielementcontainer -> create container form, click on context, select KNA1,
select row layout and press enter.

Step6: Select input field, select layout data from drop down and try changing and observe changes.

Working with matrix layout in web dynpro for ABAP, align screen elements using matrix
layout
+Step1: Go to Se80, create a web dynpro component ZSAPN_ROW_LAYOUT.
Step2: Expand view, double click on main view, click change.
Step3: Go to context right click on context -> create -> node, provide name as KNA1, dictionary structure as
KNA1, cardinality 1-1 and click on add attributes from structure. Select KUNNR, NAME1, LAND1 and ORT01,
press enter.
Step4: Select node KNA1 and remove dictionary structure.
Step5: Go to layout, right click on rootuielementcontainer -> create container form, click on context, select KNA1,
select matrix layout and press enter.

Step6: Select input field, select layout data from drop down and try changing and observe changes.

Working with grid layout in web dynpro for ABAP, alignment of screen elements using grid
layout
+Grid layout is the most commonly used layout in web dynpro ABAP, because it has very good options to arrange
screen elements (UI elements), by using grid layout we can specify column count, padding etc.
Step1: Go to transaction SE80, create a web dynpro component ZSAPN_GRID_LAYOUT and save it in a local
object.
Step2: Go to main view, go to context create a node KNA1 with four attributes.
Step3: Insert a group container, go to layout, right click on rootuielementcontainer -> insert element, provide id as
G1, type as 'Group' and enter.
Step4: Right click on group G1 -> create container form, click on context, select KNA1, select 'GridLayout' and
enter.

Step5: Select group, scroll down and you can specify options for column count, cell spacing and cell padding.

Concept of view plugs and example

Concept of plugs in web dynpro ABAP, using plugs to navigate from one view to another view
+By the end of this lesson, you will be able to understand navigation techniques between two different views.
Before going to this lesson, keep below thing in mind.
1.

We can create multiple views in a web dynpro component.

2.

If we need to display a view, it must be embedded into a window, without a window we cannot display
view.

Web Dynpro Plugs:

As a part of real-time business applications, we need to navigate from one screen to another, for this one there is
a concept of plugs in web dynpro ABAP.Plugs is a concept which is used to navigate from one view to another
view. There are two types of plugs available in web dynpro ABAP.

What ate outbound and inbound plugs?

Outbound Plugs

Inbound Plugs

This plug is used to exit a view.

This plug is used to enter into a view.

Every outbound plug must linked to a

inbound plug.

Every inbound plug must be linked to

a outbound plug.

For every outbound plug a method by name

FIRE_ will be created.

For every inbound plug a event

handler method will be created by
name HANDLE_.

Just fire the out bound plug method to

navigate. Ex: Wd_this->FIRE_. Here wd_this
is the instance of view controller.

This plug event handler method will

be automatically trigger whenever we
enter into a view.

Example component of using view navigation

Step1: Go to SE80, create a web dynpro component ZSAPN_VIEW_PLUGS.
Step2: Go to main view, insert a button, provide button text as 'Next', and create action method for button
ON_NEXT.
Step3: Right click on component -> create -> view, provide name as SECOND and enter.
Step3: Go to SECOND view, insert a button, provide button text as 'Previous', create action method for button
ON_PREVIOUS.
Step5: Go to main view, outbound plugs tab, add outbound plug as GOTO_SECOND and inbound plugs tab add
inbound plug as IN_MAIN.
Step6: Go to SECOND view, outbound plugs tab, add outbound plug as GOTO_MAIN and inbound plugs tab add
inbound plug as IN_SECOND.

Step7: Expand window, drag and drop MAIN, SECOND view into window.
Step8: Expand two views, right click on GOTO_SECOND -> Create Navigation Link, press F4, select destination
view as SECOND and enter.
Step9: Right click on GOTO_MAIN -> Create Navigation Link, press F4, select destination view as MAIN and
enter.
Step10: Go to main view actions tab, double click on ON_NEXT method and add below code. wd_this>FIRE_GOTO_SECOND_PLG( );
Step11: Go to SECOND view actions tab, double click on ON_PREVIOUS method and add below code. wd_this>FIRE_GOTO_MAIN_PLG( );
Step12: Save and activate the component.
Step13: Test the component.

Working with view plugs in web dynpro ABAP, simple example on view plugs and view
navigation in web dynpro ABAP
+The below is the simple example of using view plugs in web dynpro for ABAP, hope you understand the concept
of plugs in web dynpro abap

Step1: Go to SE80, create a web dynpro component ZSAPN_VIEW_PLUGS.

Go to SE80, select web dynpro component from drop down, provide name as ZSAPN_VIEW_PLUGS and press
enter.

Click on yes, provide description, continue(enter) and save it in a local object.

Step2: Go to main view, insert a button

Go to change mode, expand views, double click on main view and right click on ROOTUIELEMENTCONTAINER
-> Insert element.

A popup will come, provide id as BT1 and type as button and enter.

Select button ui element, provide text, create action method under events, a popup will code, provide action and
description and enter.

Step3: Create another view

Right click on view -> create

A popup will come, provide name, description and enter.

Save the component immediately(then only we can see second view).

Go to second view and insert button

Go to (double click) second view and right click on ROOTUIELEMENTCONTAINER -> insert element.

A popup will come, provide id as BT2, type as button and enter.

Select button, provide text, click on create under events, provide action and description and enter.

Step4: Add inbound and outbound plugs

Go to main view, go to outbound plugs tab and add a plug as below.

Go to main view, go to inbound plugs tab and add a plug as below.

Repeat the same steps in SECOND view by adding plug names as IN_SECOND (inbound plug) and
GOTO_MAIN (outbound plug).

Create navigation link

To use a view, we must embed it into a window(with out window we can not display a view), go to window(double
click), drag and drop SECOND view onto window.

Navigation link is a link between outbound and inbound plug, through which an outbound plug will identify the
destination(target view).
Expand main view and right click on outbound plug -> create navigation link .

Press F4 , select second view and enter .

Similarly create navigation link for outbound plug of second view right click on GOTO_MAIN -> create navigation
link, popup opens press F4, select MAIN and enter.

Step5: Fire outbound plg

When we call an outbound plug, we call that process as firing of outbound plug.
Go to main view, go to actions tab, double click on ON_BT1 method, click on code wizard, fire outbound plg.

The below code will be generated.

WD_THIS->FIRE_GOTO_SECOND_PLG(
).

Similarly go to SECOND view, actions, double click on ON_BT2 method and fire outbound plug (GOTO_MAIN).
below code will be generated.
WD_THIS->FIRE_GOTO_MAIN_PLG(
).

Step6: Create application and test

Save and activate the web dynpro component, right click on component name create -> web dynpro application,
provide a name, enter save it in a local object.
Right click on application -> test.
Browser will open, click on go to second view, it will go to second view and click on go to previous view, it will go
to main view.