Let's Web Dynpro2 PDF

10/30/2016
LetsWebDynpro.PartIISAPYard
SAP YARD
YOUR BACKYARD FOR SAP TECHNICAL TIPS AND SOLUTIONS

HOME
SEE ALL POSTS
TUTORIALS
CODE SNIPPETS
KNOW THY YARD MEN
HELP FORUM
BOOKS & JOBS
SAP QUIZ
15
Shares
Lets Web Dynpro. Part II

TOPICS: Context
Transparent Container
Enteremail
Subscribe
We Respect Your Privacy !
Web Dynpro Basics

SEARCH
Subscribe!
Follow@sapyard
POSTED BY: SAP YARD
NOVEMBER 3, 2014
http://www.sapyard.com/letswebdynpropartii/
1/31
10/30/2016
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 rst Web Dynpro application, let me ask, what steps
do you follow while writing a normal ABAP program/report in SE38/SE80,
which has a selectionscreen; an output screen and a custom transaction
code?
15
Shares
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
7. Massage the data and prepare the nal 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 rst Web Dynpro Application.
No kidding. We will create a cool WD report in similar steps as mentioned
above.
SAPYard
656likes
Liked
Youand2otherfriendslikethis
SAP ABAP LINKS
Subscribe!
Abapinho
7MostPopular&FeaturedArticles
SAP HANA from Space

Level
Lazy and Smart ABAPers
DELETING rows of the internal

table within the LOOP. Is it a
2/31
10/30/2016
Lets assume the requirement of your functional speci cation says: Create a
Portal screen which would display the SAP users rst name and last name. Use
table view USER_ADDR to retrieve data.
Taboo? A big NO NO?
Happy to get your rst Web Dynpro Functional Speci cation.

the system.
Fiori App - An
Lets jump into
Introduction from an
ABAPer
Please scroll up and walk through the steps.

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

Zero
ABAP on SAP HANA.
Part I. First Program in
ABAP HANA
Get Latitude and
Subscribe!
Longitude of any place
using Google Map API in
SAP
NetworkedBlogs
Blog:
SAPYard
Topics:
Abap,Sap,Hana
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
rst WD component which is empty.
Followourblog
3/31
10/30/2016
WEB DYNPRO ABAP TUTORIALS
DECEMBER 26, 2014
Lets Web Dynpro.

Part V
NOVEMBER 24, 2014
15
Lets Web Dynpro.

Part IV
Shares
NOVEMBER 11, 2014
Lets Web Dynpro.

Part III
Subscribe!
NOVEMBER 5, 2014
Lets Web Dynpro.

Part ZZ
Step 2: Declare selection screen parameters. Since it would be used globally,

let us de ne 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.
NOVEMBER 3, 2014
Lets Web Dynpro.

Part II
4/31
10/30/2016
15
Shares
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_ forcontext attribute. Give a meaningful name and hit
enter.
Subscribe!
5/31
10/30/2016
15
Shares
You created a structure, but it is empty. You need elds 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 eld and save and
activate all the objects of the components. This is theglobal variable for the
selection screen.
Subscribe!
6/31
10/30/2016
15
Shares
Tip: Try to activate your component after every major change/development so

that if any error, you can nd and resolve it easily. If you activate at the end,
after creating everything, then it might be little more tiresome to resolve the
issue.
Subscribe!
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 normalprogram.
7/31
10/30/2016
15
Shares
Subscribe!
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.
8/31
10/30/2016
15
Shares
Now let us de ne an input parameter for the screen (just like we do in SE38).
Right click on Transparent Container and create Input eld.
Subscribe!
9/31
10/30/2016
15
Shares
This is just a variable, but what data would it hold? We will link this input
eld to the USERID eld de ned 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.
Subscribe!
10/31
10/30/2016
15
Shares
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 eld.
Subscribe!
11/31
10/30/2016
15
Shares
By default it would be on the right side of the eld. Move it up so that it is on

the left side.
Subscribe!
12/31
10/30/2016
15
Shares
Subscribe!
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
13/31
10/30/2016
displayed in the window.
15
Shares
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.
Subscribe!
14/31
10/30/2016
15
Shares
Subscribe!
15/31
10/30/2016
15
Shares
Subscribe!
Now you can execute it by F8 or by right clicking the application and Test.
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.
16/31
10/30/2016
Create another Transparent Container. Right click on transparent container

and create a Button UI element.
15
Shares
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.
Subscribe!
17/31
10/30/2016
15
Shares
Subscribe!
Step 5: Preparation to display the output:

Now, we have the input eld and button. But, still we do not have the place
holder for nal output. So, let us create another CONTEXT
(CN_USER_DETAIL) which would be local to theview (assuming this context
would not be used in any other place). In the context de ne three attributes,
USERID, NAME_FIRST and NAME_LAST (referring to table
viewUSER_ADDR).
18/31
10/30/2016
15
Shares
Subscribe!
So output type is de ned but it is not yet linked to any variable. Let us create
three input elds in a transparent container and link the values to
corresponding elds in the CONTEXT CN_USER_DETAIL. Below it is shown
for only USERID. We need to do for all three.
19/31
10/30/2016
15
Shares
Since these three attributes would be used for display only, let us check the
displayOnly property for all three.
Subscribe!
20/31
10/30/2016
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, Matrixdata and Matrix Head data layout in subsequent
sessions.
15
Shares
Subscribe!
21/31
10/30/2016
15
Shares
Subscribe!
Let us see the screen again.
It has the input eld and the execute button. But, what will the button do,
we have still not de ned the data extraction and displaylogic.
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
22/31
10/30/2016
USERID eld. 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 need to go to the
Methods tab of the View or double click the Execute action of button
BT_EXECUTE.
15
Shares
Subscribe!
Check the READ radio button and then hit the CONTEXT and choose the
CONTEXT eld which is bound/linked to the INPUT eld. Hit enter. All the
23/31
10/30/2016
code is generated foryou. Remove the commented code and some check
codes which are not needed for our scenario. Whatever user enters in
IP_USERID eld in selection screen is available invariable lv_userid.
15
Shares
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_DETAILcontext as shown.
Subscribe!
24/31
10/30/2016
15
Shares
Subscribe!
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
thestructure. We will write a simple select statement and populate the
structure as shown.
25/31
10/30/2016
PS: This is the only piece of code we write for this application.. Isnt it awesome..
15
Shares
Uffff !!! We have done all steps. Fetched data based on input eld and
populated the output structure. And linked all the UI elements to the
underlying context.
Subscribe!
Let us test our rst baby..Let me enter an SAP user id present in our system
and hit the Get Data button. Abracadabra Details are displayed..
26/31
10/30/2016
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 elds, a button and a table
with multiplelines as output.
15
Shares
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!!
Subscribe!
Our series on Web Dynpro ABAP

1. Lets Web Dynpro. Part I: Overview of Web Dynrpo
2. Lets Web Dynpro. Part II : Create your rst Web Dynpro Application
3. Lets Web Dynpro. Part II : Display a simple tabular output in Web
Dynpro
4. Lets Web Dynpro. Part IV : Show and hide UI elements dynamically in
Web Dynpro
5. Lets Web Dynpro. Part V: ALV display explaining Component Usage in
Web Dynpro
6. Lets Web Dynpro. Part VI : Add custom buttons programmatically to the
ALV output tool bar/header
7. Lets Web Dynpro. Part VII : Personalization and Customization in Web
Dynpro
8. Lets Web Dynpro. Part ZZ : Export an EXCEL le with data in cell
27/31
10/30/2016
formatted excel sheet with colors, borders, lters 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?
15
Shares
Image source: via Free Stock Photos foter.com
10
Subscribe!
0
Isn't it Fair to Share??

Related Posts:
28/31
10/30/2016
15
Shares
Previous post
5 COMMENTS
Next post
Subscribe!
ON "LETS WEB DYNPRO. PART II"
Arun Kumar | February 13, 2015 at 9:39 am | Reply

I really liked the way you explaining WD concepts.
Keep up the good work guys!
Cheers!
29/31
10/30/2016
SAP Yard | February 13, 2015 at 3:00 pm | Reply

Dear Arun,
We at SAPYard try to explain in a different way. Fun at work
model..
15
Shares
Glad you liked it. Please keep visiting.
Regards,
http://www.SAPYard.com
Arun Kumar | February 23, 2015 at 12:49 pm | Reply
Hi Guys,
Can u pls check this post :
http://scn.sap.com/thread/3701858
Subscribe!
I have a same requirement like this. Is it possible to

achieve this using either Web Dynpro or FPM? Hope you
have some solution!
Cheers!
Mr. Abhishek jain | December 4, 2015 at 9:42 am | Reply

The Best
30/31
10/30/2016
SAP Yard | December 4, 2015 at 2:26 pm | Reply

Thanks Abhishek.. Happy, you liked it.
Regards,
Raju.
15
Shares
Comment, Criticism, Opinion, Feedback. Please do not

hold back. Share your Thoughts!!
Enteryourcommenthere...
Subscribe!
COPYRIGHT 2016 | MH NEWSDESK LITE BY MH THEMES
31/31

Let's Web Dynpro2 PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Let's Web Dynpro2 PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

10/30/2016

YOUR BACKYARD FOR SAP TECHNICAL TIPS AND SOLUTIONS

SEE ALL POSTS

KNOW THY YARD MEN

BOOKS & JOBS

Lets Web Dynpro. Part II

We Respect Your Privacy !

Web Dynpro Basics

POSTED BY: SAP YARD

Let me note down that steps:

SAP ABAP LINKS

SAP HANA from Space

DELETING rows of the internal

Taboo? A big NO NO?

Happy to get your rst Web Dynpro Functional Speci cation.

Lets jump into

Please scroll up and walk through the steps.

SAP HANA at Ground

WEB DYNPRO ABAP TUTORIALS

DECEMBER 26, 2014

Lets Web Dynpro.

NOVEMBER 24, 2014

Lets Web Dynpro.

NOVEMBER 11, 2014

Lets Web Dynpro.

Lets Web Dynpro.

Step 2: Declare selection screen parameters. Since it would be used globally,

Lets Web Dynpro.

Tip: Try to activate your component after every major change/development so

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

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

displayed in the window.

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

Congrats!! Your screen look perfect..

Create another Transparent Container. Right click on transparent container

Step 5: Preparation to display the output:

Let us see the screen again.

USERID eld. User the MAGIC WAND(highlighted with number 1) provide

Our series on Web Dynpro ABAP

formatted excel sheet with colors, borders, lters in Web Dynpro

Image source: via Free Stock Photos foter.com

Isn't it Fair to Share??

ON "LETS WEB DYNPRO. PART II"

Arun Kumar | February 13, 2015 at 9:39 am | Reply

SAP Yard | February 13, 2015 at 3:00 pm | Reply

Glad you liked it. Please keep visiting.

I have a same requirement like this. Is it possible to

Mr. Abhishek jain | December 4, 2015 at 9:42 am | Reply

SAP Yard | December 4, 2015 at 2:26 pm | Reply

Comment, Criticism, Opinion, Feedback. Please do not

COPYRIGHT 2016 | MH NEWSDESK LITE BY MH THEMES

Anda mungkin juga menyukai