Web Dynpro ABAP

Web Dynpro ABAP
Introduction
SAP standard UI technologies
WDA - Web Dynpro ABAP applications
WDJ - Web Dynpro Java applications
BSP - Buiness Server Pages applications
ITS
SAP GUI - Classic dynpro programming model of SAP
SAP Interactive forms and print forms by Adobe
- HTML pages
SAP Web Dynpro for ABAP and it's advantages

Purpose:
Web Dynpro ABAP (WDA) is the main SAP standard UI technology for developing Web
application UIs in the ABAP environment. It consists of a runtime environment and a
graphical development environment with special tools that are completely integrated
into the ABAP development environment - the ABAP Workbench (transaction SE80).
History:
WDA has been available since October 2005 (SAP NetWeaver 7.0 (2004s) Web
Application Server 7.0) and is widely used by the SAP Business Suite and will continue
to be the UI technology of choice for mainstream Business Suite applications (ERP,
PLM, SCM, SRM, FIM).
FPM is available since WDA 7.00 SP13 and is used by all ERP projects using WDA as
of SAP EhP4 for SAP ERP 6.0.
Advantages:
The use of declarative and graphical tools significantly reduces the

implementation effort
Web Dynpro supports a structured design process
Strict separation between layout and business data
Reuse and better maintainability by using components
The layout and navigation is easily changed using the Web Dynpro tools
Stateful applications are supported that is, if the page is changed and the
required data remains intact so that you can access it at any time throughout the
entire application context.
Note that stateless applications are not possible.
Automatic data transport using data binding
Automatic input check
Automatic operation of the Web Dynpro application using the keyboard
User interface accessibility is supported
Full integration in the reliable ABAP development environment
SAP Web Dynpro ABAP Architecture

Definition:
Web Dynpro is the SAP NetWeaver programming model for user interfaces (UIs).
The Web Dynpro model is based on the Model View Controller paradigm.
Structure:
Metamodel Concept
Graphical Development Tools
Separation of Business and Application Logic
Conversion of the Model-View-Controller Programming Model

MVC Prgramming Model:
Every Web Dynpro application is structured according to the Model View Controller
programming model:
The model forms the interface to the back end system and thus enables the Web
Dynpro application access to data.
The view is responsible for the representation of the data in the browser.
The controller lies between the view and the model. The controller formats the
model data to be displayed in the view, processes the user entries made by the user,
and returns them to the model.
SAP Web Dynpro ABAP tools in Workbench
Component editor
Controller Editor
View Editor
Window Editor
Web Dynpro Code Wizard
Web Dynpro Text browser
Web Dynpro ABAP run time analysis
SAP Web Dynpro Hook methods and usage

Method Name
Function
Component controller hook methods

WDDOAPPLICATIONSTATECHANGE
Handling for Suspending and Resuming

an Application
WDDOBEFORENAVIGATION
Error Handling Before Navigation

Through Application
WDDOEXIT
Controller Clean-Up Method
WDDOINIT
Controller Initialization Method
WDDOPOSTPROCESSING
Prepare Output
View Controller hook methods

WDDOAFTERACTION
Method for non-action specific operations

before navigation
WDDOBEFOREACTION
Method for Validation of User Input
WDDOEXIT
WDDOINIT
WDDOMODIFYVIEW
Method for Modifying the View Before

Rendering
WDDOONCONTEXTMENU
Method for Modifying the Context Menu
Window controller hook methods

WDDOEXIT
WDDOINIT
WDDOONCLOSE
Handling For Closing of Window
WDDOONOPEN
Handling For Opening of Window
User Interface
Web Dynpro UI elements and Layout design example
The below example program describes
How to design UI elements
How to use different Layouts
How to use Table UI element
How to pass data to UI elements i.e Data binding

Pls Click for detail
SAP Web Dynpro ABAP Layouts

The layout is used to arrange the UI elementss within the parent container. The node
ROOTUIELEMENTCONTAINER is the root UI element and all the UI elements within a
view are children of this root container. It is of TransparentContainer type and has
initially assigned to it the FlowLayout layout.
Flow Layout
Left to right, across the screen
Grid Layout
Arranged by number of columns (e.g.colCount

= 4)
Matrix Layout
Number of columns not fixed. Eachelement

can be specified for which rowand which
column.Need to specify new row items.
(MatrixHeadData)
Row Layout
Row by row.Need to specify new row items.
(RowHeadData)
Frame Layout
Populate ItemListBox - Web Dynpro ABAP
Program steps
Create Web Dynpro Component with Window and View(Automatically View is embedded
into Window).
Go to Component Controller COMPONENTCONTROLLER.

Context tab->Create COUNTRY node with cardinality 0..n and attributes(refer to
T005T structure).
Methods tab->Write the code in WDDOINIT to populate data to show countries
as list.
WDDOINIT code
METHOD wddoinit .
wd_this->get_listbox_data(
).
ENDMETHOD.
GET_LISTBOX_DATA code
METHOD get_listbox_data .
DATA lo_nd_country TYPE REF TO if_wd_context_node.
DATA lt_country TYPE wd_this->elements_country.
* navigate from <CONTEXT> to <COUNTRY> via lead selection

lo_nd_country = wd_context->get_child_node( name = wd_this>wdctx_country ).
SELECT land1 landx
FROM t005t
INTO CORRESPONDING FIELDS OF TABLE lt_country
WHERE spras = sy-langu.
lo_nd_country->bind_table( new_items = lt_country
set_initial_elements = abap_true ).
ENDMETHOD.
GET_SELECTED_RECS code
METHOD get_selected_recs .
"Get selected Elements
DATA lo_nd_country TYPE REF TO if_wd_context_node.
DATA lt_country TYPE wd_this->elements_country.
data: ls_country TYPE wd_this->element_country.
data: lt_ctry
DATA lt_elements TYPE wdr_context_element_set.
DATA ls_elements TYPE REF TO if_wd_context_element.
"Navigate from <CONTEXT> to <COUNTRY> via lead selection
lo_nd_country = wd_context->get_child_node( name =
TYPE wd_this->elements_country.
wd_this->wdctx_country ).
lt_elements = lo_nd_country->get_selected_elements(
LOOP AT lt_elements INTO ls_elements.
).
ls_elements->get_static_attributes( IMPORTING
static_attributes = ls_country ).
APPEND ls_country TO lt_ctry.

ENDLOOP.
"Display selected Elements
DATA lo_nd_dsp_coutries TYPE REF TO if_wd_context_node.
DATA lt_dsp_coutries TYPE wd_this>elements_dsp_coutries.
navigate from <CONTEXT> to <DSP_COUTRIES> via lead
selection
lo_nd_dsp_coutries = wd_context->get_child_node( name =

wd_this->wdctx_dsp_coutries ).
LOOP AT lt_ctry INTO ls_country.

SELECT *
FROM t005t
APPENDING CORRESPONDING FIELDS OF TABLE
lt_dsp_coutries
WHERE spras = sy-langu

AND land1 = ls_country-land1.
ENDLOOP.
lo_nd_dsp_coutries->bind_table( new_items =
lt_dsp_coutries set_initial_elements = abap_true ).
ENDMETHOD.
Go to View ITEMLISTBOX_V
o Context tab->Map context of Component controller to context of view.
Layout tab->define UI elements 1). ItemListBox 2). Button and OnAction

event 3). Table as shown below.
Methods tab->call GET_SELECTED_RECS method from

ONACTIONDISPLAY_SELECTED event handler method.
METHOD onactiondisplay_selected .
DATA lo_componentcontroller TYPE REF TO
ig_componentcontroller .
lo_componentcontroller =
wd_this-
>get_componentcontroller_ctr( ).
lo_componentcontroller->get_selected_recs(
ENDMETHOD.
Activate Web dynpro component
Create Web Dynpro application and Save it as local object
).
Run application.
Web Dynpro ABAP - DropDownByIndex usage

Please follow the steps to fill the Drop Down by Index with values
Create Web Dynpro component and Save
Go to View -> Context -> Create node COUNTRIES with cardinality 0..n.
Go to Layout -> Create DropDownByIndex UI element and Label UI element for

Drop down box.
Bind the context attribute to DropDown in the shown way.
Go to Methods tab -> WDDOINIT -> Write the below code.
Activate Web Dynpro Component
Create Web Dynpro Application
Execute the WebDynrpo application.
SAP Web Dynpro ABAP - DropDownByKey value set

setting
If domain is defined with Value Table, drop down list does not get populated with values
automatically.
Steps to get the values in drop down list (DropDownByKey).
Create Web Dynpro component and save as local object.
Go to Context tab -> Create node and attribute inside the node.
Go to Layout tab -> Place UI element DropDownByKey by using Create

container form so that UI element is automatically bound to Context attribute.
Go to method tab -> Write the below code in WDDOINIT method. Here we have
to call SET_ATTRIBUTE_VALUE_SET of
interface IF_WD_CONTEXT_NODE_INFO to set the fixed values for an attribute
which is bound to DropDownByKey UI element.
method wddoinit .
"Reference variables
data:
lo_nd_emp_det
type ref to if_wd_context_node,
lo_nd_emp_det_info type ref to if_wd_context_node_info,
lo_el_emp_det
type ref to if_wd_context_element.
types:
begin of ty_p0002,
pernr
type pa0002-pernr,
nachn
type pa0002-nachn,
vorna
type pa0002-vorna,
end of ty_p0002,
ty_value_set type wdr_context_attr_value.
data:
ls_p0002
ls_value_set
type ty_p0002,
type ty_value_set.
data:
lt_p0002
type standard table of ty_p0002,
lt_value_set type standard table of ty_value_set.
"Navigate from to via lead selection
lo_nd_emp_det = wd_context->get_child_node( name = wd_this>wdctx_emp_det ).
"Get node info
lo_nd_emp_det_info = lo_nd_emp_det->get_node_info( ).
"Select the all employee details
select pernr
nachn
vorna
from pa0002
into table lt_p0002
up to 100 rows.
"Put Employee lines into value set
loop at lt_p0002 into ls_p0002.
ls_value_set-value = ls_p0002-pernr.
concatenate ls_p0002-vorna ls_p0002-nachn into ls_value_set-text
separated by space.
append ls_value_set to lt_value_set.
clear ls_value_set.
endloop.
" Assign value set
call method lo_nd_emp_det_info->set_attribute_value_set
exporting
name
= 'PERNR'
value_set = lt_value_set.
endmethod.
Save and Activate Web Dynpro component.
Create Web Dynpro Application ->Execute.
SAP Web Dynpro ABAP - Drop down box values using

Domain
Presently Web Dynpro ABAP engine is fillin Drop down by Key for certain domains, for
others not.
For domains, that have direct values assigned everything is filled automatically.
If domain has values indirectly through value table, no values are filled.
Steps to get the values in drop down list using

Domains
Create web dynpro component and save in local directly.
Go to CONTEXT tab insert attribute actio TYPE ACTIO or mention the

field PSPAR-ACTIO directly if the domain is assigned to field.
Go to LAYOUT tab ->Create UI element DropDownbyKey and Bind the context

attribute ACTIO to drop down UI element.
If you mention label for drop down box, you should mention Lable for attribute of
LABEL UI element.
Save and activate all.
Create web dynpro application and execute.
SAP Web Dynpro ABAP - TextEdit UI Element

Usage: You can enter and display multi-line text.
Procedure with steps
Create Web Dynpro Component with Window and View(Automatically View is embedded
into Window).
Go to view ->Context tab

o
Change mode
Ctreate two attributes STR_TAB_01 and STR_TAB_01 of type STRING_TABLE.
Go to view ->Layout tab
Change root UI element ROOTUIELEMENTCONTAINER property LAYOUT

= MatrixLayout.
Insert TextEdit element(txtedit_4_free_txt_01). Change the element properties

COLS = 72 and ROWS = 6.
Bind context attribute str_tab_01 with UI element txtedit_4_free_txt_01.
Insert Button UI element. Change the element property LAYOUT =

MatrixHeadData .
Insert TextEdit element(txtedit_4_free_txt_02). Change the element
properties LAYOUT = MatrixHeadData, COLS = 72 and ROWS = 6.
Bind context attribute str_tab_02 with UI element txtedit_4_free_txt_02.
Create onAction event SUBMIT for Button UI element.
Write the below code for Event Handler method ONACTIONSUBMIT.

METHOD
DATA
DATA
DATA
ONACTIONSUBMIT .
LO_EL_CONTEXT TYPE REF TO IF_WD_CONTEXT_ELEMENT.
LS_CONTEXT TYPE WD_THIS->ELEMENT_CONTEXT.
LV_STR_TAB TYPE WD_THIS->ELEMENT_CONTEXT-STR_TAB.
" get element via lead selection

LO_EL_CONTEXT = WD_CONTEXT->GET_ELEMENT( ).
"get single attribute
LO_EL_CONTEXT->GET_ATTRIBUTE(
EXPORTING
NAME = `STR_TAB`
IMPORTING
VALUE = LV_STR_TAB ).
DATA LT_TLINE
TYPE ZTLINE.
LT_TLINE = WD_THIS->CONVERT_LGTEXTS( STR_TAB = LV_STR_TAB ).
DATA LV_STR_TAB02 TYPE WD_THIS->ELEMENT_CONTEXT-STR_TAB02.
LV_STR_TAB02 = WD_THIS->GET_LGTEXTS( TEXT_TABLE = LT_TLINE ).
" set single attribute
LO_EL_CONTEXT->SET_ATTRIBUTE(
NAME = `STR_TAB02`
VALUE = LV_STR_TAB02 ).
ENDMETHOD.
Method CONVERT_LGTEXTS code.
METHOD CONVERT_LGTEXTS .
DATA:LT_STR_TAB TYPE STRING_TABLE,
LS_STR
TYPE STRING.
TYPES:
LTY_TDLINE TYPE TLINE-TDLINE,
LTY_TLINE TYPE TLINE.
DATA:
LT_TDLINE TYPE STANDARD TABLE OF LTY_TDLINE.
DATA:
LS_TDLINE TYPE LTY_TDLINE,
LS_TLINE
TYPE LTY_TLINE.
DATA:
LV_TXTSTR TYPE STRING.
CHECK STR_TAB IS NOT INITIAL.
LT_STR_TAB = STR_TAB.
LOOP AT LT_STR_TAB INTO LS_STR.
CLEAR LT_TDLINE[].
LV_TXTSTR = LS_STR.
"Convert the string to a table
CALL FUNCTION 'CONVERT_STRING_TO_TABLE'
EXPORTING
I_STRING
= LV_TXTSTR
I_TABLINE_LENGTH = 72
TABLES
ET_TABLE
= LT_TDLINE.
LOOP AT LT_TDLINE INTO LS_TDLINE.

MOVE LS_TDLINE TO LS_TLINE-TDLINE.
APPEND LS_TLINE TO TEXT_TABLE.
ENDLOOP.
ENDLOOP.
ENDMETHOD.
Method GET_LGTEXTS code.
METHOD GET_LGTEXTS .
TYPES:
LTY_TEXT TYPE
LTY_TLINE TYPE
LTY_TSTR TYPE
DATA:
LT_TEXT
TYPE
LT_TSTR
TYPE
DATA:
LS_TEXT
TYPE
LS_TLINE TYPE
LS_TSTR
TYPE
TLINE-TDLINE,
TLINE,
STRING.
STANDARD TABLE OF LTY_TEXT,
STANDARD TABLE OF LTY_TSTR.
LTY_TEXT,
LTY_TLINE,
LTY_TSTR.
LOOP AT TEXT_TABLE INTO LS_TLINE.

MOVE LS_TLINE-TDLINE TO LS_TSTR.
APPEND LS_TSTR TO LT_TSTR.
CLEAR LS_TSTR.
ENDLOOP.
TEXT_STRING = LT_TSTR.
ENDMETHOD.
Create Web Dynpro Application.
Run application
Web Dynpro ABAP - ViewContainerUIElement usage

If you remember properly sub screen usage in ABAP dialog programming, we can corelate Web Dynpro ViewContainer UI element to Sub screen. In dialog programming,
We create screen as sub screen and we define sub screen area on main screeen. Call
subscreen in the main screen.
ViewContainerUIElement is an area within a view that contains another view.
Uses
View positioning: Flexible design of view assemblies within the browser window.
Application performance: The Web Dynpro runtime environment uses the visibility
property of the ViewContainerUIElement to reduce the layout data sent to the client.
Using the ViewContainerUIElement in this way can improve application performance.
Fundamental principle to use ViewContainerUIElement
Create one main View
Define View Container area using ViewContainerUIElement
Create one more view to embed into View Container
Embed second view using Drag and Drop method.

Example
Create Web Dynpro Component and Save it as local object.
Go to View MAIN_V -> Go to Context tab -> Create node N1 and include few
attributes as shown in the screen.
Go to Layout tab ->Change Layout type of ROOTUIELEMENTCONTAINER

to MatrixLayout.
Create VIEW_CONTAINER_UIELEMENT ->Change Layout data

to MatrixHeadData
Create GROUP element -> Change Layout to GridLayout & Layout Data
to MatrixHeadData
Create TextView elements -> Bind with Context node N1 as shown below.
Go to Methods tab -> Write below code in WDDOINIT method.
METHOD wddoinit .
DATA lo_nd_n1 TYPE REF TO if_wd_context_node.
DATA lo_el_n1 TYPE REF TO if_wd_context_element.
DATA ls_n1
TYPE wd_this->element_n1.
navigate from <context> to <n1> via lead selection

lo_nd_n1 = wd_context->get_child_node( name = wd_this-
>wdctx_n1 ).
get element via lead selection
lo_el_n1 = lo_nd_n1->get_element( ).
SELECT SINGLE *
FROM pa0002
INTO CORRESPONDING FIELDS OF ls_n1.
set all declared attributes

lo_el_n1->set_static_attributes(
static_attributes = ls_n1 ).
ENDMETHOD.
Create one more view SEC_V->Create one PAGE_HEADER element.
Embed SEC_V view to into View Container as shown below.
Create Web Dynpro application and save it as local object.
Run Web Dynpro application .
SAP Web Dynpro ABAP - Data in Table display
Steps to achieve
Create webdynpro component e.g. ZTEST_WDA_TABLE Save.
Go to Context tab Create node e.g. IT0001 with cardinality 0-n. >save.
Go to Layout tab Drag and drop Table UI element from UI elements library or
right click on ROOTUIELEMENTCONTAINER Create UI element Give ID
e.g.TAB_DATA and select type TABLE Save.
Bind Context node with Table UI element. Right click on Table UI element
TAB_DATA Create Binding Select the node from context Continue Save.
Go to Methods tab Use WDDOINIT method to get data and set the data to
Context. As context is already bound with Layout table element, at runtime data is
display in Layout.
Save and activate Webdynpro component.
Create Webdynpro application and Run the application. Table is displayed with
data in window.
Please Click Here table display
Web Dynpro ABAP - Filtering in Table UI element
Summary.
In order to get FILTER or SORTING functions for Table UI element, need to define attribute with
ref to IF_WD_TABLE_METHOD_HND interface.
Procedure with steps
Create Web Dynpro Component(ZOVH_TABLE_FILTERING_01) with Window and

View(Automatically View is embedded into Window).
Go to view ->Context tab

o
Change mode
Create a node IT0001 with cardinality 0-n.
Create another node IT0001_FILTER with cardinality 1-1 and selection 1-1.
Attributes of node IT0001 and IT0001_FILTER should be same so that we can provide filter
for all attributes.
Take out Dictionary structure.
Take out all attributes of node IT0001_FILTER and replace with STRING type.
Create one attribute IS_FILTER_ON with type WDY_BOOLEAN. This attribute is

used to switch on or switch off filter option.
Go to view->Attributes tab.
o
Create one attribute(TABLE_CONTROL) of type

IF_WD_TABLE_METHOD_HNDL interface. Interface IF_WD_TABLE_METHOD_HNDL
provides sorting and filtering functions for a Table UI element.
Go to view->Layout tab
o
Set Layout = MatrixLayout of ROOTUIELEMENTCONTAINER.
Create table UI element(table_4_filter).
Bind context node IT0001 with table UI element. Follow the below steps.
Set filterValue property for each column attribute of table UI element. Similar
attribute from node IT0001_FILTER should be mapped to column filterValue property.Follow

the steps.
Insert Table Toolbar and ToolBarToggleButton element into table UI element for
filter.
Bind CHECKED property of ToolBarToggleButton element to attribute

IS_FILTER_ON defined at context.
Change the below highlighted portions as specified.
Create onToggle event(SWITCH_FILTER) for ToolBarToggleButton element.
Go to view->Actions tab.
o
Double click on Filter event.
Past the below code.
METHOD ONACTIONFILTER .
WD_THIS->TABLE_CONTROL->APPLY_FILTER( ).
ENDMETHOD.
Go to view->Methods tab.
Double click on WDDOMODIFYVIEW method and paste the code.
METHOD WDDOMODIFYVIEW .
CASE FIRST_TIME.
WHEN ABAP_TRUE.
"&--------------------------------------------------------------------*
" Code for data retrieval
"&--------------------------------------------------------------------*
DATA LO_ND_IT0001 TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LT_IT0001 TYPE WD_THIS->ELEMENTS_IT0001.
" navigate from
to
via lead selection
LO_ND_IT0001 = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_IT0001 ).
SELECT * FROM PA0001

INTO CORRESPONDING FIELDS OF TABLE LT_IT0001 UP TO 20
ROWS.
LO_ND_IT0001->BIND_TABLE( NEW_ITEMS = LT_IT0001

SET_INITIAL_ELEMENTS = ABAP_TRUE ).
ENDCASE.
"&-----------------------------------------------------------------------*
" Code for FILTER
"&-----------------------------------------------------------------------*
DATA WD_TABLE TYPE REF TO CL_WD_TABLE.
" Name of the table UI element to be provided
WD_TABLE ?= VIEW->GET_ELEMENT( 'TABLE_4_FILTER' )."Name of
Table UI element
WD_THIS->TABLE_CONTROL ?= WD_TABLE->_METHOD_HANDLER.
DATA LO_EL_CONTEXT TYPE REF TO IF_WD_CONTEXT_ELEMENT.

DATA LS_CONTEXT TYPE WD_THIS->ELEMENT_CONTEXT.
DATA LV_IS_FILTER_ON TYPE WD_THIS->ELEMENT_CONTEXTIS_FILTER_ON.

" get single attribute
LO_EL_CONTEXT->GET_ATTRIBUTE(
EXPORTING
NAME =
`IS_FILTER_ON`
IMPORTING
VALUE = LV_IS_FILTER_ON ).
" Set or cancel the table's filter action
IF LV_IS_FILTER_ON = ABAP_TRUE .
WD_TABLE->SET_ON_FILTER( 'FILTER' ).
ELSE.
WD_TABLE->SET_ON_FILTER( '' ).
ENDIF.
ENDMETHOD.
Save and activate web dynpro component and create web dynpro application.
Run web dynpro application.
Click on filter button and filter using any the columns.
SAP Web Dynpro ABAP - Check box on Table display
Simple method.
Create webdynpro component e.g. ZOVH_CHKBOX_ON_TABLE_002 Save.
Go to Context tab Create node e.g. EMP_ADD with cardinality 0-n. >save
e.g.TAB_DAT and select type TABLE Save.
TAB1Create Binding Select the node from context Continue Save.
Go to Methods tab Use WDDOINIT SELECT the data and Set the table
data to Context
METHOD wddoinit .
DATA lo_nd_emp_add TYPE REF TO if_wd_context_node.
DATA lt_emp_add
TYPE wd_this->elements_emp_add.
"Navigate from <CONTEXT> to <EMP_ADD> via lead selection

lo_nd_emp_add = wd_context->get_child_node( name = wd_thi
s->wdctx_emp_add ).
"Fetch data
SELECT *
FROM pa2006
INTO CORRESPONDING FIELDS OF TABLE lt_emp_add
UP TO 50 ROWS.
"Find the table values to Context
lo_nd_emp_add->bind_table( new_items = lt_emp_add set_ini

tial_elements = abap_true ).
ENDMETHOD.
Create Webdynpro application and Run the application.
Changing existing table for check box.
Create webdynpro component e.g. ZOVH_CHKBOX_ON_TABLE Save.
Go to Context tab Create node e.g. EMP_ADD with cardinality 0-n. >save
e.g.TAB1 and select type TABLE Save.
TAB1Create Binding Select the node from context Continue Save.
Go to context tab again, create one attribute for check box in the node
EMP_ADD.
Go to Layout tab Right click on Table element Insert table

column Insert Cell editor for Check box Bind the context CHK1 attribute to
Table check box cell.
Go to Methods tab Use WDDOINIT SELECT the data and Set the table
data to Context elements.
Create Webdynpro application and Run the application. Table is displayed with
data in window.
Click Heare for details
Web Dynpro ABAP - File Upload - Excel

Steps to achieve
Create Web Dynpro Component and Save as local object.
No need to embed View into Window when you specify view and window.
Go to Component Controller ->Context tab-> Create two nodes EMP_DET Cardinality 0..n and FILE with attribute FILE_CONTENTS of type XSTRING.
Go to View UPLOAD_V ->Context tab->Map Component Controller context to

View Context as shown below.
Go to Layout tab
1.
Set ROOTUIELEMENTCONTAINER layout type -MatrixLayout
2.
Create Group UI element - Layout data - MatrixHeadData
3.
Create File Upload UI element inside Group and bind with context node
FILE.
4.
Create button inside Group - Create OnAction event - UPLOAD_FILE
method ONACTIONUPLOAD_FILE .
DATA lo_componentcontroller TYPE REF TO ig_componentcontroller .
wd_this->get_componentcontroller_ctr( ).
lo_componentcontroller->upload_file( ).
endmethod.
5.
Create one Table UI element and bind with Context node EMP_DET.
Go to Component Controller -> Method tab -> Write the below code in
UPLOAD_FILE.
METHOD upload_file .
DATA:
lo_nd_file
TYPE REF TO if_wd_context_node,
lo_nd_emp_det TYPE REF TO if_wd_context_node,

lt_emp_det
TYPE wd_this->elements_emp_det,
lo_el_file
TYPE REF TO if_wd_context_element.
DATA:
ls_file
TYPE wd_this->element_file,
ls_emp_det TYPE wd_this->element_emp_det,
lt_bin
TYPE TABLE OF sdokcntbin,
lt_txt
TYPE TABLE OF sdokcntasc,
ls_txt
LIKE LINE OF lt_txt,
lv_outlen
TYPE i.
navigate from <context> to <file> via lead selection

lo_nd_file = wd_context->get_child_node( name = wd_this-
>wdctx_file ).

lo_el_file = lo_nd_file->get_element( ).
get all declared attributes

lo_el_file->get_static_attributes(
IMPORTING
static_attributes = ls_file ).
"XSTRING to BINARY
CALL FUNCTION 'SCMS_XSTRING_TO_BINARY'
EXPORTING
buffer
= ls_file-file_contents
IMPORTING
output_length = lv_outlen
TABLES
binary_tab
= lt_bin.
"Binary to Text file

CALL FUNCTION 'SCMS_BINARY_TO_TEXT'
EXPORTING
input_length = lv_outlen
TABLES
binary_tab
= lt_bin
text_tab
= lt_txt.
LOOP AT lt_txt INTO ls_txt.

SPLIT ls_txt AT cl_abap_char_utilities=>horizontal_tab INTO
ls_emp_det-pernr
ls_emp_det-nachn
ls_emp_det-vorna
ls_emp_det-gbdat.
APPEND ls_emp_det TO lt_emp_det.

CLEAR
ls_emp_det.
ENDLOOP.
* navigate from
to
via lead selection
lo_nd_emp_det = wd_context->get_child_node( name = wd_this>wdctx_emp_det ).
lo_nd_emp_det->bind_table( new_items = lt_emp_det

ENDMETHOD.
Create Web Dynpro Application and save it as local object.
Run the application.
Web Dynpro ABAP - Download file

We use method CL_WD_RUNTIME_SERVICES=>ATTACH_FILE_TO_RESPONSE to
download file from Web Dynpro Application.
Example to achieve the functionality
Create Web Dynpro Component and Save it a local object.
When we specify Window name and View name when we create web dynpro
component, View is embedded in Window.
Go to Component Controller
o
Context tab->Create node EMP_DET with cardinality 0..n
Method tab->Create GET_DATA method to prepare data for EMP_DET

node.
Code
o
o
o
o
o
o
o
METHOD get_data .
DATA lo_nd_emp_det TYPE REF TO if_wd_context_node.
DATA lt_emp_det
TYPE wd_this->elements_emp_det.
*
navigate from <CONTEXT> to <EMP_DET> via lead selection

lo_nd_emp_det = wd_context->get_child_node( name = wd_this->wdctx_emp_det
).
o
o
o
o
o
o
SELECT *
FROM pa0002
INTO CORRESPONDING FIELDS OF TABLE lt_emp_det UP TO 30 ROWS.
lo_nd_emp_det->bind_table( new_items = lt_emp_det set_initial_elements =
abap_true ).
ENDMETHOD.
Go to view DOWNLOAD_V
1.
Context tab->Map Component Controller context to View Context.
Layout tab->Change layout property of ROOTUIELEMENTCONTAINER to

MatrixLayout.
Layout tab->Create Table UI element ->Bind EMP_DET context node to

table element->Set Layout data property to MatrixHeadData
Layout tab-> Create Button UI element for downloading file-> Create

OnAction event DOWNLOAD_DATA for the button.
Code for the ONACTIONDOWNLOAD_DATA method.
Code
o
o
o
o
o
o
o
o
METHOD onactiondownload_data .
DATA lo_nd_emp_det TYPE REF TO if_wd_context_node.
DATA:
lt_emp_det TYPE wd_this->elements_emp_det,
ls_emp_det TYPE wd_this->element_emp_det.
DATA:
str
TYPE string,
o
o
o
xstr TYPE xstring.

navigate from <CONTEXT> to <EMP_DET> via lead selection
lo_nd_emp_det = wd_context->get_child_node( name = wd_this->wdctx_emp_det
*
).
lo_nd_emp_det->get_static_attributes_table( IMPORTING table = lt_emp_det

).
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
"Prepare download file.

LOOP AT lt_emp_det INTO ls_emp_det.
CONCATENATE str
ls_emp_det-pernr
ls_emp_det-nachn
ls_emp_det-vorna
ls_emp_det-gbdat
cl_abap_char_utilities=>newline
INTO str
SEPARATED BY cl_abap_char_utilities=>horizontal_tab.
ENDLOOP.
CALL FUNCTION 'SCMS_STRING_TO_XSTRING'
EXPORTING
text
= str
IMPORTING
buffer = xstr
EXCEPTIONS
failed = 1.
"Attach file
CALL METHOD cl_wd_runtime_services=>attach_file_to_response
EXPORTING
i_filename
= 'Download.xls'
i_content
= xstr
i_mime_type
= 'EXCEL'
i_in_new_window = abap_false
i_inplace
= abap_false.
ENDMETHOD.
Methods tab->Call GET_DATA method in WDDOINIT method to get

EMP_DET node elements to display in Table.
method WDDOINIT .
lo_componentcontroller->get_data( ).
endmethod.
Save and Activate Web Dynpro component.
Create Web Dynpro Application and Save it as local object.
Run Web Dynpro Application.
Message Handling
Web Dynpro ABAP - Message handling

We use MESSAGE statement to show error, warning or Information message to the
user. But when it comes to Web Dynpro ABAP, we use IF_WD_MESSAGE_MANAGER
interface as message manager for messages integration, we can access that in the
Web Dynpro code wizard.
The below are the important methods in the interface.
Method
Description
REPORT_EXCEPTION
Reports a Web Dynpro Exception (May Return)
REPORT_SUCCESS
Reports a Success Message
REPORT_WARNING
Reports a Warning
REPORT_ERROR_MESSAGE
Reports a Web Dynpro Message with Optional Parameters
REPORT_MESSAGE
Reports a message
REPORT_T100_MESSAGE
Reports a Message Using a T100 Entry
REPORT_FATAL_EXCEPTION
Reports a Fatal Web Dynpro Exception
REPORT_FATAL_ERROR_MESSAGE
Reports a Fatal WD Exception Message w/ Optional
Parameters
REPORT_ATTRIBUTE_ERROR_MESSAG
Reports a WD Exception for a Context Attribute
E
REPORT_ATTRIBUTE_EXCEPTION
REPORT_ATTRIBUTE_T100_MESSAGE
REPORT_ELEMENT_ERROR_MESSAGE
Reports a Web Dynpro exception related to context attributes
REPORT_ATTRIBUTE_MESSAGE
Reports a message for this context attribute
REPORT_ELEMENT_EXCEPTION
REPORT_ELEMENT_T100_MESSAGE
IS_EMPTY
Query Whether Messages Exist
CLEAR_MESSAGES
Delete All Messages
HAS_VAL_ERRORS_FOR_WINDOW
Query whether there are validation messages for a window
REMOVE_MESSAGE
Deletes an individual message
GET_MESSAGES
Returns all messages
HAS_VALIDATION_ERRORS
Query whether there are validation messages
GET_MESSAGE_FOR_ID
Returns the message for a MESSAGE_ID
Web dynpro abap Error / Success message sample

program
In the previous post Web Dynpro ABAP - Message handling, discussed about
IF_WD_MESSAGE_MANAGER and its methods. Here we use two methods to show
Success and Error message.
Fundamental principle of displaying any message in Web Dynpro
We define MESSAGE_AREA Ui element on view.
Define reference to IF_WD_MESSGE_MANAGER
Call method REPORT_SUCCESS and pass text to show success message.
Call method REPORT_ERROR_MESSAGE and pass text to show error

message.
Message Manager will display the message on view in the Message area.
Example program
Create Web Dynpro component and Save as local object.
Go to view -> Context tab -> Create node N1 and ADDRESS_TYPE inside the
node.
Go to layout --> Place Input field and bind with context attribute.
---------------> Place one button
---------------> Place Message Area where you want to display messages.
Create OnAction event for Button write code as shown below.
Code for SHOW_MESSAGE action event
METHOD onactionshow_message .
* Context related declaration
DATA:
lo_nd_n1
lo_el_n1
TYPE REF TO if_wd_context_element,
ls_n1
TYPE wd_this->element_n1.
* get message manager

DATA:
lo_api_controller
TYPE REF TO if_wd_controller,
lo_message_manager TYPE REF TO if_wd_message_manager.

* Structure and variables
DATA:
ls_t591s
TYPE t591s,
lv_msg
TYPE string.
navigate from <context> to <n1> via lead selection

lo_nd_n1 = wd_context->get_child_node( name = wd_this->wdctx_n1 ).

lo_el_n1 = lo_nd_n1->get_element( ).
get all declared attributes

lo_el_n1->get_static_attributes(
IMPORTING
static_attributes = ls_n1 ).
SELECT SINGLE *
FROM
t591s
INTO ls_t591s
WHERE sprsl = sy-langu

AND infty
AND
subty
= '0006'
= ls_n1-address_type.
IF sy-subrc EQ 0.
"Success message display
lo_api_controller ?= wd_this->wd_get_api( ).
CALL METHOD lo_api_controller->get_message_manager
RECEIVING
message_manager = lo_message_manager.
CONCATENATE 'Selected addrees is:' ls_t591s-stext INTO lv_msg SEPARATED
BY space.
* report message
CALL METHOD lo_message_manager->report_success
EXPORTING
message_text = lv_msg.
ELSE.
"Error message display
lo_api_controller ?= wd_this->wd_get_api( ).
CALL METHOD lo_api_controller->get_message_manager
RECEIVING
message_manager = lo_message_manager.
* report message
CALL METHOD lo_message_manager->report_error_message
EXPORTING
message_text = 'Please enter correct address type'.
ENDIF.
ENDMETHOD.
Create Web Dynpro Application and save.
Execute the Web Dynpro application.
Integration
Web Dynpro ABAP - ALV Sample program

To provide the data we want to display in the ALV output, perform the following three
steps:
Internal data table - We provide an internal data table.
Context node - We provide a suitable context node and attributes in the context
of your application.
Transfer data to the ALV component - We provide this context node for the
ALV component.
External Context Mapping
External mapping is a cross-component mapping and can be directly mapping or
reversely mapping. We can create an external context mapping if we have firstly
declared a usage for the component that holds the respective context and the
respective context node has been marked as interface.
Concept of the example program.
1.
->Input - Employee number
2.
->Prepare Address data into itab to be displayed in ALV
3.
->Suitable Context node to be mapped to ALV DATA node.
4.
->Output is through ALV TABLE view.
5.
->We include ALV TABLE view into VIEW_CONTAINER_ELEMENT of our view.
Steps to display data in ALV output
Create Web Dynpro Component and Save as Local Object
Double click on COMPONENTCONTROLLER->Under Used Components tab

->Define Component Use as ALV and Component type SALV_WD_TABLE.
Save and Activate Web Dynpro Component.
Define Component Controller Context ->Two nodes 1). INPUT - PERNR attribute
to get input
2). OUTPUT - ADDRESS node with cardinality 0..n to display internal
table data in ALV.
Map Component Controller context INPUT node to View Context.
Go to Layout -> Change ROOTUIELEMENTCONTAINER layout type to

MatrixLayout.
Place GROUP ui element - Layout type MatrixData ->Create UI element for Input
field and bind Context element to input field -> Create Button to search employees
address details.
Go to COMPONENTCONTROLLER -> Methods Tab ->Create EMP_ADD_DATA

method->Double click on method and generate the code as shown below.
METHOD get_emp_add .
DATA lo_nd_output TYPE REF TO if_wd_context_node.
DATA lt_output
TYPE wd_this->elements_output.
DATA lo_nd_input
TYPE REF TO if_wd_context_node.
DATA lo_el_input
TYPE REF TO if_wd_context_element.
DATA ls_input
TYPE wd_this->element_input.
* navigate from <context> to <input> via lead selection

lo_nd_input = wd_context->get_child_node( name = wd_this->wdctx_input ).
* get element via lead selection

lo_el_input = lo_nd_input->get_element( ).
* get all declared attributes

lo_el_input->get_static_attributes(
IMPORTING
static_attributes = ls_input ).
SELECT *
FROM pa0006
INTO CORRESPONDING FIELDS OF TABLE lt_output
WHERE pernr EQ ls_input-pernr.
*
navigate from
to
via lead selection
lo_nd_output = wd_context->get_child_node( name = wd_this->wdctx_output ).

lo_nd_output->bind_table( new_items = lt_output set_initial_elements =
abap_true ).
ENDMETHOD.
Go to view ->Layout tab-> Double click on button ->Create event

GET_EMP_ADDRESS ->Generate the code as shown below.
METHOD onactionget_emp_address .
lo_componentcontroller->get_emp_add( ).
ENDMETHOD.
Go to View -> Layout tab -> Create VIEW_CONTAINER_ELEMENT ui element

and set Layout data property to MatrixHeadData -> Save.
Double click on INTERFACECONTROLLER_USAGE and Click on Controller

Usage button and follow as shown in the screen.
Map OUTPUT node of COMPONENTCONTROLLER context with ALV Context

DATA node. This is called reversal mapping or External mapping .
Go to Window ->Embed the TABLE view of Component SALV_WD_TABLE into

VIEW_CONTAINER_ELEMENT. Please follow the print screen steps.
Activate Web Dynpro component.
Create Web Dynpro Application and Save
Run Web Dynpro Application and output as follows.
Column editing in ALV - Web Dynpro ABAP

The ALV output is read-only by default. To allow users to change or enter new data then
you have to make
some changes to the standard settings.

Procedure
The write-protection for the ALV output must be deactivated before these actions
can be executed.
lv_value->IF_SALV_WD_TABLE_SETTINGS~SET_READ_ONLY( ABAP_FALSE ).
The ALV output uses TextView as the cell editor for displaying data by default. To
make it possible for users to enter or change existing data, replace this interface
element with an interactive interface element, such asInputField.
LOOP AT lt_column INTO ls_column.
CASE ls_column-id.
WHEN 'STRAS'.
CREATE OBJECT lr_input_field
EXPORTING
value_fieldname = ls_column-id.
ls_column-r_column->set_cell_editor( lr_input_field ).
ENDCASE.
The user can add rows at a specific position, attach them to the end of the ALV
output, and delete them.
It is also possible to attach a whole page of empty rows, not only individual rows,
to make it possible to enter mass data.
You must also define the time at which the system checks whether changed data
is correct.
If the user changes or creates new data then it might be necessary to refresh the
data manually or you might only want to refresh that data and not the whole ALV
output.
Program with steps
Create Web Dynpro Component with Window and View(Automatically View is

embedded into Window).
Define Component Use ALV for the Used component SALV_WD_TABLE under
Used Components tab of Web Dynpro Component.
Go to Component Controller COMPONENTCONTROLLER

o
Properties tab->Define or Include Used Controllers/ Components of ALV.
Context tab->Create PA0006 node with cardinality 0..n.
Methods tab->Write the code in WDDOINIT to populate data in ALV.
WDDOINIT method code

METHOD wddoinit .
"Get data
wd_this->get_data(
).
ENDMETHOD.
GET_DATA method code.

method get_data .
data lo_nd_pa0006 type ref to if_wd_context_node.
data lt_pa0006
type wd_this->elements_pa0006.
"Navigate from <CONTEXT> to <PA0006> via lead selection

lo_nd_pa0006 = wd_context->get_child_node( name = wd_this>wdctx_pa0006 ).
"Get data
select *
from pa0006
into corresponding fields of table lt_pa0006
up to 10 rows
where stras ne space.
lo_nd_pa0006->bind_table( new_items = lt_pa0006 set_initial_elements =

abap_true ).
endmethod.
CHANGE_ALV_CONFIG method to change ALV configuration and make
ALV table cell editable. This method would be called from view CELL_EDIT_V hook
method WDDOINIT.
METHOD change_alv_config .
"Create an instance of ALV component
DATA lo_cmp_usage TYPE REF TO if_wd_component_usage.
lo_cmp_usage =
wd_this->wd_cpuse_alv( ).
"If not initialized, then initialize

IF lo_cmp_usage->has_active_component( ) IS INITIAL.
lo_cmp_usage->create_component( ).
ENDIF.
"Create an instance of ALV Interface Controller
DATA lo_interfacecontroller TYPE REF TO iwci_salv_wd_table .
lo_interfacecontroller =
wd_this->wd_cpifc_alv( ).
"Configuration of the ALV Output

DATA lv_value TYPE REF TO cl_salv_wd_config_table.
lv_value = lo_interfacecontroller->get_model( ).
DATA:
lr_column_settings TYPE REF TO if_salv_wd_column_settings,
lr_input_field
TYPE REF TO cl_salv_wd_uie_input_field.
DATA:
lt_column
TYPE salv_wd_t_column_ref,
ls_column
TYPE salv_wd_s_column_ref.
"Casting
lr_column_settings ?= lv_value.
"Get columns
lt_column
= lr_column_settings->get_columns( ).

CASE ls_column-id.
WHEN 'STRAS'.
CREATE OBJECT lr_input_field
EXPORTING
value_fieldname = ls_column-id.
ls_column-r_column->set_cell_editor( lr_input_field ).
ENDCASE.
ENDLOOP.
"Set read only mode to false (and display edit toolbar)
DATA: lr_table_settings TYPE REF TO if_salv_wd_table_settings.
lr_table_settings ?= lv_value.
lr_table_settings->set_read_only( abap_false ).
ENDMETHOD.
Go to view CELL_EDIT_V
o
-Layout tab->Create View Container UI element to display ALV output.
Methods tab->WDDOINIT method.

method WDDOINIT .
DATA:
lo_componentcontroller TYPE REF TO ig_componentcontroller .
lo_componentcontroller->change_alv_config(
).
endmethod.
Go to INTERFACECONTROLLER_USAGE of ALV->Map Context node PA0006

of component controller to DATA of ALV Interface Controller.
Go to window CELL_EDIT_W->Embed TABLE view of SALV_WD_TABLE

component in window as shown in the screen.
Web Dynpro ABAP - ALV Total and Subtotal

ALV Output in External View with ALV Configuration Model
1.
Create Context node in component controller. If necessary, map the component

controller context to view Context.
2.
Define a component usage for ALV component SALV_WD_TABLE in web dynpro

component. In doing so, we specify a name for the component usage (for example,
ALV_COMPONENT).
3.
Define the usage of this component in the properties for your view. Since we
need the object model for our changes, choose the With Controller Access variant
(component interface).
4.
Using external context mapping, we provide the DATA context node in the ALV
interface controller with our application context node.
5.
Generate the UI element ViewContainerUIElement at the required position in the

layout of view.
6.
We have already embedded our view in the window of your application. The
name of the UI element ViewContainerUIElement that we prepared in the previous
step for the ALV output is displayed beneath this view. Under this entry, we then
embed the TABLE view for the SALV_WD_TABLE ALV component.
7.
o
To configure the ALV output, we must follow two additional steps:

Instantiate the used ALV component in a method of your view (for
example, WDDOINIT).
Get the ALV configuration model and with it the object model, field objects,
and column objects.
Example Program with steps
Create Web Dynpro component and Save it as local object.
Define component usage for SALV_WD_TABLE in web dynpro component and

Specify the name of component usage - ALV_COMPONENT.
Go to Component Controller ->Context tab ->Create node ALV_TAB with

cardinality 0..n. as shown below.
Component controller ->Methods tab ->Create method -GET_DATA ->Write code

to get the records or elements for ALV_TAB node.
GET_DATA method code

METHOD get_data .
DATA:
lo_nd_alv_tab TYPE REF TO if_wd_context_node,
lt_alv_tab
TYPE wd_this->elements_alv_tab.
navigate from <context> to <alv_tab> via lead selection

lo_nd_alv_tab = wd_context->get_child_node( name = wd_this-
>wdctx_alv_tab ).
"Get employees information from PA0008
SELECT *
FROM pa0008
INTO CORRESPONDING FIELDS OF TABLE lt_alv_tab.
lo_nd_alv_tab->bind_table( new_items = lt_alv_tab set_initial_elements =
abap_true ).
ENDMETHOD.
Go to view ALV_V -> Layout tab -> Create View Container UI element
VIEWCONTAINER as shown below.
Go to ALV Interface Controller ->Map our Component Controller Context node

ALV_TAB with ALV context node DATA. This is called External Context Mapping.
When we create Web Dynpro component with Window and View, view is
automatically embedded. We need to embed TABLE view of SALV_WD_TABLE
component in VIWCONTAINER created in View ALV_V.
Create Web Dynpro Application and Save it as local object .
Run Web Dynpro application.
Creating Totals and Sub totals
Define the usage of ALV component ALV_COMPONENT in the properties for

your view. Since we need the object model for our changes, choose the With
Controller Access variant (component interface).
Go to view ALV_V -> Methods tab ->Create GET_TOTAL(Write the code for
creating subtotal of Annual Salary(ANSAL)->Call that method in WDDOINIT.
Steps in GET_TOTAL method.

1.
Getting the instance of ALV Component and Interface Controller.
2.
Getting all columns
3.
Looping at columns and declaring aggregation rule for ANSAL & DIVGV
column.
4.
For creating subtotal based on TRFGB(Pay Scale Area), Create a sort rule
for TRFGB.
GET_TOTAL method code

"Create instance for ALV Component usage.
lo_cmp_usage =
wd_this->wd_cpuse_alv_component( ).
ENDIF.
"Get config model
wd_this->wd_cpifc_alv_component( ).
DATA lr_config_table TYPE REF TO cl_salv_wd_config_table.

lr_config_table = lo_interfacecontroller->get_model( ).
"Total
DATA:lr_field_amnt TYPE REF TO cl_salv_wd_field.
lr_field_amnt =
lr_config_table-
>if_salv_wd_field_settings~get_field( fieldname = 'ANSAL' ).

lr_field_amnt->if_salv_wd_aggr~create_aggr_rule( aggregation_type =
IF_SALV_WD_C_AGGREGATION=>AGGRTYPE_TOTAL ).
DATA:lr_field_hrs TYPE REF TO cl_salv_wd_field.

lr_field_hrs =
lr_config_table-
>if_salv_wd_field_settings~get_field( fieldname = 'DIVGV' ).

lr_field_hrs->if_salv_wd_aggr~create_aggr_rule( aggregation_type =
IF_SALV_WD_C_AGGREGATION=>AGGRTYPE_TOTAL ).
"Sub total based on Payscale area
DATA:lr_field_trfgb TYPE REF TO cl_salv_wd_field.
lr_field_trfgb =
lr_config_table-
>if_salv_wd_field_settings~get_field( fieldname = 'TRFGB' ).
lr_field_trfgb->if_salv_wd_sort~create_sort_rule( sort_order =
IF_SALV_WD_C_SORT=>SORT_ORDER_ASCENDING
group_aggregation =
abap_true ).
METHOD get_total .
DATA:
lo_cmp_usage
TYPE REF TO if_wd_component_usage,
lo_interfacecontroller TYPE REF TO iwci_salv_wd_table,

lr_config_table
TYPE REF TO cl_salv_wd_config_table,
lr_column_settings
TYPE REF TO if_salv_wd_column_settings,
lr_field_settings
TYPE REF TO if_salv_wd_field_settings,
lr_aggr_rule
TYPE REF TO cl_salv_wd_aggr_rule,
lr_sort_rule
TYPE REF TO cl_salv_wd_sort_rule.
lr_column
TYPE REF TO cl_salv_wd_column,
lr_field_amnt
TYPE REF TO cl_salv_wd_field,
lr_field_hrs
TYPE REF TO cl_salv_wd_field,
lr_field_trfgb
TYPE REF TO cl_salv_wd_field.
lt_column
ls_column
TYPE salv_wd_s_column_ref.
DATA:
DATA:
"Create an instance of ALV component

lo_cmp_usage =
wd_this->wd_cpuse_alv_component( ).
"If not initialized, then initialize

ENDIF.

wd_this->wd_cpifc_alv_component( ).

lr_config_table = lo_interfacecontroller->get_model( ).
"Casting
lr_column_settings ?= lr_config_table.
"Get columns
lt_column
= lr_column_settings->get_columns( ).

CASE ls_column-id.
WHEN 'ANSAL'.
CALL METHOD lr_config_table->if_salv_wd_field_settings~get_field
EXPORTING
fieldname = 'ANSAL'
RECEIVING
value
= lr_field_amnt.
" Create aggregate rule as total

CALL METHOD lr_field_amnt->if_salv_wd_aggr~create_aggr_rule
EXPORTING
aggregation_type = if_salv_wd_c_aggregation=>aggrtype_total
RECEIVING
value
= lr_aggr_rule.
WHEN 'DIVGV'.
EXPORTING
fieldname = 'DIVGV'
RECEIVING
value
= lr_field_hrs.
" Create aggregate rule as total

CALL METHOD lr_field_hrs->if_salv_wd_aggr~create_aggr_rule
EXPORTING
aggregation_type = if_salv_wd_c_aggregation=>aggrtype_total
RECEIVING
value
= lr_aggr_rule.
WHEN 'TRFGB'.
EXPORTING
fieldname = 'TRFGB'
RECEIVING
value
= lr_field_trfgb.
" Sub totals based on contract currency.

CALL METHOD lr_field_trfgb->if_salv_wd_sort~create_sort_rule
EXPORTING
sort_order
= if_salv_wd_c_sort=>sort_order_ascending
group_aggregation = abap_true
RECEIVING
value
= lr_sort_rule.
ENDCASE.
ENDLOOP.
ENDMETHOD.
Save and Activate the Web Dynpro Component
Run the Application again.
TOP OF LIST in ALV - Web Dynpro ABAP


o
Context tab->Create PA0002 node with cardinality 0..n.
Context tab->Create TOP_OF_LIST node with attribute CONTENT (type

ref to CL_SALV_FORM_ELEMENT)
Context tab-> Map node TOP_OF_LIST of ALV Component context to

TOP_OF_LIST of Component Controller.
Methods tab->Write the code in WDDOINIT to populate data in ALV and

creating TOP_OF_LIST.

METHOD wddoinit .
wd_this->get_pa0002_data(
).
wd_this->create_top_of_list(
).
ENDMETHOD.
GET_PA0002_DATA code
METHOD get_pa0002_data .
DATA lo_nd_pa0002 TYPE REF TO if_wd_context_node.
DATA lt_pa0002 TYPE wd_this->elements_pa0002.
"Navigate from <context> to <pa0002> via lead selection

SELECT *
FROM pa0002
INTO CORRESPONDING FIELDS OF TABLE lt_pa0002
UP TO 20 ROWS.
abap_true ).
ENDMETHOD.
CREATE_TOP_OF_LIST code
METHOD create_top_of_list.
DATA lo_nd_top_of_list TYPE REF TO if_wd_context_node.
DATA lo_el_top_of_list TYPE REF TO if_wd_context_element.
DATA ls_top_of_list
TYPE wd_this->element_top_of_list.
DATA:lr_grid
TYPE REF TO cl_salv_form_layout_grid.
* TOP-OF-LIST
**...create top grid
CREATE OBJECT lr_grid
EXPORTING
columns = 5.
*... fill 1. row

lr_grid->create_text(
EXPORTING
row = 1
column = 1
rowspan = 1
colspan = 1
text = 'Cell 1,1' ).
EXPORTING
row = 1
column = 2
rowspan = 1
colspan = 1
EXPORTING
row = 1
column = 3
rowspan = 1
colspan = 1
EXPORTING
row = 1
column = 4
rowspan = 1
colspan = 1
EXPORTING
row = 1
column = 5
rowspan = 1
colspan = 1
*...fill 2nd row
EXPORTING
row = 2
column = 1
rowspan = 1
colspan = 1
EXPORTING
row = 2
column = 2
rowspan = 1
colspan = 1
EXPORTING
row = 2
column = 3
rowspan = 1
colspan = 1
EXPORTING
row = 2
column = 4
rowspan = 1
colspan = 1
EXPORTING
row = 2
column = 5
rowspan = 1
colspan = 1
"Navigate from <context> to <top_of_list> via lead selection
lo_nd_top_of_list = wd_context->get_child_node( name = wd_this>wdctx_top_of_list ).
"pass TOL to context node

lo_nd_top_of_list = wd_context->get_child_node( name = 'TOP_OF_LIST' ).
lo_el_top_of_list = lo_nd_top_of_list->get_element( index = 1 ).
CALL METHOD lo_el_top_of_list->set_attribute

EXPORTING
value = lr_grid
name
= 'CONTENT'.
ENDMETHOD.

of component controller to DATAof ALV Interface Controller.
Go to window ALV_TOL_W->Embed TABLE view of SALV_WD_TABLE

Create Web Dynpro Application and save it as local object.
Run the web dynpro application

o
Context tab->Create END_OF_LIST node with attribute CONTENT (type

ref to CL_SALV_FORM_ELEMENT).
Context tab-> Map node END_OF_LIST of ALV Component context to

END_OF_LIST of Component Controller.

creating TOP_OF_LIST and END_OF_LIST events.

method wddoinit.
wd_this->get_pa0002_data(
).
wd_this->create_top_of_list(
).
wd_this->create_end_of_list(
).
endmethod.
CREATE_END_OF_LIST code
method create_end_of_list .
data lo_nd_top_of_list type ref to if_wd_context_node.
data lo_el_top_of_list type ref to if_wd_context_element.
data ls_top_of_list
type wd_this->element_top_of_list.
data:lr_grid
type ref to cl_salv_form_layout_grid.
* TOP-OF-LIST
**...create top grid
create object lr_grid
exporting
columns = 5.
*... fill 1. row

exporting
row = 1
column = 1
rowspan = 1
colspan = 1
exporting
row = 1
column = 2
rowspan = 1
colspan = 1
exporting
row = 1
column = 3
rowspan = 1
colspan = 1
exporting
row = 1
column = 4
rowspan = 1
colspan = 1
exporting
row = 1
column = 5
rowspan = 1
colspan = 1
*...fill 2nd row
exporting
row = 2
column = 1
rowspan = 1
colspan = 1
exporting
row = 2
column = 2
rowspan = 1
colspan = 1
exporting
row = 2
column = 3
rowspan = 1
colspan = 1
exporting
row = 2
column = 4
rowspan = 1
colspan = 1
exporting
row = 2
column = 5
rowspan = 1
colspan = 1
"Navigate from
to
via lead selection
lo_nd_top_of_list = wd_context->get_child_node( name = wd_this>wdctx_top_of_list ).
"pass TOL to context node

lo_nd_top_of_list = wd_context->get_child_node( name = 'END_OF_LIST' ).
lo_el_top_of_list = lo_nd_top_of_list->get_element( index = 1 ).
call method lo_el_top_of_list->set_attribute

exporting
value = lr_grid
name
= 'CONTENT'.
endmethod.
Activate Web Dynpro Component.
Run Web Dynpro Application.
Web Dynpro ABAP ALV - ON_CLICK event

The following example program is a step by step guide to use ON_CLICK event to user
actions for the Button UI element.
Procedure.
Create Web dynpro alv program by using ALV component SALV_WD_TABLE.
Configure the ALV to get button for column
Define one event handler method ON_CLICK in view controller for ON_CLICK
event of SALV_WD_TABLE interface controller.
Identify Click in a Cell of ALV Output in event handler method ON_CLICK.
Implement WDDOMODIFYVIEW to set data based on click in a Cell.

Program steps
Create One Web Dynpro application for ALV output. Click here to check on
how to create.
Go to Component controller of web dynpro component

Methods tab ->Define CONFIGURE_ALV method and write the code as
o
specified.
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
CONFIGURE_ALV method code

METHOD configure_alv .
"Instantiate Used Component
lo_cmp_usage =
ENDIF.
DATA:
lt_columns
ls_columns
LIKE LINE OF lt_columns.
lt_columns = lr_column_settings->get_columns( ).
LOOP AT lt_columns INTO ls_columns.
CASE ls_columns-id.
WHEN 'PERNR'.
DATA:lr_button TYPE REF TO cl_salv_wd_uie_button.
CREATE OBJECT lr_button.
lr_button->set_text_fieldname( ls_columns-id ).
ls_columns-r_column->set_cell_editor( lr_button ).
ENDCASE.
ENDLOOP.
ENDMETHOD.
"configure_alv
Call CONFIGURE_ALV method in WDDOINIT hook method.
o
o
o
o
o
METHOD wddoinit .
wd_this->get_data( ).
wd_this->configure_alv( ).
ENDMETHOD.
Activate web dynpro component and run application. The output would be like
below.
Go to view ALV_EVENTS_V
o
Context tab->Create node PA0006 with cardinality 0..n and another node
EVENT_PROPERTIES(beneath NAME and VALUE are attributes) with cardinality

0..n.
o
Context node EVENT_PROPERTIES is needed to hold the information on

the last event.
Layout tab->Create one table UI element->Bind Context node PA0006

with table UI element.
Method tab->Define ON_CLICK event handler method for ON_CLICK

event of ALV Interface controller.
ON_CLICK event handler method code.Here EVENT_PROPERTIES

context node will be populated with details like column id, column index, column
attributes and value of column.
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
Bind the internal table to context node EVENT_PROPERTIES.

METHOD ON_CLICK .
DATA: lr_node
lt_event_properties TYPE wd_this->elements_event_properties,
ls_event_properties TYPE wd_this->element_event_properties.
FIELD-SYMBOLS: TYPE ANY.
* fill internal table
ls_event_properties-name = 'COLUMN_ID'.
ls_event_properties-value = r_param->column.
APPEND ls_event_properties TO lt_event_properties.
ls_event_properties-name = 'INDEX'.
ls_event_properties-value = r_param->index.
ls_event_properties-name = 'ATTRIBUTE'.
ls_event_properties-value = r_param->attribute.
ASSIGN r_param->value->* TO <l_value>.
ls_event_properties-name = 'VALUE'.
ls_event_properties-value = <l_value>.
* navigate to context node EVENT_PROPERTIES
lr_node = wd_context->get_child_node( 'EVENT_PROPERTIES' ).
o
o
o
o
* bind internal table to context node

lr_node->bind_table( lt_event_properties ).
ENDMETHOD.
Populate context node PA0006 based on context EVENT_PROPERTIES.
For that use WDDOMODIFYVIEW hook method.

WDDOMODIFYVIEW method code
o
o
o
o
o
o
o
o
METHOD wddomodifyview .
DATA lo_nd_event_properties TYPE REF TO if_wd_context_node.
DATA: lt_event_properties TYPE wd_this->elements_event_properties,
ls_event_properties LIKE LINE OF lt_event_properties.
" Navigate from to via lead selection
lo_nd_event_properties = wd_context->get_child_node( name = wd_this>wdctx_event_properties ).
lo_nd_event_properties->get_static_attributes_table( IMPORTING table =
lt_event_properties ).
o
o
o
o
o
o

" Navigate from <CONTEXT> to <PA0006> via lead selection
lo_nd_pa0006 = wd_context->get_child_node( name = wd_this->wdctx_pa0006
).
o
o
o
o
o
o
o
o
READ TABLE lt_event_properties INTO ls_event_properties WITH KEY name =

'VALUE'.
SELECT *
FROM pa0006
WHERE pernr EQ ls_event_properties-value.
abap_true ).
ENDMETHOD.
Activate Web dynpro component.
Web Dynpro ABAP - ALV row color
Program steps

Go to Component Controller of component

o
Context tab->Create PA0002 node with cardinality 0..n. and CELLDESIGN

attribute beneath the node PA0002 to collect colour code.
Methods tab->Write the code in WDDOINIT to populate data in ALV.
WDDOINIT method code.

METHOD wddoinit .
ENDMETHOD.
GET_DATA method code.

METHOD get_data .
DATA ls_pa0002 LIKE LINE OF
lt_pa0002.

SELECT *
FROM pa0002
UP TO 40 ROWS.
LOOP AT lt_pa0002 INTO ls_pa0002.
ls_pa0002-celldesign = sy-tabix.
MODIFY lt_pa0002 FROM ls_pa0002.
ENDLOOP.
abap_true ).
ENDMETHOD.
For colour numbers to use in Web Dynpro ALV, we have to refer the below
o
steps.
CONFIGURE_ALV method code.
lo_cmp_usage =
ENDIF.

DATA:
lt_columns
ls_columns
LIKE LINE OF lt_columns,
l_column
TYPE REF TO cl_salv_wd_column.
ls_columns-r_column->set_cell_design_fieldname( value =
'CELLDESIGN' ).
lv_value->if_salv_wd_column_settings~delete_column( id =
'CELLDESIGN' ).
ENDLOOP.
ENDMETHOD.
Go to view ALV_ROW_COLOR_V.
o
Layout tab->Create View Container UI element to display ALV output.

of component controller to node DATA of ALV Interface Controller.
Go to window ALV_ROW_COLOR_W->Embed TABLE view of

SALV_WD_TABLE component in window as shown in the screen.
Web Dynpro ABAP- Change cell color in ALV

Go to Component Controller COMPONENTCONTROLLER.
Context tab->Create PA0002 node with cardinality 0..n as shown in the

picture. CELLDESIGN attribute is used to set colour of the cell.

Change ALV Configuration.

METHOD wddoinit .
ENDMETHOD.
GET_DATA method code

METHOD get_data .
DATA ls_pa0002 LIKE LINE OF
lt_pa0002.

SELECT *
FROM pa0002
UP TO 40 ROWS.
LOOP AT lt_pa0002 INTO ls_pa0002.
ls_pa0002-celldesign = cl_wd_table_column=>e_cell_designgoodvalue_light.
MODIFY lt_pa0002 FROM ls_pa0002.
ENDLOOP.
abap_true ).
ENDMETHOD.
CONFIGURE_ALV method code

lo_cmp_usage =
ENDIF.

DATA:
lt_columns
ls_columns
LIKE LINE OF lt_columns,
l_column
type REF TO cl_salv_wd_column.
CASE ls_columns-id.
WHEN 'PERNR'.
ls_columns-r_column->set_cell_design_fieldname( value = 'CELLDESIGN'
).
lv_value->if_salv_wd_column_settings~delete_column( id =
'CELLDESIGN' ).
ENDCASE.
ENDLOOP.
ENDMETHOD.
Go to view CELL_COLOR_V.
Layout tab->Create View Container UI element to display ALV output.

of component controller to node DATA of ALV Interface Controller.
Go to window CELL_COLOR_W->Embed TABLE view of SALV_WD_TABLE

Web Dynpro Selection-Screen
Select-Options in Web Dynpro ABAP
Select-Options in ABAP
Using Select-Options, the user can specify complex selection criteria. If the selection
criteria is complex, you need not write lengthy logical expressions in the select query,
which is solved by the select-options statement. Select-Options defines a range table
which is having four columns Sign, Option, Low and High.
SELECT-OPTIONS : so_pernr for pernr-pernr.
Select-Options in Web Dynpro ABAP
To show a select options in Web Dynpro ABAP, We have to use SAPs Standard
component WDR_SELECT_OPTIONS. Select options in Web Dynpro work the same
way as in ABAP reports.
Procedure to achieve SELECT OPTIONS for a field
Create Web Dynpro Component with Window and View.(Automatically View is

Define Component Use for the WDR_SELECT_OPTIONS under Used

Components tab of Web Dynpro Component.
Define Controller usage for WDR_SELECT_OPTIONS in the Properties tab of

view.
Create ViewContainerUIElement in the view Layout.
Do the following in WDDOINIT hook method.

o
Instantiate Used Component WDR_SELECT_OPTIONS.
Instantiate Used Component

Controller IWCI_WDR_SELECT_OPTIONS and and Call
methodINIT_SELECTION_SCREEN.
Create Range Table using IF_WD_SELECT_OPTIONS>CREATE_RANGE_TABLE.
Add Selection field by passing Range table and Field

to IF_WD_SELECT_OPTIONS-> ADD_SELECTION_FIELD .
Go to Window of the component->View->ViewContainerUIElement
Embed the view WND_SELECTION_SCREEN of Used

Component WDR_SELECT_OPTIONS intoViewContainerUIElement of Web Dynpro
Component.
Create Web Dynpro Application and Run.
Please Click here for Detail.
OVS Search Help in Select Option-Webdynpro ABAP

Steps to achieve the functionality:
We use event ON_OVS of Component WDR_SELECT_OPTIONS.
Create Web Dynpro Component with View and Window(Automatically View is

embedded into Window) and Save it as local object.
Define Component Use SELECT_OPT for the Used component

WDR_SELECT_OPTIONS under Used Components tab of Web Dynpro Component.
Go to View OVS_SEARCH_V->Properties tab->Define or Include Used

Controllers/ Components of Select Options.
Go to view OVS_SEARCH_V ->Context tab->Create node TAB_P0002 with

cardinality 0..n and attributes inside.
Go to view OVS_SEARCH_V ->Layout tab->Create ViewContainerUIElement to

hold Select-Option field.
o
Create ViewContainerUIElement to hold Select-Option field.
Create button->Create OnAction event to get the values entered in

Select-Option field and Display related records in the table.
Create Table UI element->Bind the Context node TAB_P0002 with table

UI element.
Go to view OVS_SEARCH_V ->Methods tab->Write the following code in

WDDOINIT hook method.
o
Instantiate Used Component WDR_SELECT_OPTIONS.
Instantiate Used Component Controller IWCI_WDR_SELECT_OPTIONS
and and Call method INIT_SELECTION_SCREEN.

Create Range Table using IF_WD_SELECT_OPTIONS-
>CREATE_RANGE_TABLE.
Add Selection field by passing Range table and Field to
IF_WD_SELECT_OPTIONS-> ADD_SELECTION_FIELD .
code
o
o
METHOD wddoinit .
lo_cmp_usage =
o
o
wd_this->wd_cpuse_select_opt( ).
ENDIF.
"Instantiate Used Controller and Call Init_selection_screen method.
DATA lo_interfacecontroller TYPE REF TO iwci_wdr_select_options .
DATA lv_r_helper_class TYPE REF TO if_wd_select_options.
wd_this->wd_cpifc_select_opt( ).
lv_r_helper_class = lo_interfacecontroller->init_selection_screen( ).
"Create Range table
DATA:rt_table TYPE REF TO
CALL METHOD lv_r_helper_class->create_range_table
o
o
o
o
data.
EXPORTING
i_typename
= 'PERSNO'
RECEIVING
rt_range_table = rt_table.
"Disable CANCEL, CHECK, RESET and COPY buttons
CALL METHOD lv_r_helper_class->set_global_options
EXPORTING
i_display_btn_cancel
= abap_false
i_display_btn_check
= abap_false
i_display_btn_reset
= abap_false
i_display_btn_execute = abap_false.
"Add range field to Selection screen
CALL METHOD lv_r_helper_class->add_selection_field
EXPORTING
i_id
= 'PERSNO'
it_result
= rt_table
i_value_help_type = if_wd_value_help_handler=>co_prefix_ovs.
o
o
ENDMETHOD.
Go to view OVS_SEARCH_V ->Methods tab->Write the below code for
ONACTIONSEARCH_EMP event handler method for button.

code
o
o
METHOD onactionsearch_emp .
lo_cmp_usage =
wd_this->wd_cpuse_select_opt( ).
ENDIF.
"Instantiate Used Controller and Call Init_selection_screen method.
DATA lo_interfacecontroller TYPE REF TO iwci_wdr_select_options .
DATA lv_r_helper_class TYPE REF TO if_wd_select_options.
wd_this->wd_cpifc_select_opt( ).
lv_r_helper_class = lo_interfacecontroller->init_selection_screen( ).
"Read Select option
DATA:rt_table TYPE REF TO data.
CALL METHOD lv_r_helper_class->get_range_table_of_sel_field
EXPORTING
i_id
RECEIVING
= 'PERSNO'
rt_range_table = rt_table.
"Populate EMP_ADD table
DATA lo_nd_tab_p0002 TYPE REF TO if_wd_context_node.
DATA lt_tab_p0002 TYPE wd_this->elements_tab_p0002.
FIELD-SYMBOLS: TYPE table.
o
o
ASSIGN rt_table->* TO <emp>.
SELECT *
FROM pa0002
INTO TABLE lt_tab_p0002
WHERE pernr IN <emp>.
"navigate from <context> to <tab_p0002> via lead selection
lo_nd_tab_p0002 = wd_context->get_child_node( name = wd_this>wdctx_tab_p0002 ).
lo_nd_tab_p0002->bind_table( new_items = lt_tab_p0002

o
o
o
o
ENDMETHOD.
Go to view OVS_SEARCH_V ->Methods tab-> Create one Event Handler
method OVS_ON_SO ->Select the event ON_OVS of component

WDR_SELECT_OPTIONS using F4 help for Event field.
Double click on OVS_ON_SO method->Write the below code.
o
o
o
METHOD ovs_on_so .
TYPES:
BEGIN OF ty_p0002,
pernr TYPE pa0002-pernr,
endda TYPE pa0002-endda,
begda TYPE pa0002-begda,
nachn TYPE pa0002-nachn,
vorna TYPE pa0002-vorna,
titel TYPE pa0002-titel,
o
o
END OF ty_p0002.
DATA:
ls_p0002 TYPE ty_p0002,
lt_p0002 TYPE STANDARD TABLE OF ty_p0002.
o
o
FIELD-SYMBOLS:
<lt_ovs_result>
LIKE lt_p0002,
<p0002>
LIKE LINE OF <lt_ovs_result>,
<lt_sel_opt_result> TYPE STANDARD TABLE.
o
o
o
CASE i_ovs_data-m_ovs_callback_object->phase_indicator.
"Set Configuration
WHEN if_wd_ovs=>co_phase_0.
"Preassign Entry Values
o
o
"Fill Value List

SELECT pernr
nachn
vorna
FROM pa0002
INTO CORRESPONDING FIELDS OF TABLE lt_p0002
UP TO 200 ROWS.
i_ovs_data-m_ovs_callback_object->set_output_table( output =
lt_p0002 ).
o
o
"Value Return
ASSIGN i_ovs_data-m_ovs_callback_object->selection->* TO <p0002>.
ASSIGN i_ovs_data-mt_selected_values->* TO <lt_sel_opt_result>.
INSERT <p0002>-pernr INTO TABLE <lt_sel_opt_result>.
WHEN OTHERS.
ENDCASE.
ENDMETHOD.
o
o
Go to Window OVS_SEARCH_W->Open view OVS_SEARCH_V ->Right

click on VCE ViewContainerUIElement->Embed view WND_SELECTION_SCREEN of
WDR_SELECT_OPTIONS component.
OVS Input help for field - Web Dynpro ABAP

Steps to achieve functionality

Define Component Use OVS_PERNR for the Used component WDR_OVS under
Go to View OVS_V->Properties tab->Define or Include Used Controllers/

Components of OVS.
Go to View OVS_V->Context tab

o
Create node N1.
Create one attribute PERNR of type NUM8(NUMC -8)
Select Input Help mode as Object Value Selector
Select OVS Component usage OVS_PERNR from F4 help.
Go to View OVS_V->Layout tab->Create one input and bind it with node N1

attribute PERNR.
Go to View OVS_V->Methods tab->Give method name as OVS_ON_FIELD,

method type Event Handler and Select Event OVS of Component Usage
OVS_PERNR from F4 help as shown in the figure.
Double click on OVS_ON_FIELD method->Below code is auto generated.
Auto Generated code

method OVS_SS .
* declare data structures for the fields to be displayed and
* for the table columns of the selection list, if necessary
types:
begin of lty_stru_input,
*
add fields for the display of your search input here

field1 type string,
end of lty_stru_input.
types:
begin of lty_stru_list,
add fields for the selection list here

column1 type string,
end of lty_stru_list.
data: ls_search_input
type lty_stru_input,
lt_select_list
type standard table of lty_stru_list,
ls_text
type wdr_name_value,
lt_label_texts
type wdr_name_value_list,
lt_column_texts
type wdr_name_value_list,
lv_window_title
type string,
lv_group_header
type string,
lv_table_header
type string.
field-symbols:
type lty_stru_input,
type lty_stru_list.
case ovs_callback_object->phase_indicator.
when if_wd_ovs=>co_phase_0.
"configuration phase, may be omitted
in this phase you have the possibility to define the texts,
if you do not want to use the defaults (DDIC-texts)
ls_text-name = `FIELD1`.
"must match a field name of search
ls_text-value = `MYTEXT`. "wd_assist->get_text( `001` ).

insert ls_text into table lt_label_texts.
ls_text-name = `COLUMN1`.
"must match a field in list structure
ls_text-value = `MYTEXT2`. "wd_assist->get_text( `002` ).

insert ls_text into table lt_column_texts.
lv_window_title = wd_assist->get_text( `003` ).
lv_group_header = wd_assist->get_text( `004` ).
lv_table_header = wd_assist->get_text( `005` ).
ovs_callback_object->set_configuration(
label_texts
= lt_label_texts
column_texts = lt_column_texts
group_header = lv_group_header
window_title = lv_window_title
table_header = lv_table_header
col_count
= 2
row_count
= 20 ).
"set search structure and defaults
In this phase you can set the structure and default values
of the search structure. If this phase is omitted, the search
fields will not be displayed, but the selection table is
displayed directly.
Read values of the original context (not necessary, but you
may set these as the defaults). A reference to the context
element is available in the callback object.
ovs_callback_object->context_element->get_static_attributes(
importing static_attributes = ls_search_input ).
*
pass the values to the OVS component

ovs_callback_object->set_input_structure(
input = ls_search_input ).
*
If phase 1 is implemented, use the field input for the
selection of the table.
If phase 1 is omitted, use values from your own context.
if ovs_callback_object->query_parameters is not bound.

******** TODO exception handling
endif.
assign ovs_callback_object->query_parameters->*
to .
if not
is assigned.

endif.
call business logic for a table of possible values
lt_select_list = ???
ovs_callback_object->set_output_table( output = lt_select_list ).
*
apply result
if ovs_callback_object->selection is not bound.

endif.
assign ovs_callback_object->selection->* to .
if
*
is assigned.
ovs_callback_object->context_element->set_attribute(
name
= `COLUMN1`
value = -column1 ).
or
ovs_callback_object->context_element->set_static_attributes(
static_attributes =
).
endif.
endcase.
endmethod.
Change the code according to our requirement and make it workable.

METHOD ovs_on_field .
TYPES:
BEGIN OF lty_stru_list,
*
add fields for the selection list here

pernr TYPE pa0002-pernr,
nachn TYPE pa0002-nachn,
vorna TYPE pa0002-vorna,
END OF lty_stru_list.
DATA: lt_select_list
TYPE STANDARD TABLE OF lty_stru_list,
ls_text
TYPE wdr_name_value,
lt_label_texts
TYPE wdr_name_value_list,
lt_column_texts
TYPE wdr_name_value_list.
FIELD-SYMBOLS:
TYPE lty_stru_list.
CASE ovs_callback_object->phase_indicator.
"configuration phase, may be omitted
"set search structure and defaults
*
If phase 1 is implemented, use the field input for the
selection of the table.
If phase 1 is omitted, use values from your own context.
call business logic for a table of possible values

SELECT pernr
nachn
vorna
FROM pa0002
INTO CORRESPONDING FIELDS OF TABLE lt_select_list
UP TO 200 ROWS.
ovs_callback_object->set_output_table( output = lt_select_list ).
apply result
ASSIGN ovs_callback_object->selection->* TO .
IF
IS ASSIGNED.
ovs_callback_object->context_element->set_static_attributes(
static_attributes =
).
ENDIF.
ENDCASE.
ENDMETHOD.
Run the Web Dynpro Application.
Web Dynpro ABAP - Manipulating the context dynamically

IF_WD_CONTEXT_NODE_INFO Interface: This interface is used to modify controller contexts
at runtime. The interface is the interface of the metadata of a Context node and is used to
describe what the data looks like.
Example: Let us take one statically defined context.
Steps to create Context node and underneath attributes
Get the reference to the meta data of the context node that will act as the new node's
parent.It means we are getting reference to the meta data of the root node.
DATA LO_ROOT_NODE_INFO TYPE REF TO IF_WD_CONTEXT_NODE_INFO.

"Get meta data info of ROOT context node
LO_ROOT_NODE_INFO = WD_CONTEXT->GET_NODE_INFO( ).
To define new node, call method LO_ROOT_NODE_INFO->add_new_child_node.

DATA LO_IT001_NODE_INFO TYPE REF TO IF_WD_CONTEXT_NODE_INFO.
"Create node with name 'IT0001' without any attributes
CALL METHOD LO_ROOT_NODE_INFO->ADD_NEW_CHILD_NODE
EXPORTING
NAME
= 'IT0001'
IS_MANDATORY
= ABAP_FALSE
IS_MANDATORY_SELECTION
= ABAP_FALSE
IS_MULTIPLE
= ABAP_FALSE
IS_MULTIPLE_SELECTION
= ABAP_FALSE
IS_SINGLETON
= ABAP_FALSE
IS_INITIALIZE_LEAD_SELECTION = ABAP_TRUE
IS_STATIC
RECEIVING
CHILD_NODE_INFO
= ABAP_TRUE
= LO_IT001_NODE_INFO.
Node IT0001 is ready now. We need to create context attributes in the node IT0001.
DATA LS_ATTRIBUTE
TYPE
WDR_CONTEXT_ATTRIBUTE_INFO.
"Create node with name 'IT0001' without any attributes
EXPORTING
NAME
= 'IT0001'
IS_MANDATORY
= ABAP_FALSE
= ABAP_FALSE
IS_MULTIPLE
= ABAP_FALSE
= ABAP_FALSE
IS_SINGLETON
= ABAP_FALSE
IS_STATIC
= ABAP_TRUE
RECEIVING
CHILD_NODE_INFO
"Define Attribute PERNR
LS_ATTRIBUTE-NAME
= 'PERNR'.
LS_ATTRIBUTE-TYPE_NAME
= 'PERNR_D'.
LS_ATTRIBUTE-VALUE_HELP_MODE = '0'.
CALL METHOD LO_IT001_NODE_INFO->ADD_ATTRIBUTE
EXPORTING
ATTRIBUTE_INFO = LS_ATTRIBUTE.
"Define Attribute BUKRS
LS_ATTRIBUTE-NAME
= 'BUKRS'.
= 'BUKRS'.
EXPORTING
"Define Attribute PERNR
LS_ATTRIBUTE-NAME
= 'ENAME'.
= 'EMNAM'.
EXPORTING
Creating a Context Node and Context Attributes from a Structure:

An ABAP Dictionary flat structure type (structure, database view or transparent table) can be
passed to the method using the parameter static_element_type. All attributes for this structure
are created automatically.
Get the reference(LO_ROOT_NODE_INFO) to the meta data of the context node that
will act as the new node's parent.It means we are getting reference to the meta data of the
root node.
To define new node, call method LO_ROOT_NODE_INFO->ADD_NEW_CHILD_NODE.
Use parameter STATIC_ELEMENT_TYPE to pass the name of DDIC structure(PA0001)

to the method LO_ROOT_NODE_INFO->ADD_NEW_CHILD_NODE.

DATA LS_ATTRIBUTE
TYPE
WDR_CONTEXT_ATTRIBUTE_INFO.
" Get meta data info of ROOT context node
" Create node with name 'IT0001' of DDIC type PA0001 with all
attributes
EXPORTING
STATIC_ELEMENT_TYPE
= 'PA0001'
NAME
= 'IT0001'
IS_MANDATORY
= ABAP_FALSE
= ABAP_FALSE
IS_MULTIPLE
= ABAP_FALSE
= ABAP_FALSE
IS_SINGLETON
= ABAP_FALSE
RECEIVING
CHILD_NODE_INFO
Navigation Between Two Views Web dynpro ABAP

Points to remember
Navigation between different views is enabled by plugs.

Plug types
1). Inbound plugs
2). Outbound plugs
To navigate from one view to another, each outbound plug from the first view
must be linked with an inbound plug of the second view with the help of a navigation
link.A plug is always a junction used for accessing or exiting a view.
You can trigger a specific action for example, by clicking a button which
triggers navigation. As a consequence, the previously displayed view disappears from
the screen and a second view is displayed.
Example program
-Web dynpro component with two views. Select or give employee number in the input
field of first view and click on button to go to second view and display given input field in
the first view and click on button on second view to back to first view.
Steps involved
Create Web Dynpro component with one View and one Window and Save as
local object.
Go to Component Controller -> Context tab -> Create node N1 and one attribute
PERNR inside.
Go to view FIRST_VIEW ->Context tab -> Map component controller context to

View context as shown.
Go to view FIRST_VIEW ->Layout tab
--> Create Input element for Personal number(PERNR) and Bind with node N1PERNR
--> Create Button element to trigger action. Action to go to SECOND_VIEW.
--> Create OnAction event GO_TO_2ND_VIEW for button as shown in the print
screen.
Create view SECOND_VIEW
Go to view SECOND_VIEW ->Context tab -> Map component controller context

to View context as shown.
Go to view SECOND_VIEW ->Layout tab
--> Create Input element for Personal number(PERNR) and Bind with node N1PERNR
--> Create Button element to trigger action. Action to go to FIRST_VIEW.
--> Create OnAction event GO_TO_1ST_VIEW for button as shown in the print
screen.
Go to view FIRST_VIEW ->Create two plugs
--> Outbound plug GOTO_SECOND_VIEW to navigate to second view.
--> Inbound plug FROM_2ND_VIEW to navigate from second view.
Go to view SECOND_VIEW ->Create two plugs
--> Inbound plug FROM_1ST_VIEW to navigate from first view.
--> Outbound plug GOTO_FIRST_VIEW to navigate to first view.
Go to window ->Embed SECOND_VIEW by drag and drop method as shown - >

Save -> Open the views, For every View, two plugs are appeared one is for outbound
and another is for inbound.
Right click on outbound plug(RED in color)

GOTO_SECOND_VIEW of FIRST_VIEW ->Click on Create Navigation Link and
follow the steps.
Right click on outbound plug(RED in color) GOTO_FIRST_VIEW of

SECOND_VIEW ->Click on Create Navigation Link and follow the steps.
Outbound plugs are always starting points for navigation.
Go to view FIRST_VIEW ->Fire outbound plug GOTO_SECOND_VIEW in

method ONACTIONGO_TO_2ND_VIEW.
method ONACTIONGO_TO_2ND_VIEW .
wd_this->fire_goto_second_view_plg( ).
endmethod.
Go to view SECOND_VIEW ->Fire outbound plug GOTO_FIRST_VIEW in

method ONACTIONGO_TO_1ST_VIEW.
method ONACTIONGO_TO_1ST_VIEW .
wd_this->fire_goto_first_view_plg( ).
endmethod.
Create Web Dynpro application and Save
Run Web Dynpro application.
Create Transaction code for Webdynpro ABAP

Application
Go to Transaction SE93.
Give the Transaction code to be created and press CREATE button.
Give the description and Select the radio button Transaction with parameters.
Give transaction WDYID and check Initial screen skip check box and press
ENTER.
Scroll down to Default Values table control and enter as shown in the screen
shot.
Save it as local object.
Execute the transaction and web page is displayed.
THANK YOU

Web Dynpro ABAP

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Dynpro ABAP

Uploaded by

Copyright:

Available Formats

Web Dynpro ABAP

SAP standard UI technologies

WDA - Web Dynpro ABAP applications

WDJ - Web Dynpro Java applications

BSP - Buiness Server Pages applications

SAP GUI - Classic dynpro programming model of SAP

SAP Interactive forms and print forms by Adobe

SAP Web Dynpro for ABAP and it's advantages

The use of declarative and graphical tools significantly reduces the

Web Dynpro supports a structured design process

Strict separation between layout and business data

Reuse and better maintainability by using components

Automatic data transport using data binding

Automatic input check

Automatic operation of the Web Dynpro application using the keyboard

User interface accessibility is supported

Full integration in the reliable ABAP development environment

SAP Web Dynpro ABAP Architecture

Graphical Development Tools

Separation of Business and Application Logic

Conversion of the Model-View-Controller Programming Model

SAP Web Dynpro ABAP tools in Workbench

Web Dynpro Code Wizard

Web Dynpro Text browser

Web Dynpro ABAP run time analysis

SAP Web Dynpro Hook methods and usage

Component controller hook methods

Handling for Suspending and Resuming

Error Handling Before Navigation

Controller Clean-Up Method

Controller Initialization Method

View Controller hook methods

Method for non-action specific operations

Method for Validation of User Input

Controller Clean-Up Method

Controller Initialization Method

Method for Modifying the View Before

Method for Modifying the Context Menu

Window controller hook methods

Controller Clean-Up Method

Controller Initialization Method

Handling For Closing of Window

Handling For Opening of Window

Web Dynpro UI elements and Layout design example

The below example program describes

How to design UI elements

How to use different Layouts

How to use Table UI element

How to pass data to UI elements i.e Data binding

SAP Web Dynpro ABAP Layouts

Left to right, across the screen

Arranged by number of columns (e.g.colCount

Number of columns not fixed. Eachelement

Row by row.Need to specify new row items.

Populate ItemListBox - Web Dynpro ABAP

Go to Component Controller COMPONENTCONTROLLER.

Methods tab->Write the code in WDDOINIT to populate data to show countries

DATA lt_country TYPE wd_this->elements_country.

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

"Get selected Elements

DATA lo_nd_country TYPE REF TO if_wd_context_node.

DATA lt_country TYPE wd_this->elements_country.

data: ls_country TYPE wd_this->element_country.

DATA lt_elements TYPE wdr_context_element_set.