Académique Documents
Professionnel Documents
Culture Documents
Introduction
ITS
- HTML pages
Advantages:
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.
Metamodel Concept
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.
Component editor
Controller Editor
View Editor
Window Editor
Function
WDDOBEFORENAVIGATION
WDDOEXIT
WDDOINIT
WDDOPOSTPROCESSING
Prepare Output
WDDOBEFOREACTION
WDDOEXIT
WDDOINIT
WDDOMODIFYVIEW
WDDOONCONTEXTMENU
WDDOINIT
WDDOONCLOSE
WDDOONOPEN
User Interface
Grid Layout
Matrix Layout
Row Layout
(RowHeadData)
Frame Layout
Program steps
Create Web Dynpro Component with Window and View(Automatically View is embedded
into Window).
T005T structure).
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.
GET_SELECTED_RECS code
METHOD get_selected_recs .
data: lt_ctry
TYPE wd_this->elements_country.
wd_this->wdctx_country ).
lt_elements = lo_nd_country->get_selected_elements(
).
ls_elements->get_static_attributes( IMPORTING
static_attributes = ls_country ).
selection
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.
METHOD onactiondisplay_selected .
DATA lo_componentcontroller TYPE REF TO
ig_componentcontroller .
lo_componentcontroller =
wd_this-
>get_componentcontroller_ctr( ).
lo_componentcontroller->get_selected_recs(
ENDMETHOD.
).
Run application.
Go to View -> Context -> Create node COUNTRIES with cardinality 0..n.
Go to Context tab -> Create node and attribute inside the node.
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.
For domains, that have direct values assigned everything is filled automatically.
If domain has values indirectly through value table, no values are filled.
If you mention label for drop down box, you should mention Lable for attribute of
LABEL UI element.
Create Web Dynpro Component with Window and View(Automatically View is embedded
into Window).
Change mode
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.
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.
" get element via lead selection
LO_EL_CONTEXT = WD_CONTEXT->GET_ELEMENT( ).
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 .
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.
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.
Run application
Go to View MAIN_V -> Go to Context tab -> Create node N1 and include few
attributes as shown in the screen.
Create GROUP element -> Change Layout to GridLayout & Layout Data
to MatrixHeadData
Create TextView elements -> Bind with Context node N1 as shown below.
METHOD wddoinit .
DATA ls_n1
TYPE wd_this->element_n1.
>wdctx_n1 ).
lo_el_n1 = lo_nd_n1->get_element( ).
SELECT SINGLE *
FROM pa0002
ENDMETHOD.
Create one more view SEC_V->Create one PAGE_HEADER element.
Steps to achieve
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.
Create Webdynpro application and Run the application. Table is displayed with
data in window.
Please Click Here table display
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.
Change mode
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 all attributes of node IT0001_FILTER and replace with STRING type.
Go to view->Attributes tab.
o
Go to view->Layout tab
o
Bind context node IT0001 with table UI element. Follow the below steps.
Set filterValue property for each column attribute of table UI element. Similar
Insert Table Toolbar and ToolBarToggleButton element into table UI element for
filter.
Go to view->Actions tab.
o
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.
to
"&-----------------------------------------------------------------------*
" 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.
`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.
Simple method.
Go to Context tab Create node e.g. EMP_ADD 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_DAT and select type TABLE Save.
Bind Context node with Table UI element. Right click on Table UI element
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 lt_emp_add
TYPE wd_this->elements_emp_add.
"Fetch data
SELECT *
FROM pa2006
UP TO 50 ROWS.
ENDMETHOD.
Go to Context tab Create node e.g. EMP_ADD 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.TAB1 and select type TABLE Save.
Bind Context node with Table UI element. Right click on Table UI element
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 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
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 Layout tab
1.
2.
3.
Create File Upload UI element inside Group and bind with context node
FILE.
4.
method ONACTIONUPLOAD_FILE .
DATA lo_componentcontroller TYPE REF TO ig_componentcontroller .
lo_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 wd_this->elements_emp_det,
lo_el_file
DATA:
ls_file
TYPE wd_this->element_file,
lt_bin
lt_txt
ls_txt
lv_outlen
TYPE i.
>wdctx_file ).
= ls_file-file_contents
IMPORTING
output_length = lv_outlen
TABLES
binary_tab
= lt_bin.
= lt_bin
text_tab
= lt_txt.
ls_emp_det.
ENDLOOP.
* navigate from
to
ENDMETHOD.
When we specify Window name and View name when we create web dynpro
component, View is embedded in Window.
Go to Component Controller
o
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.
*
).
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.
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
*
).
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
method WDDOINIT .
DATA lo_componentcontroller TYPE REF TO ig_componentcontroller .
lo_componentcontroller =
wd_this->get_componentcontroller_ctr( ).
lo_componentcontroller->get_data( ).
endmethod.
Message Handling
Method
Description
REPORT_EXCEPTION
REPORT_SUCCESS
REPORT_WARNING
Reports a Warning
REPORT_ERROR_MESSAGE
REPORT_MESSAGE
Reports a message
REPORT_T100_MESSAGE
REPORT_FATAL_EXCEPTION
REPORT_FATAL_ERROR_MESSAGE
Parameters
REPORT_ATTRIBUTE_ERROR_MESSAG
E
REPORT_ATTRIBUTE_EXCEPTION
REPORT_ATTRIBUTE_T100_MESSAGE
REPORT_ELEMENT_ERROR_MESSAGE
REPORT_ATTRIBUTE_MESSAGE
REPORT_ELEMENT_EXCEPTION
REPORT_ELEMENT_T100_MESSAGE
IS_EMPTY
CLEAR_MESSAGES
HAS_VAL_ERRORS_FOR_WINDOW
REMOVE_MESSAGE
GET_MESSAGES
HAS_VALIDATION_ERRORS
GET_MESSAGE_FOR_ID
Message Manager will display the message on view in the Message area.
Example program
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.
METHOD onactionshow_message .
* Context related declaration
DATA:
lo_nd_n1
lo_el_n1
ls_n1
TYPE wd_this->element_n1.
ls_t591s
TYPE t591s,
lv_msg
TYPE string.
t591s
INTO ls_t591s
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.
Integration
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.
2.
3.
4.
5.
Define Component Controller Context ->Two nodes 1). INPUT - PERNR attribute
to get input
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.
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
DATA lo_el_input
DATA ls_input
TYPE wd_this->element_input.
navigate from
to
ENDMETHOD.
METHOD onactionget_emp_address .
DATA lo_componentcontroller TYPE REF TO ig_componentcontroller .
lo_componentcontroller =
wd_this->get_componentcontroller_ctr( ).
lo_componentcontroller->get_emp_add( ).
ENDMETHOD.
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
Define Component Use ALV for the Used component SALV_WD_TABLE under
Used Components tab of Web Dynpro Component.
).
ENDMETHOD.
data lt_pa0006
type wd_this->elements_pa0006.
endmethod.
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( ).
lo_interfacecontroller =
wd_this->wd_cpifc_alv( ).
DATA:
lr_column_settings TYPE REF TO if_salv_wd_column_settings,
lr_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( ).
lr_table_settings->set_read_only( abap_false ).
ENDMETHOD.
Go to view CELL_EDIT_V
o
wd_this->get_componentcontroller_ctr( ).
lo_componentcontroller->change_alv_config(
).
endmethod.
1.
2.
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.
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
Get the ALV configuration model and with it the object model, field objects,
and column objects.
lt_alv_tab
TYPE wd_this->elements_alv_tab.
>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.
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.
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.
2.
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.
lo_cmp_usage =
wd_this->wd_cpuse_alv_component( ).
IF lo_cmp_usage->has_active_component( ) IS INITIAL.
lo_cmp_usage->create_component( ).
ENDIF.
"Get config model
DATA lo_interfacecontroller TYPE REF TO iwci_salv_wd_table .
lo_interfacecontroller =
wd_this->wd_cpifc_alv_component( ).
lr_config_table-
lr_config_table-
lr_config_table-
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
lr_column_settings
lr_field_settings
lr_aggr_rule
lr_sort_rule
lr_column
lr_field_amnt
lr_field_hrs
lr_field_trfgb
lt_column
TYPE salv_wd_t_column_ref,
ls_column
TYPE salv_wd_s_column_ref.
DATA:
DATA:
wd_this->wd_cpuse_alv_component( ).
wd_this->wd_cpifc_alv_component( ).
= lr_column_settings->get_columns( ).
= lr_field_amnt.
= lr_aggr_rule.
WHEN 'DIVGV'.
CALL METHOD lr_config_table->if_salv_wd_field_settings~get_field
EXPORTING
fieldname = 'DIVGV'
RECEIVING
value
= lr_field_hrs.
= lr_aggr_rule.
WHEN 'TRFGB'.
CALL METHOD lr_config_table->if_salv_wd_field_settings~get_field
EXPORTING
fieldname = 'TRFGB'
RECEIVING
value
= lr_field_trfgb.
= if_salv_wd_c_sort=>sort_order_ascending
group_aggregation = abap_true
RECEIVING
value
= lr_sort_rule.
ENDCASE.
ENDLOOP.
ENDMETHOD.
Define Component Use ALV for the Used component SALV_WD_TABLE under
Used Components tab of Web Dynpro Component.
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.
FROM pa0002
INTO CORRESPONDING FIELDS OF TABLE lt_pa0002
UP TO 20 ROWS.
lo_nd_pa0002->bind_table( new_items = lt_pa0002 set_initial_elements =
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
* TOP-OF-LIST
**...create top grid
CREATE OBJECT lr_grid
EXPORTING
columns = 5.
lr_grid->create_text(
EXPORTING
row = 1
column = 2
rowspan = 1
colspan = 1
text = 'Cell 1,2' ).
lr_grid->create_text(
EXPORTING
row = 1
column = 3
rowspan = 1
colspan = 1
text = 'Cell 1,3' ).
lr_grid->create_text(
EXPORTING
row = 1
column = 4
rowspan = 1
colspan = 1
text = 'Cell 1,4' ).
lr_grid->create_text(
EXPORTING
row = 1
column = 5
rowspan = 1
colspan = 1
text = 'Cell 1,5' ).
*...fill 2nd row
lr_grid->create_text(
EXPORTING
row = 2
column = 1
rowspan = 1
colspan = 1
text = 'Cell 2,1' ).
lr_grid->create_text(
EXPORTING
row = 2
column = 2
rowspan = 1
colspan = 1
text = 'Cell 2,2' ).
lr_grid->create_text(
EXPORTING
row = 2
column = 3
rowspan = 1
colspan = 1
text = 'Cell 2,3' ).
lr_grid->create_text(
EXPORTING
row = 2
column = 4
rowspan = 1
colspan = 1
text = 'Cell 2,4' ).
lr_grid->create_text(
EXPORTING
row = 2
column = 5
rowspan = 1
colspan = 1
text = 'Cell 2,5' ).
"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 ).
= 'CONTENT'.
ENDMETHOD.
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
* TOP-OF-LIST
**...create top grid
create object lr_grid
exporting
columns = 5.
lr_grid->create_text(
exporting
row = 1
column = 2
rowspan = 1
colspan = 1
lr_grid->create_text(
exporting
row = 1
column = 3
rowspan = 1
colspan = 1
text = 'Cell 1,3' ).
lr_grid->create_text(
exporting
row = 1
column = 4
rowspan = 1
colspan = 1
text = 'Cell 1,4' ).
lr_grid->create_text(
exporting
row = 1
column = 5
rowspan = 1
colspan = 1
text = 'Cell 1,5' ).
*...fill 2nd row
lr_grid->create_text(
exporting
row = 2
column = 1
rowspan = 1
colspan = 1
text = 'Cell 2,1' ).
lr_grid->create_text(
exporting
row = 2
column = 2
rowspan = 1
colspan = 1
text = 'Cell 2,2' ).
lr_grid->create_text(
exporting
row = 2
column = 3
rowspan = 1
colspan = 1
text = 'Cell 2,3' ).
lr_grid->create_text(
exporting
row = 2
column = 4
rowspan = 1
colspan = 1
lr_grid->create_text(
exporting
row = 2
column = 5
rowspan = 1
colspan = 1
text = 'Cell 2,5' ).
"Navigate from
to
= 'CONTENT'.
endmethod.
Define one event handler method ON_CLICK in view controller for ON_CLICK
event of SALV_WD_TABLE interface controller.
Create One Web Dynpro application for ALV output. Click here to check on
how to create.
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
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
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
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
o
o
o
o
o
o
o
o
Program steps
Define Component Use ALV for the Used component SALV_WD_TABLE under
Used Components tab of Web Dynpro Component.
lt_pa0002.
ENDMETHOD.
For colour numbers to use in Web Dynpro ALV, we have to refer the below
o
steps.
METHOD configure_alv .
"Instantiate Used Component
DATA lo_cmp_usage TYPE REF TO if_wd_component_usage.
lo_cmp_usage =
wd_this->wd_cpuse_alv( ).
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( ).
TYPE salv_wd_t_column_ref,
ls_columns
l_column
lr_column_settings ?= lv_value.
lt_columns = lr_column_settings->get_columns( ).
LOOP AT lt_columns INTO ls_columns.
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
Define Component Use ALV for the Used component SALV_WD_TABLE under
Used Components tab of Web Dynpro Component.
ENDMETHOD.
lt_pa0002.
ENDMETHOD.
wd_this->wd_cpuse_alv( ).
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( ).
TYPE salv_wd_t_column_ref,
ls_columns
l_column
lr_column_settings ?= lv_value.
lt_columns = lr_column_settings->get_columns( ).
LOOP AT lt_columns INTO ls_columns.
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.
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_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 =
IF lo_cmp_usage->has_active_component( ) IS INITIAL.
o
o
wd_this->wd_cpuse_select_opt( ).
lo_cmp_usage->create_component( ).
ENDIF.
lo_interfacecontroller =
wd_this->wd_cpifc_select_opt( ).
lv_r_helper_class = lo_interfacecontroller->init_selection_screen( ).
o
o
o
o
data.
EXPORTING
i_typename
= 'PERSNO'
RECEIVING
rt_range_table = rt_table.
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.
EXPORTING
i_id
= 'PERSNO'
it_result
= rt_table
i_value_help_type = if_wd_value_help_handler=>co_prefix_ovs.
o
o
ENDMETHOD.
o
o
METHOD onactionsearch_emp .
lo_cmp_usage =
IF lo_cmp_usage->has_active_component( ) IS INITIAL.
wd_this->wd_cpuse_select_opt( ).
lo_cmp_usage->create_component( ).
ENDIF.
lo_interfacecontroller =
wd_this->wd_cpifc_select_opt( ).
lv_r_helper_class = lo_interfacecontroller->init_selection_screen( ).
EXPORTING
i_id
RECEIVING
= 'PERSNO'
rt_range_table = rt_table.
o
o
SELECT *
FROM pa0002
o
o
o
o
ENDMETHOD.
o
o
o
METHOD ovs_on_so .
TYPES:
BEGIN OF ty_p0002,
o
o
END OF ty_p0002.
DATA:
o
o
FIELD-SYMBOLS:
<lt_ovs_result>
LIKE lt_p0002,
<p0002>
o
o
o
CASE i_ovs_data-m_ovs_callback_object->phase_indicator.
"Set Configuration
WHEN if_wd_ovs=>co_phase_0.
WHEN if_wd_ovs=>co_phase_1.
o
o
SELECT pernr
nachn
vorna
FROM pa0002
UP TO 200 ROWS.
i_ovs_data-m_ovs_callback_object->set_output_table( output =
lt_p0002 ).
o
o
"Value Return
WHEN if_wd_ovs=>co_phase_3.
WHEN OTHERS.
ENDCASE.
ENDMETHOD.
o
o
Define Component Use OVS_PERNR for the Used component WDR_OVS under
Used Components tab of Web Dynpro Component.
data: ls_search_input
type lty_stru_input,
lt_select_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.
ls_text-name = `FIELD1`.
ls_text-name = `COLUMN1`.
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 ).
when if_wd_ovs=>co_phase_1.
In this phase you can set the structure and default values
displayed directly.
ovs_callback_object->context_element->get_static_attributes(
importing static_attributes = ls_search_input ).
*
when if_wd_ovs=>co_phase_2.
*
is assigned.
lt_select_list = ???
when if_wd_ovs=>co_phase_3.
*
apply result
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.
DATA: lt_select_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.
WHEN if_wd_ovs=>co_phase_0.
WHEN if_wd_ovs=>co_phase_1.
WHEN if_wd_ovs=>co_phase_2.
*
apply result
ASSIGN ovs_callback_object->selection->* TO .
IF
IS ASSIGNED.
ovs_callback_object->context_element->set_static_attributes(
static_attributes =
).
ENDIF.
ENDCASE.
ENDMETHOD.
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.
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 LO_ROOT_NODE_INFO TYPE REF TO IF_WD_CONTEXT_NODE_INFO.
DATA LO_IT001_NODE_INFO TYPE REF TO IF_WD_CONTEXT_NODE_INFO.
DATA LS_ATTRIBUTE
TYPE
WDR_CONTEXT_ATTRIBUTE_INFO.
"Get meta data info of ROOT context node
LO_ROOT_NODE_INFO = WD_CONTEXT->GET_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
= ABAP_TRUE
RECEIVING
CHILD_NODE_INFO
= LO_IT001_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'.
LS_ATTRIBUTE-TYPE_NAME
= 'BUKRS'.
LS_ATTRIBUTE-VALUE_HELP_MODE = '0'.
CALL METHOD LO_IT001_NODE_INFO->ADD_ATTRIBUTE
EXPORTING
ATTRIBUTE_INFO = LS_ATTRIBUTE.
"Define Attribute PERNR
LS_ATTRIBUTE-NAME
= 'ENAME'.
LS_ATTRIBUTE-TYPE_NAME
= 'EMNAM'.
LS_ATTRIBUTE-VALUE_HELP_MODE = '0'.
CALL METHOD LO_IT001_NODE_INFO->ADD_ATTRIBUTE
EXPORTING
ATTRIBUTE_INFO = LS_ATTRIBUTE.
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 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.
--> Create Input element for Personal number(PERNR) and Bind with node N1PERNR
--> Create OnAction event GO_TO_2ND_VIEW for button as shown in the print
screen.
--> Create Input element for Personal number(PERNR) and Bind with node N1PERNR
--> Create OnAction event GO_TO_1ST_VIEW for button as shown in the print
screen.
method ONACTIONGO_TO_2ND_VIEW .
wd_this->fire_goto_second_view_plg( ).
endmethod.
method ONACTIONGO_TO_1ST_VIEW .
wd_this->fire_goto_first_view_plg( ).
endmethod.
Go to Transaction SE93.
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.
THANK YOU