11/10/22, 5:16 PM Let’s Web Dynpro.

Part II |

Let’s Web Dynpro. Part II

By Raju Shrestha - November 3, 2014

In Part I, we gave you a very basic overview of Web Dynpro. In this part we will create
one Web Dynpro Application.

Before we develop our first Web Dynpro application, let me ask, what steps do you follow
while writing a normal ABAP program/report in SE38/SE80, which has a selection screen;
an output screen and a custom transaction code?

Let me note down that steps:

ABAP Editor or Object navigator
1. Go to SE38 or SE80 and create a program. Give the description and attributes and
save it in transport or as local object.
AT SELECTION SCREEN and SCREEN EVENTS
2. Declare the selection screen parameters and select options thereby creating a
selection screen.
3. Declare global data which would be used throughout the program.
START OF SELECTION
4. Fetch data from database tables.
5. Try to modularize (using subroutines) your data fetches if from numerous tables.
6. Declare local data which would be used in subroutines.
END OF SELECTION

https://www.zapyard.com/lets-web-dynpro-part-ii/ 1/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

7. Massage the data and prepare the final data for output (modularize here as well).
8. Display the output.
9. Activate your program.
Create Custom T-Code for the program using SE93.
10. Create transaction for your report.

Congratulations!!! You just created your first Web Dynpro Application. No kidding. We
will create a cool WD report in similar steps as mentioned above.

Let’s assume the requirement of your functional specification says: Create a Portal
screen which would display the SAP user’s first name and last name. Use table view
USER_ADDR to retrieve data.

Happy to get your first Web Dynpro Functional Specification. Let’s jump into the
system.

Please scroll up and walk through the steps.

Step 1: Go to SE80 Object Navigator. Select Web Dynpro Comp./Intf from the
dropdown. Give a name to the WD component which you want to create and hit enter.
You will get a message as shown in picture below.

Give a meaning description and name (as shown in next picture) for your default/main
Window and View. Name it as per your project standard. Usually we have WI_ or W_ for
windows and VI_ or V_ for views. Then save it. Give appropriate package and transport
number else save it as local object if you do not want to move to next environment. Now
you have created your first WD component which is empty.

https://www.zapyard.com/lets-web-dynpro-part-ii/ 2/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

Step 2: Declare selection screen parameters. Since it would be used globally, let us
define the variable (context) in the component controller (global/top). Double click on
COMPONENTCONTROLLER in the left panel and click the Context Tab in the right panel.

Right click the CONTEXT ->Create-> Node. This is the name of your structure used in
selection screen parameter. We generally use CN_ for context node and CA_ for context
attribute. Give a meaningful name and hit enter.

https://www.zapyard.com/lets-web-dynpro-part-ii/ 3/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

You created a structure, but it is empty. You need fields in the structure to make it
complete. Right click on the context name CN_SELECTION_SCR ->Create->Attribute;
give a name and data-type of the field and save and activate all the objects of the
components. This is the global variable for the selection screen.

Tip: Try to activate your component after every major change/development so that if
any error, you can find and resolve it easily. If you activate at the end, after creating
everything, then it might be little more tiresome to resolve the issue.

https://www.zapyard.com/lets-web-dynpro-part-ii/ 4/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

As I mentioned in PART I, the global variable are not directly available to the views. We
need to make the view know that the global variable (CN_SELECTION_SCR) would be
used in that view. This can be done by dragging the COMPONENT CONTROLLER Context
attribute to View Context. Expand the View in the left panel. Double click on the view
name. Click the Context Tab on the right Panel. On the right panel there is a split. Left
for View and Right side for COMPONENT CONTROLLER Context. Left click on the
CONTEXT CN_SELECTION_SCR hold and drag and put it on top of V_MAIN CONTEXT on
the left. This is like USING/CHANGE Parameters of SUB ROUTINE (PERFORMS) in
normal program.

Now we are good to design the screen. View->Layout. Right click on

ROOTUIELEMENTCONTAINER and insert one TRANSPARENT CONTAINER. Transparent
containers are just holder of UI elements. Usually, related UI elements are collected in a
TRANSPARENT CONTAINER.

https://www.zapyard.com/lets-web-dynpro-part-ii/ 5/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

11

Now let us define an input parameter for the screen (just like we do in SE38). Right click
on Transparent Container and create Input field.

This is just a variable, but what data would it hold? We will link this input field to the
USERID field defined in the context CN_SELECTION_SCR. Click on the yellow icon on the
right side of value property and bind it with USERID. It is just like our PARAMETERS:
P_INPUT TYPE XUBNAME. Any value entered in this parameter in selection screen is
passed to P_INPUT and it can be used in the whole program.

https://www.zapyard.com/lets-web-dynpro-part-ii/ 6/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

Let us give a meaningful label to the selection screen parameter. Just like in SE38, we
create Selection Screen text, in the similar way, a LABEL UI element tagged to Input
Field would act as its text, which would be displayed in the selection screen. Right click
on Transparent Container and create the Label. Populate the Label For field.

https://www.zapyard.com/lets-web-dynpro-part-ii/ 7/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

By default it would be on the right side of the field. Move it up so that it is on the left
side.

https://www.zapyard.com/lets-web-dynpro-part-ii/ 8/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

Let us look how the window looks. In the main window, the default main view is
assigned. So, whatever we have designed till now is available to be displayed in the
window.

Step 3: WD Application like our familier Transaction Code created in SE93:

At this juncture, you would be tempted to see how your selection screen looks like. For
that we need to create the application (like you need a transaction code for a program).
Right click on your Component and create the application and save it.

https://www.zapyard.com/lets-web-dynpro-part-ii/ 9/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

Now you can execute it by F8 or by right clicking the application and Test.

https://www.zapyard.com/lets-web-dynpro-part-ii/ 10/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

Congrats!! Your screen look perfect..

Step 4: Interactive Buttons:

Screen is ready, but user would need something to interact. So, button is needed. Let us
create a button, which would let the system know that some action is done and it has to
perform some function.

Create another Transparent Container. Right click on transparent container and create a
Button UI element.

Link an action to the button. Click on the create icon on the right of onAction Events
property. Give a meaningful name and description to the action. A method is created for
this action in the background as shown.

https://www.zapyard.com/lets-web-dynpro-part-ii/ 11/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

Step 5: Preparation to display the output:

Now, we have the input field and button. But, still we do not have the place holder for
final output. So, let us create another CONTEXT (CN_USER_DETAIL) which would be
local to the view (assuming this context would not be used in any other place). In the
context define three attributes, USERID, NAME_FIRST and NAME_LAST (referring to
table view USER_ADDR).

https://www.zapyard.com/lets-web-dynpro-part-ii/ 12/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

So output type is defined but it is not yet linked to any variable. Let us create three input
fields in a transparent container and link the values to corresponding fields in the
CONTEXT CN_USER_DETAIL. Below it is shown for only USERID. We need to do for all
three.

Since these three attributes would be used for display only, let us check the displayOnly
property for all three.

https://www.zapyard.com/lets-web-dynpro-part-ii/ 13/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

You would like to see the three attribute in one row, not in one column. For this we need
to change the layout type to Matrix Layout. We would speak more about Flow,
Matrix data and Matrix Head data layout in subsequent sessions.

https://www.zapyard.com/lets-web-dynpro-part-ii/ 14/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

Let us see the screen again.

It has the input field and the execute button. But, what will the button do, we have still
not defined the data extraction and display logic.

Step 6: Start of Selection:

Read the value entered by user in the INPUT Field USERID in the portal screen. This can
be easily done by reading the CONTEXT which is linked to USERID field. User the MAGIC
WAND (highlighted with number 1) provide by SAP. Most of your Web Dynpro code or at
least the skeletal code snippet can be generated by using this Magic Wand (wizzard). You

https://www.zapyard.com/lets-web-dynpro-part-ii/ 15/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

need to go to the Methods tab of the View or double click the Execute action of button
BT_EXECUTE.

Check the READ radio button and then hit the CONTEXT and choose the CONTEXT field
which is bound/linked to the INPUT field. Hit enter. All the code is generated for you.
Remove the commented code and some check codes which are not needed for our
scenario. Whatever user enters in IP_USERID field in selection screen is available
in variable lv_userid.

Now, whatever data you want to display in the three attribute of the output context, we
need to SET them, i.e. we can use the same magic wand to SET the
CN_USER_DETAIL context as shown.

https://www.zapyard.com/lets-web-dynpro-part-ii/ 16/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

The LS_CN_USER_DETAIL structure would display the user details. But, the structure is
still empty. We need to select the data and populate the structure. We will write a simple
select statement and populate the structure as shown.

PS: This is the only piece of code we write for this application.. Isn’t it awesome..

Uffff !!! We have done all steps. Fetched data based on input field and populated the
output structure. And linked all the UI elements to the underlying context.

https://www.zapyard.com/lets-web-dynpro-part-ii/ 17/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

Let us test our first baby.. Let me enter an SAP user id present in our system and hit the
Get Data button. Abracadabra… Details are displayed..

This was one of the simple valid project requirements. Please do not smile, this was one
of the requirement in one of our project.. We would add on the complexity and
explore the different features of Web Dynpro in subsequent parts. Till then, please play
around this component and stay tuned.

In Part III, we would create more than one input fields, a button and a table with
multiple lines as output.

If you need any explanation in any steps shown, please leave your comment or email us
your query. We would be happy to elaborate.

If you want to get practical issues and resolutions straight to your inbox, please
SUBSCRIBE. We respect your privacy and take protecting it seriously.

If you liked this post, please hit the share button at the left side of your screen.

Thank you very much for your time!!

Our series on Web Dynpro ABAP

1. Let’s Web Dynpro. Part I : Overview of Web Dynrpo

2. Let’s Web Dynpro. Part II : Create your first Web Dynpro Application
3. Let’s Web Dynpro. Part III : Display a simple tabular output in Web Dynpro
4. Let’s Web Dynpro. Part IV : Show and hide UI elements dynamically in Web Dynpro
5. Let’s Web Dynpro. Part V : ALV display explaining Component Usage in Web Dynpro
6. Let’s Web Dynpro. Part VI : Add custom buttons programmatically to the ALV
output tool bar/header
7. Let’s Web Dynpro. Part VII : Personalization and Customization in Web Dynpro
8. Let’s Web Dynpro. Part ZZ : Export an EXCEL file with data in cell formatted excel
sheet with colors, borders, filters in Web Dynpro
9. Is data element WDY_BOOLEAN and Flag (Char1) same for Web Dynpro
ALV? : Trick to create checkbox in ALV
10. Taking one step back after EhP7.4, does it make sense for Web Dynpro UI? :
Getting back the old look and feel after EhP740 upgrade
11. Can we avoid Table Type declaration for Attributes section in Web Dynpro?

Image source: via Free Stock Photos foter.com

https://www.zapyard.com/lets-web-dynpro-part-ii/ 18/19
11/10/22, 5:16 PM Let’s Web Dynpro. Part II |

Raju Shrestha
https://zapyard.com/

Raju is hands-on SAP ABAP Consultant who started his SAP career with IBM in 2006. Worked in onshore
offshore model. Played the role of mentor, team lead, project lead and trainer in IBM. He has worked in
ECC, S/4HANA 1909 and SAP ISU-Retail boxes. Experienced in Automation, Heavy Machinery, Pharma,
Energy and Retail Industries. Currently working in SAP IS-U Retail Project. Raju is the floater of this SAP
Knowledge sharing portal ZAPYard.com. You may reach out to Raju if you are looking for Full Time SAP
Technical Architect for your organization. Currently he is stationed at Houston. Texas, USA. He is Soccer
coach at YMCA during the weekends and follows Indian Football religiously. Please check his detailed
profile on LinkedIn.

       

https://www.zapyard.com/lets-web-dynpro-part-ii/ 19/19