In this step-by-step procedure you will create a simple Web Dynpro component, which consists of one view. In the view you will create a Group. A Label, Input Field and Button are added to the group. For the view, you will create a view context, which is linked to the Input Field on the view layout, which contains a default value SFLIGHT. Depending on the default value a dynamic Node is created in the context at runtime. Then a UI Element of type Group is created dynamically. And a table is also created dynamically and bound with the new context node. This table is added to the new group. This table will be displayed in the browser at runtime. Furthermore, you will create a Web Dynpro application for this simple Web Dynpro component, which can be run in the browser.
Procedure
Creating a Web Dynpro Component
1. Start
ABAP Workbench (SE80) and select +Web- Dynpro-Comp./ Intf . + from the
available object list.
2. To create a new Web Dynpro
component, enter the name Z_DYN_UI
for the new component in the selection dialog of the object list, and select Display.
3. In the dialog box that appears, you can enter a
description of the new object and select as type +Web Dynpro
Component+. In this dialog you also have the chance to maintain the name of
the default window.
Assign the component Z_DYN_UI to package $TMP.
As a
result, you can now see the newly created Web Dynpro
component Z_DYN_UI object tree, which
contains the objects component controller, component interface (which contains
the entries interface controller and interface views) and windows. You can
access the objects using double-click. </p>
Creating a new View and Assigning the
View to the Window
1. Click on
the Web Dynpro component Z_DYN_UI in the object tree and open the context menu to create a
new view.
2. Create a view VIEW1.
The +View Editor +will be started on the right side
of the Workbench window. In order to open the +Layout +tab and the +View
Designer+, a popup appears asking for user and password for the SAP Web
Application Server. Use the same user/password which you used for logon to the
SAP system.
3. Save
the VIEW1.
4. Now
open window Z_DYN_UI by double clicking.
Switch to change mode. Right click
on Z_DYN_UI and select EMBED VIEW.
Select view VIEW1 .
Or drag
and drop VIEW1 from Component Explorer to this Window.
5. Save
the changes.
Creating a View Context for MAINVIEW
1. Open the View Editor for view VIEW1 and switch to tab Context.
Create a context node TABLE_DATA in the View Controller by opening the
corresponding context menu.
2. Add an
attribute NAME to the TABLE_DATA node.
And give a default value as SFLIGHT.
3. Save
changes.
Creating a corresponding UI Element for
the context node SFLIGHT_NODE
1. Switch
to tab +Layout +of view VIEW1.
2. Insert the
below UI elements under ROOTUIELEMENTCONTAINER and assign the properties in the
given table.
UI Element 1 | Group |
|---|---|
ID | GROUP_1 |
Layout | Grid Layout |
colCount | 2 |
UI Element 2 | Caption (Created automatically when a Group UI is created) |
|---|---|
Text | Input Table Container |
UI Element 3 | Label |
|---|---|
ID | NAME_LABEL_1 |
Label For | NAME_INPUTFIELD_1 |
Text | Table Name |
UI Element 4 | InputField |
|---|---|
ID | NAME_INPUTFIELD_1 |
Value | Bind this property to the View Context NAME |
UI Element 5 | Button |
|---|---|
ID | BUT1 |
Text | Show Table |
onAction | ROUNDTRIP (Create event) |
colSpan | 2 |
hAlign | Center |
Creating UI Elements Dynamically for the view VIEW1
TYPE table.
To get Root Node info in the Context.
rootnode_info = wd_context ->get_node_info ( ).
tabname_node = wd_context ->get_child_node ( name = 'TABLE_DATA' ).
To get the TableName from the Input Field
tabname_node ->get_attribute ( EXPORTING name = 'NAME' IMPORTING value = tablename ).
TRANSLATE tablename TO UPPER CASE.
To Create a Table Node in the context Dynamically
cl_wd_dynamic_tool =>create_nodeinfo_from_struct (
parent_info = rootnode_info
node_name = tablename
structure_name = tablename
is_multiple = abap_true ) .
dyn_node = wd_context ->get_child_node ( name = tablename ).
To Get the ref to ROOTUIELEMENTCONTAINER in the view
CALL METHOD view->get_root_element
RECEIVING
root_view_element = rootelem .
rootnode ? = rootelem .
if Group_2 already exists in the, to remove it.
this case only occurs, if you are running application just by refreshing.
Precautionary Check for existence of Group_2
rootnode ->remove_child ( id = 'GROUP_2' ).
To create a new Group
group_2 = cl_wd_group =>new_group (
view = view
id = `GROUP_2`
design = `01`
enabled = abap_true
has_content_padding = abap_true
scrolling_mode = `02`
visible = `02`
).
To add a caption to the Group
capt_gr2 = cl_wd_caption =>new_caption (
view = view
"ID = `CAPT_GR2`
enabled = abap_true
image_first = abap_true
text = 'Dynamic Group'
text_direction = `02`
visible = `02`
).
To set the Caption to the Group_2
group_2->set_header ( capt_gr2 ).
To set the layout for the Group_2
cl_wd_grid_layout =>new_grid_layout (
container = group_2
cell_padding = `0`
cell_spacing = `0`
col_count = `2`
stretched_horizontally = abap_true
stretched_vertically = abap_true
).
cl_wd_flow_data =>new_flow_data (
element = group_2
cell_design = `04`
v_gutter = `00`
).
Add the Group_2 to ROOTUIELEMENTCONTAINER
rootnode ->add_child ( group_2 ) .
Create a Table UI Element from Context and assigning it to Group_2.
new_tab = cl_wd_dynamic_tool =>create_table_from_node (
ui_parent = group_2
table_id = 'TESTTAB'
node = dyn_node ).
create internal table of (tabletype )
CREATE DATA stru_tab TYPE TABLE OF (tablename ).
ASSIGN stru_tab ->* TO .
Get table content
SELECT * FROM (tablename ) INTO CORRESPONDING FIELDS OF TABLE .
Bind internal table to context node.
dyn_node ->bind_table (
Creating a Web Dynpro
Application
1. Click on the Web Dynpro component Z_DYN_UI in the object tree
and open the context menu to create a new application.
Enter a name (or accept the proposed name) and press Continue or (Enter Key).
3. Save
as local Object.
Activating and running your Application
1. Activate all objects.
2. To start the application, right click on your Web Dynpro
application entry and select context menu entry Test.
Result
You have now created a Web Dynpro
component which contains one view VIEW1. On view VIEW1 a Group with Label, InputField and Button.
Once you input Table Name and click on Show Table, the result is
displayed in a new group UI element (Dynamic Group) along with a table. Furthermore, you have created a Web Dynpro
application (as handle for the Web Dynpro component) which can be started directly via URL.
The result screen is a table which displays SFLIGHT data.
4 Comments
