Embed Size (px)
Citation preview
Web Dynpro ABAP for Practitioners
Ulrich Gellert l Ana Daniela Cristea
Web Dynpro ABAPfor Practitioners
Ulrich Gellertco S thorn P LION AGRobert-Bosch-Str 968542 HeddesheimGermanywebdynproABAPsp-lioncom
Ana Daniela Cristeaco S + P LION AGRobert-Bosch-Str 968542 HeddesheimGermanywebdynproABAPsp-lioncom
ISBN 978-3-642-11384-0 e-ISBN 978-3-642-11385-7DOI 101007978-3-642-11385-7Springer Heidelberg Dordrecht London New York
Library of Congress Control Number 2010929263
Springer-Verlag Berlin Heidelberg 2010This work is subject to copyright All rights are reserved whether the whole or part of the material isconcerned specifically the rights of translation reprinting reuse of illustrations recitation broadcastingreproduction on microfilm or in any other way and storage in data banks Duplication of this publicationor parts thereof is permitted only under the provisions of the German Copyright Law of September 91965 in its current version and permission for use must always be obtained from Springer Violationsare liable to prosecution under the German Copyright LawThe use of general descriptive names registered names trademarks etc in this publication does not implyeven in the absence of a specific statement that such names are exempt from the relevant protective lawsand regulations and therefore free for general useAll printed screens SAP the SAP Logo my SAP SAP R3 ABAP NetWeaver Portal are subject tocopyright or are trademarks of SAP AG Dietmar-Hopp-Allee 16 69190 Walldorf Germany
Cover design KuenkelLopka GmbH Germany
Printed on acid-free paper
Springer is part of Springer Science+Business Media (wwwspringercom)
Foreword
Taking Albert Einsteinrsquos quote as a motto ldquoExample isnrsquot another way to teach it
is the only way to teachrdquo our target was to create a book for explaining step-by-
step the Web Dynpro ABAP to the reader Assisted by practical examples you will
learn more and more about Web Dynpro ABAP from chapter to chapter Moreover
the connections with other areas are also pointed out by practical examples
In Chap 1 we explain what means the Web Dynpro integrated in a SAP
NetWeaver platform
Chapter 2 is about the ldquoEasy Accessrdquo to a SAP System
In Chap 3 we describe the modality to creating a Web Dynpro Component
We explain all the elements of a view through examples and we show you how to
use the ABAP Debugger to diagnose the Application
Chapter 4 gives attention to the ABAP Dictionary where all the Development
Objects are created These ones are the basis for all our examples With this
knowledge you will be able to easily create Web Dynpro applications
In Chap 5 we present the Context Nodes and Attributes and explain their
importance for the Web Dynpro We consider the possibilities to create use fill in
with data and read the contents
In Chap 6 we go into details with Data Binding Context Mapping and
Interface Methods For this purpose we present the Data Binding through simple
examples We change these examples step-by-step to show you a clear picture of
the context mapping (as well as in an internal and external way ndash Direct Mapping
and Reverse Mapping)
Chapter 7 covers the View Controller Methods beginning with some exam-
ples of Hook Methods and ending with User Defined Methods and Event Han-
dler Methods Each method is explained by an example
Chapter 8 illustrates the layout of the UI Elements
In our largest chapter (Chap 9) we describe in details the User Interfaces (UI)
Each UI element is presented through an example Moreover we show the dynamic
programming of these UI elements and give additional information
v
Chapter 10 includes Messages and Exceptions We start with the creation of the
necessary classes (Message Class Exceptions Class andAssistance Class) and we
show you how to use them to create solid applications that catch exceptions and
inform the user through messages
Chapter 11 is about creating Multilingual Applications on the levels of inter-
faces and master data We also present how to use these data in the Web Dynpro
components
In Chap 12 we present several Web Dynpro Models We show you not only
how to use an Assistance Class a Web Service or a BAPI but also how to create
Multi Component Applications
Chapter 13 covers the ABAP list viewer (ALV) and the Select options (SO)
We start again with simple examples and build them up to an ALV output configu-
ration in combination with SOs
In Chap 14 itrsquos described the integration of Web Dynpro Applications in the
SAP NetWeaver Portal We present the connection with the back-end ABAP
System ending with WD applications that send and react to a portal event
The next Chapter (Chap 15) is about Web Dynpro and Authorizations We
shortly present the Role Based Access Control (RBAC) model and describe the
SAP NetWeaver authorization concept
In our last Chapter (Chap 16) we would like to show how the Mind Map can
help you to learn Web Dynpro ABAP easier and faster We create a Mind Map that
includes all the necessary Web Dynpro Elements
The examples in our book have been developed on a SAP System with SAP
NetWeaver 70 and Support Package 17 From SDN (httpwwwsdnsapcom) you
can download a free of charge SAP NetWeaver Trial Version with ABAP and SAP
GUI for testing With this Trial Version you can create most of our exercises
Yoursquoll also find most of the configuration steps at SDN To use the SAP interactive
forms by ADOBE you need both NetWeaver Trial Versions (ABAP and Java)
because ADS is an integral part of the SAP NetWeaver Java version Additionally
you need the ADOBE Live Cycle Designer from the SAP Service marketplace The
configuration steps required in this case are shown in the SAP PRESS book ldquoSAP
Interactive Forms by Adoberdquo (Hauser et al) To be able to work with the portal you
need the SAP NetWeaver Java Trial Version In the SAP PRESS book ldquoDevel-
operrsquos Guide to SAP NetWeaver Portal Applicationsrdquo (Banner et al) you will find
all the software and hardware requirements along with the configuration steps
The creation of a book takes time Many discussions with students and devel-
opers made us think about writing a practical book on the Web Dynpro ABAP
subject The most important issue was to guide the reader step-by-step with
practical examples Many weekends holidays and evenings were invested in this
book and the positive feedback of our colleagues always gave us new energy
vi Foreword
Acknowledgements
We would like to thank our proofreaders Dieter Schmitt and Heinz-Jurgen
Gebhardt Their advices and comments helped us a lot
Ulrich Gellert would like to thank all his colleagues of S+P LION AG for the
useful input during the project I also would like to thank my father Gerhard
Gellert who unfortunately died too early He introduced me into the world of IT
in 1983 and without him our company could never become what it is Special
thanks go to my mother Gabriele Gellert She has been supporting me until today
and she is the heart of our company Especially I would like to thank my lovely
wife Carmen and my children Alexa and Marc for their support during the project
Ana Daniela Cristea gives special thanks to NWCON Technology Consulting
especially to Thomas Muschalik and S+P LION AG for their great support Taking
this opportunity Irsquod like to thank to the special persons who have been guiding me
through my dissertation Octavian Prostean and Mircea Vladutiu Not to forget the
people who encouraged me to publish my first books and articles Aron Poanta and
Caius Panoiu thanking them for the useful advices Last but not least I would like
to thank my family and friends Especially to my mother Sabina Cristea and to
Susanne and Edgar Hammes who supported me with all their powers They gave
me the time I needed to be one of those who wrote this book for you
vii
Contents
1 What is Web Dynpro 1
2 SAP Easy Access 5
21 Changing the SAP Easy Access 6
22 Favorites List 6
23 Setting a Transaction as Start Transaction 8
24 Creating a Shortcut 8
3 Designing a Web Dynpro Component 11
31 View 14
311 View Layout 14
312 Context View 17
313 Actions 19
314 Methods 19
315 Properties 21
316 Attributes 22
32 Componentcontroller 23
33 Window 23
34 Application 24
35 ABAP Debugger 27
36 Web Dynpro Logon Page Configuration 30
4 ABAP Dictionary 33
41 Data Element 34
42 Domain 35
43 Structure 38
44 Table 40
45 Search Help 45
46 Database View 48
47 Table Type 51
48 Lock Object 52
ix
5 Context Nodes and Attributes at Design Time 55
51 Attributes 56
52 Nodes 58
521 Creating a Node that Uses an ABAP Dictionary
Repository Object 59
522 Working with Child Nodes 64
6 Data Binding Context Mapping and Interface Methods 67
61 Data Binding 67
62 Context Mapping 72
621 Internal Context Mapping 72
622 External Context Mapping 76
63 Interface Methods 83
7 View Controller Methods 87
71 Hook Methods 87
711 wdDoInit 88
712 wdDoExit 91
713 wdDoModifyView 91
714 wdDoBeforeAction 96
715 wdDoOnContextMenu 98
72 Supply Function Methods 102
73 User-Defined Instance Methods 103
74 Fire Methods 105
75 Event Handler Methods 109
8 Layout UI Elements 113
81 FlowLayout 114
82 GridLayout 116
83 MatrixLayout 119
84 RowLayout 120
9 User Interface Elements (UI elements) Static and Dynamic
Programming 123
91 Action 124
911 Timed Trigger 124
912 ButtonChoice 126
92 Selection 132
921 DropDownByKey 132
922 DropDownByIndex 135
923 RadioButtonGroupByIndex 137
93 Layout 140
931 ViewContainerUIElement 140
932 TabStrip 146
933 PageHeader 149
934 ContextualPanel 152
x Contents
935 Tray UI Element 155
936 MessageArea 159
94 Complex 163
941 Table 163
942 RoadMap 171
943 PhaseIndicator 180
944 Tree ndash Sequential Implementation 186
945 DateNavigator 191
95 Graphic 197
951 Image 198
952 BusinessGraphics 201
96 Integration 206
961 The InteractiveForm 206
962 FileUpload 215
10 Messages Exceptions and Web Dynpro ABAP 221
101 Message Handling 222
1011 Dynamic Texts Stored in the Text Pool
of the Assistance Class 222
1012 Text from Database Table T100 225
102 Exception Handling 227
1021 Exception Class with OTR Text 228
1022 Exception Class with Text from a Message Class 233
11 Writing Multilanguage Applications 237
111 Creating Multilanguage User Interfaces 238
1111 Internationalization of Data Elements Defined
in ABAP Dictionary 240
1112 Internationalization of Domains Defined
in ABAP Dictionary 241
1113 Internationalization of Text from OTR 242
1114 Internationalization of Text from Assistance Class 244
1115 Internationalization of Messages 245
112 Multilanguage Records in the Database 247
1121 Study an Example Created in the System 248
1122 Creating Table Structures and Internationalization
of the Records 250
1123 Using the Internationalized Records in WebDynpro 255
12 Web Dynpro Model 259
121 Assistance Class as a Model for a Multicomponent
Application 260
122 BAPI as a Model 274
1221 Creating a BAPI 274
1222 Using the Created BAPI as a Model 279
123 Web Service 283
Contents xi
1231 Creating the Web Service 284
1232 Web Service Configuration 287
1233 Testing the Web Service 288
1234 Consuming the Web Service in Web Dynpro 289
13 ALV and Select Options 295
131 SAP List Viewer 295
1311 Simple ALV Example 296
1312 ALV Configuration Model 299
132 Select Options 306
133 ALV and Select Options 313
14 Integrating a Web Dynpro Application into the SAP
NetWeaver Portal 315
141 Creating a Folder 316
142 Connecting to the Back-End ABAP System 317
143 Creating an iView 321
144 Creating a Role and Role Assignment 324
145 Running the Application into the Portal 327
146 Triggering a Portal Event 327
147 Reacting to a Portal Event 329
148 Creating a Page 331
149 Running the Application that Processes Portal Events 333
15 Web Dynpro and Authorization 335
151 Role Based Access Control Pattern ndash RBAC 337
152 Authorization Object Class 338
153 Authorization Object 338
154 Authorization Fields 340
155 Creating a Single Role and Changing its Authorization Data 343
156 Creating the Web Dynpro Component 346
1561 Checking the Authorization of the Current User 346
1562 Assigning the User-Role and Running
the Application 349
16 Web Dynpro Mind Map 351
161 Creating a Mind Map 351
162 Web Dynpro ABAP Mind Map 352
Appendix 353
Index 357
xii Contents
Chapter 1
What is Web Dynpro
ldquoLogic will get you from A to B Imagination will take you everywhererdquo
Albert Einstein
Abstract In this chapter we present the place and role of the Web Dynpro within
the SAP NetWeaver platform So we start with the layers of the SAP NetWeaver
platform we continue with the importance of the Application Platform layer and
we conclude with the place and role of Web Dynpro (ABAP and Java) within the
Application Server ABAP and respective Application Server Java
To answer this question we have to look at the SAP NetWeaver technology
platform (Fig 11)
As we can see four layers are distinguished in this context Application Plat-
form Process Integration Information Integration and People Integration
The Application Platform represents the technical basis of almost all the other
SAP products This is the reason why the Application Platform plays a central role
in the SAP NetWeaver
The Application Platform essentially offers two programming interfaces ABAP
and Java (J2EE) ABAP is the programming interface for Application Server (AS)
ABAP and Java is the programming interface for AS Java
To create ABAP and Java applications we have two independent development
environments ABAP Workbench for ABAP and SAP NetWeaver Developer
Studio for Java
Both development environments offer the possibility to create web based appli-
cations built by using declarative programming techniques based on the Model
View Controller (MVC) paradigm
SAP NetWeaver Developer Studio is the SAPrsquos own development environment
used to develop Java-based multilayer business applications This development
environment is based on Eclipse and offers a Web Dynpro Perspective to create
Web Dynpro Java applications (Fig 12)
All the tools we need to create Web Dynpro Java applications are found within
the SAP NetWeaver Developer Studio
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_1 Springer-Verlag Berlin Heidelberg 2010
1
ABAP Workbench is the SAPrsquos own development environment used to develop
ABAP-based multilayer business applications This development environment
offers Web Dynpro Explorer to create Web Dynpro ABAP components (Fig 13)
Fig 12 SAP NetWeaver Developer Studio ndash Web Dynpro perspective
Fig 11 SAP NetWeaver components (SAP)
2 1 What is Web Dynpro
The Application Server ABAP has the structure presented in Fig 14
Fig 13 ABAP Workbench ndash Web Dynpro Explorer
Fig 14 AS ABAP (SAP)
1 What is Web Dynpro 3
As we can see most of the AS ABAP components can be divided into three
layers
l Presentation layerl Business layerl Persistence layer
Web Dynpro ABAP is part of the presentation layer and itrsquos the SAP standard UI
technology used for developing web business applications without knowing HTML
or JavaScript
Web Dynpro ABAP offers many advantages as follows
l Strict separation between the layout and business datal Re-use and better maintainability through reusabilityl Automatic input checksl Automatic data transport using data bindingl WYSIWYG (What You See Is What You Get) view editor
Web Dynpro ABAP andWeb Dynpro Java mostly offer the same functionalities
But of course there are some differences between them for example
l Web Dynpro Java unlike the Web Dynpro ABAP disposes of a ViewSet that
allows us to integrate in a Screen more Views by using certain pre-defined
layouts In this respect their common part is the View Container UI Elementl Web Dynpro Java offers graphical tools that ease the programming work as
Navigation Manager and Diagram View unlike the Web Dynpro ABAP where
we dispose only of a tool used to visualize and to define the window structure
The Web Dynpro ABAP is what the current book is about More information
about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by
Chris Whealy
4 1 What is Web Dynpro
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
Ulrich Gellert l Ana Daniela Cristea
Web Dynpro ABAPfor Practitioners
Ulrich Gellertco S thorn P LION AGRobert-Bosch-Str 968542 HeddesheimGermanywebdynproABAPsp-lioncom
Ana Daniela Cristeaco S + P LION AGRobert-Bosch-Str 968542 HeddesheimGermanywebdynproABAPsp-lioncom
ISBN 978-3-642-11384-0 e-ISBN 978-3-642-11385-7DOI 101007978-3-642-11385-7Springer Heidelberg Dordrecht London New York
Library of Congress Control Number 2010929263
Springer-Verlag Berlin Heidelberg 2010This work is subject to copyright All rights are reserved whether the whole or part of the material isconcerned specifically the rights of translation reprinting reuse of illustrations recitation broadcastingreproduction on microfilm or in any other way and storage in data banks Duplication of this publicationor parts thereof is permitted only under the provisions of the German Copyright Law of September 91965 in its current version and permission for use must always be obtained from Springer Violationsare liable to prosecution under the German Copyright LawThe use of general descriptive names registered names trademarks etc in this publication does not implyeven in the absence of a specific statement that such names are exempt from the relevant protective lawsand regulations and therefore free for general useAll printed screens SAP the SAP Logo my SAP SAP R3 ABAP NetWeaver Portal are subject tocopyright or are trademarks of SAP AG Dietmar-Hopp-Allee 16 69190 Walldorf Germany
Cover design KuenkelLopka GmbH Germany
Printed on acid-free paper
Springer is part of Springer Science+Business Media (wwwspringercom)
Foreword
Taking Albert Einsteinrsquos quote as a motto ldquoExample isnrsquot another way to teach it
is the only way to teachrdquo our target was to create a book for explaining step-by-
step the Web Dynpro ABAP to the reader Assisted by practical examples you will
learn more and more about Web Dynpro ABAP from chapter to chapter Moreover
the connections with other areas are also pointed out by practical examples
In Chap 1 we explain what means the Web Dynpro integrated in a SAP
NetWeaver platform
Chapter 2 is about the ldquoEasy Accessrdquo to a SAP System
In Chap 3 we describe the modality to creating a Web Dynpro Component
We explain all the elements of a view through examples and we show you how to
use the ABAP Debugger to diagnose the Application
Chapter 4 gives attention to the ABAP Dictionary where all the Development
Objects are created These ones are the basis for all our examples With this
knowledge you will be able to easily create Web Dynpro applications
In Chap 5 we present the Context Nodes and Attributes and explain their
importance for the Web Dynpro We consider the possibilities to create use fill in
with data and read the contents
In Chap 6 we go into details with Data Binding Context Mapping and
Interface Methods For this purpose we present the Data Binding through simple
examples We change these examples step-by-step to show you a clear picture of
the context mapping (as well as in an internal and external way ndash Direct Mapping
and Reverse Mapping)
Chapter 7 covers the View Controller Methods beginning with some exam-
ples of Hook Methods and ending with User Defined Methods and Event Han-
dler Methods Each method is explained by an example
Chapter 8 illustrates the layout of the UI Elements
In our largest chapter (Chap 9) we describe in details the User Interfaces (UI)
Each UI element is presented through an example Moreover we show the dynamic
programming of these UI elements and give additional information
v
Chapter 10 includes Messages and Exceptions We start with the creation of the
necessary classes (Message Class Exceptions Class andAssistance Class) and we
show you how to use them to create solid applications that catch exceptions and
inform the user through messages
Chapter 11 is about creating Multilingual Applications on the levels of inter-
faces and master data We also present how to use these data in the Web Dynpro
components
In Chap 12 we present several Web Dynpro Models We show you not only
how to use an Assistance Class a Web Service or a BAPI but also how to create
Multi Component Applications
Chapter 13 covers the ABAP list viewer (ALV) and the Select options (SO)
We start again with simple examples and build them up to an ALV output configu-
ration in combination with SOs
In Chap 14 itrsquos described the integration of Web Dynpro Applications in the
SAP NetWeaver Portal We present the connection with the back-end ABAP
System ending with WD applications that send and react to a portal event
The next Chapter (Chap 15) is about Web Dynpro and Authorizations We
shortly present the Role Based Access Control (RBAC) model and describe the
SAP NetWeaver authorization concept
In our last Chapter (Chap 16) we would like to show how the Mind Map can
help you to learn Web Dynpro ABAP easier and faster We create a Mind Map that
includes all the necessary Web Dynpro Elements
The examples in our book have been developed on a SAP System with SAP
NetWeaver 70 and Support Package 17 From SDN (httpwwwsdnsapcom) you
can download a free of charge SAP NetWeaver Trial Version with ABAP and SAP
GUI for testing With this Trial Version you can create most of our exercises
Yoursquoll also find most of the configuration steps at SDN To use the SAP interactive
forms by ADOBE you need both NetWeaver Trial Versions (ABAP and Java)
because ADS is an integral part of the SAP NetWeaver Java version Additionally
you need the ADOBE Live Cycle Designer from the SAP Service marketplace The
configuration steps required in this case are shown in the SAP PRESS book ldquoSAP
Interactive Forms by Adoberdquo (Hauser et al) To be able to work with the portal you
need the SAP NetWeaver Java Trial Version In the SAP PRESS book ldquoDevel-
operrsquos Guide to SAP NetWeaver Portal Applicationsrdquo (Banner et al) you will find
all the software and hardware requirements along with the configuration steps
The creation of a book takes time Many discussions with students and devel-
opers made us think about writing a practical book on the Web Dynpro ABAP
subject The most important issue was to guide the reader step-by-step with
practical examples Many weekends holidays and evenings were invested in this
book and the positive feedback of our colleagues always gave us new energy
vi Foreword
Acknowledgements
We would like to thank our proofreaders Dieter Schmitt and Heinz-Jurgen
Gebhardt Their advices and comments helped us a lot
Ulrich Gellert would like to thank all his colleagues of S+P LION AG for the
useful input during the project I also would like to thank my father Gerhard
Gellert who unfortunately died too early He introduced me into the world of IT
in 1983 and without him our company could never become what it is Special
thanks go to my mother Gabriele Gellert She has been supporting me until today
and she is the heart of our company Especially I would like to thank my lovely
wife Carmen and my children Alexa and Marc for their support during the project
Ana Daniela Cristea gives special thanks to NWCON Technology Consulting
especially to Thomas Muschalik and S+P LION AG for their great support Taking
this opportunity Irsquod like to thank to the special persons who have been guiding me
through my dissertation Octavian Prostean and Mircea Vladutiu Not to forget the
people who encouraged me to publish my first books and articles Aron Poanta and
Caius Panoiu thanking them for the useful advices Last but not least I would like
to thank my family and friends Especially to my mother Sabina Cristea and to
Susanne and Edgar Hammes who supported me with all their powers They gave
me the time I needed to be one of those who wrote this book for you
vii
Contents
1 What is Web Dynpro 1
2 SAP Easy Access 5
21 Changing the SAP Easy Access 6
22 Favorites List 6
23 Setting a Transaction as Start Transaction 8
24 Creating a Shortcut 8
3 Designing a Web Dynpro Component 11
31 View 14
311 View Layout 14
312 Context View 17
313 Actions 19
314 Methods 19
315 Properties 21
316 Attributes 22
32 Componentcontroller 23
33 Window 23
34 Application 24
35 ABAP Debugger 27
36 Web Dynpro Logon Page Configuration 30
4 ABAP Dictionary 33
41 Data Element 34
42 Domain 35
43 Structure 38
44 Table 40
45 Search Help 45
46 Database View 48
47 Table Type 51
48 Lock Object 52
ix
5 Context Nodes and Attributes at Design Time 55
51 Attributes 56
52 Nodes 58
521 Creating a Node that Uses an ABAP Dictionary
Repository Object 59
522 Working with Child Nodes 64
6 Data Binding Context Mapping and Interface Methods 67
61 Data Binding 67
62 Context Mapping 72
621 Internal Context Mapping 72
622 External Context Mapping 76
63 Interface Methods 83
7 View Controller Methods 87
71 Hook Methods 87
711 wdDoInit 88
712 wdDoExit 91
713 wdDoModifyView 91
714 wdDoBeforeAction 96
715 wdDoOnContextMenu 98
72 Supply Function Methods 102
73 User-Defined Instance Methods 103
74 Fire Methods 105
75 Event Handler Methods 109
8 Layout UI Elements 113
81 FlowLayout 114
82 GridLayout 116
83 MatrixLayout 119
84 RowLayout 120
9 User Interface Elements (UI elements) Static and Dynamic
Programming 123
91 Action 124
911 Timed Trigger 124
912 ButtonChoice 126
92 Selection 132
921 DropDownByKey 132
922 DropDownByIndex 135
923 RadioButtonGroupByIndex 137
93 Layout 140
931 ViewContainerUIElement 140
932 TabStrip 146
933 PageHeader 149
934 ContextualPanel 152
x Contents
935 Tray UI Element 155
936 MessageArea 159
94 Complex 163
941 Table 163
942 RoadMap 171
943 PhaseIndicator 180
944 Tree ndash Sequential Implementation 186
945 DateNavigator 191
95 Graphic 197
951 Image 198
952 BusinessGraphics 201
96 Integration 206
961 The InteractiveForm 206
962 FileUpload 215
10 Messages Exceptions and Web Dynpro ABAP 221
101 Message Handling 222
1011 Dynamic Texts Stored in the Text Pool
of the Assistance Class 222
1012 Text from Database Table T100 225
102 Exception Handling 227
1021 Exception Class with OTR Text 228
1022 Exception Class with Text from a Message Class 233
11 Writing Multilanguage Applications 237
111 Creating Multilanguage User Interfaces 238
1111 Internationalization of Data Elements Defined
in ABAP Dictionary 240
1112 Internationalization of Domains Defined
in ABAP Dictionary 241
1113 Internationalization of Text from OTR 242
1114 Internationalization of Text from Assistance Class 244
1115 Internationalization of Messages 245
112 Multilanguage Records in the Database 247
1121 Study an Example Created in the System 248
1122 Creating Table Structures and Internationalization
of the Records 250
1123 Using the Internationalized Records in WebDynpro 255
12 Web Dynpro Model 259
121 Assistance Class as a Model for a Multicomponent
Application 260
122 BAPI as a Model 274
1221 Creating a BAPI 274
1222 Using the Created BAPI as a Model 279
123 Web Service 283
Contents xi
1231 Creating the Web Service 284
1232 Web Service Configuration 287
1233 Testing the Web Service 288
1234 Consuming the Web Service in Web Dynpro 289
13 ALV and Select Options 295
131 SAP List Viewer 295
1311 Simple ALV Example 296
1312 ALV Configuration Model 299
132 Select Options 306
133 ALV and Select Options 313
14 Integrating a Web Dynpro Application into the SAP
NetWeaver Portal 315
141 Creating a Folder 316
142 Connecting to the Back-End ABAP System 317
143 Creating an iView 321
144 Creating a Role and Role Assignment 324
145 Running the Application into the Portal 327
146 Triggering a Portal Event 327
147 Reacting to a Portal Event 329
148 Creating a Page 331
149 Running the Application that Processes Portal Events 333
15 Web Dynpro and Authorization 335
151 Role Based Access Control Pattern ndash RBAC 337
152 Authorization Object Class 338
153 Authorization Object 338
154 Authorization Fields 340
155 Creating a Single Role and Changing its Authorization Data 343
156 Creating the Web Dynpro Component 346
1561 Checking the Authorization of the Current User 346
1562 Assigning the User-Role and Running
the Application 349
16 Web Dynpro Mind Map 351
161 Creating a Mind Map 351
162 Web Dynpro ABAP Mind Map 352
Appendix 353
Index 357
xii Contents
Chapter 1
What is Web Dynpro
ldquoLogic will get you from A to B Imagination will take you everywhererdquo
Albert Einstein
Abstract In this chapter we present the place and role of the Web Dynpro within
the SAP NetWeaver platform So we start with the layers of the SAP NetWeaver
platform we continue with the importance of the Application Platform layer and
we conclude with the place and role of Web Dynpro (ABAP and Java) within the
Application Server ABAP and respective Application Server Java
To answer this question we have to look at the SAP NetWeaver technology
platform (Fig 11)
As we can see four layers are distinguished in this context Application Plat-
form Process Integration Information Integration and People Integration
The Application Platform represents the technical basis of almost all the other
SAP products This is the reason why the Application Platform plays a central role
in the SAP NetWeaver
The Application Platform essentially offers two programming interfaces ABAP
and Java (J2EE) ABAP is the programming interface for Application Server (AS)
ABAP and Java is the programming interface for AS Java
To create ABAP and Java applications we have two independent development
environments ABAP Workbench for ABAP and SAP NetWeaver Developer
Studio for Java
Both development environments offer the possibility to create web based appli-
cations built by using declarative programming techniques based on the Model
View Controller (MVC) paradigm
SAP NetWeaver Developer Studio is the SAPrsquos own development environment
used to develop Java-based multilayer business applications This development
environment is based on Eclipse and offers a Web Dynpro Perspective to create
Web Dynpro Java applications (Fig 12)
All the tools we need to create Web Dynpro Java applications are found within
the SAP NetWeaver Developer Studio
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_1 Springer-Verlag Berlin Heidelberg 2010
1
ABAP Workbench is the SAPrsquos own development environment used to develop
ABAP-based multilayer business applications This development environment
offers Web Dynpro Explorer to create Web Dynpro ABAP components (Fig 13)
Fig 12 SAP NetWeaver Developer Studio ndash Web Dynpro perspective
Fig 11 SAP NetWeaver components (SAP)
2 1 What is Web Dynpro
The Application Server ABAP has the structure presented in Fig 14
Fig 13 ABAP Workbench ndash Web Dynpro Explorer
Fig 14 AS ABAP (SAP)
1 What is Web Dynpro 3
As we can see most of the AS ABAP components can be divided into three
layers
l Presentation layerl Business layerl Persistence layer
Web Dynpro ABAP is part of the presentation layer and itrsquos the SAP standard UI
technology used for developing web business applications without knowing HTML
or JavaScript
Web Dynpro ABAP offers many advantages as follows
l Strict separation between the layout and business datal Re-use and better maintainability through reusabilityl Automatic input checksl Automatic data transport using data bindingl WYSIWYG (What You See Is What You Get) view editor
Web Dynpro ABAP andWeb Dynpro Java mostly offer the same functionalities
But of course there are some differences between them for example
l Web Dynpro Java unlike the Web Dynpro ABAP disposes of a ViewSet that
allows us to integrate in a Screen more Views by using certain pre-defined
layouts In this respect their common part is the View Container UI Elementl Web Dynpro Java offers graphical tools that ease the programming work as
Navigation Manager and Diagram View unlike the Web Dynpro ABAP where
we dispose only of a tool used to visualize and to define the window structure
The Web Dynpro ABAP is what the current book is about More information
about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by
Chris Whealy
4 1 What is Web Dynpro
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
Ulrich Gellertco S thorn P LION AGRobert-Bosch-Str 968542 HeddesheimGermanywebdynproABAPsp-lioncom
Ana Daniela Cristeaco S + P LION AGRobert-Bosch-Str 968542 HeddesheimGermanywebdynproABAPsp-lioncom
ISBN 978-3-642-11384-0 e-ISBN 978-3-642-11385-7DOI 101007978-3-642-11385-7Springer Heidelberg Dordrecht London New York
Library of Congress Control Number 2010929263
Springer-Verlag Berlin Heidelberg 2010This work is subject to copyright All rights are reserved whether the whole or part of the material isconcerned specifically the rights of translation reprinting reuse of illustrations recitation broadcastingreproduction on microfilm or in any other way and storage in data banks Duplication of this publicationor parts thereof is permitted only under the provisions of the German Copyright Law of September 91965 in its current version and permission for use must always be obtained from Springer Violationsare liable to prosecution under the German Copyright LawThe use of general descriptive names registered names trademarks etc in this publication does not implyeven in the absence of a specific statement that such names are exempt from the relevant protective lawsand regulations and therefore free for general useAll printed screens SAP the SAP Logo my SAP SAP R3 ABAP NetWeaver Portal are subject tocopyright or are trademarks of SAP AG Dietmar-Hopp-Allee 16 69190 Walldorf Germany
Cover design KuenkelLopka GmbH Germany
Printed on acid-free paper
Springer is part of Springer Science+Business Media (wwwspringercom)
Foreword
Taking Albert Einsteinrsquos quote as a motto ldquoExample isnrsquot another way to teach it
is the only way to teachrdquo our target was to create a book for explaining step-by-
step the Web Dynpro ABAP to the reader Assisted by practical examples you will
learn more and more about Web Dynpro ABAP from chapter to chapter Moreover
the connections with other areas are also pointed out by practical examples
In Chap 1 we explain what means the Web Dynpro integrated in a SAP
NetWeaver platform
Chapter 2 is about the ldquoEasy Accessrdquo to a SAP System
In Chap 3 we describe the modality to creating a Web Dynpro Component
We explain all the elements of a view through examples and we show you how to
use the ABAP Debugger to diagnose the Application
Chapter 4 gives attention to the ABAP Dictionary where all the Development
Objects are created These ones are the basis for all our examples With this
knowledge you will be able to easily create Web Dynpro applications
In Chap 5 we present the Context Nodes and Attributes and explain their
importance for the Web Dynpro We consider the possibilities to create use fill in
with data and read the contents
In Chap 6 we go into details with Data Binding Context Mapping and
Interface Methods For this purpose we present the Data Binding through simple
examples We change these examples step-by-step to show you a clear picture of
the context mapping (as well as in an internal and external way ndash Direct Mapping
and Reverse Mapping)
Chapter 7 covers the View Controller Methods beginning with some exam-
ples of Hook Methods and ending with User Defined Methods and Event Han-
dler Methods Each method is explained by an example
Chapter 8 illustrates the layout of the UI Elements
In our largest chapter (Chap 9) we describe in details the User Interfaces (UI)
Each UI element is presented through an example Moreover we show the dynamic
programming of these UI elements and give additional information
v
Chapter 10 includes Messages and Exceptions We start with the creation of the
necessary classes (Message Class Exceptions Class andAssistance Class) and we
show you how to use them to create solid applications that catch exceptions and
inform the user through messages
Chapter 11 is about creating Multilingual Applications on the levels of inter-
faces and master data We also present how to use these data in the Web Dynpro
components
In Chap 12 we present several Web Dynpro Models We show you not only
how to use an Assistance Class a Web Service or a BAPI but also how to create
Multi Component Applications
Chapter 13 covers the ABAP list viewer (ALV) and the Select options (SO)
We start again with simple examples and build them up to an ALV output configu-
ration in combination with SOs
In Chap 14 itrsquos described the integration of Web Dynpro Applications in the
SAP NetWeaver Portal We present the connection with the back-end ABAP
System ending with WD applications that send and react to a portal event
The next Chapter (Chap 15) is about Web Dynpro and Authorizations We
shortly present the Role Based Access Control (RBAC) model and describe the
SAP NetWeaver authorization concept
In our last Chapter (Chap 16) we would like to show how the Mind Map can
help you to learn Web Dynpro ABAP easier and faster We create a Mind Map that
includes all the necessary Web Dynpro Elements
The examples in our book have been developed on a SAP System with SAP
NetWeaver 70 and Support Package 17 From SDN (httpwwwsdnsapcom) you
can download a free of charge SAP NetWeaver Trial Version with ABAP and SAP
GUI for testing With this Trial Version you can create most of our exercises
Yoursquoll also find most of the configuration steps at SDN To use the SAP interactive
forms by ADOBE you need both NetWeaver Trial Versions (ABAP and Java)
because ADS is an integral part of the SAP NetWeaver Java version Additionally
you need the ADOBE Live Cycle Designer from the SAP Service marketplace The
configuration steps required in this case are shown in the SAP PRESS book ldquoSAP
Interactive Forms by Adoberdquo (Hauser et al) To be able to work with the portal you
need the SAP NetWeaver Java Trial Version In the SAP PRESS book ldquoDevel-
operrsquos Guide to SAP NetWeaver Portal Applicationsrdquo (Banner et al) you will find
all the software and hardware requirements along with the configuration steps
The creation of a book takes time Many discussions with students and devel-
opers made us think about writing a practical book on the Web Dynpro ABAP
subject The most important issue was to guide the reader step-by-step with
practical examples Many weekends holidays and evenings were invested in this
book and the positive feedback of our colleagues always gave us new energy
vi Foreword
Acknowledgements
We would like to thank our proofreaders Dieter Schmitt and Heinz-Jurgen
Gebhardt Their advices and comments helped us a lot
Ulrich Gellert would like to thank all his colleagues of S+P LION AG for the
useful input during the project I also would like to thank my father Gerhard
Gellert who unfortunately died too early He introduced me into the world of IT
in 1983 and without him our company could never become what it is Special
thanks go to my mother Gabriele Gellert She has been supporting me until today
and she is the heart of our company Especially I would like to thank my lovely
wife Carmen and my children Alexa and Marc for their support during the project
Ana Daniela Cristea gives special thanks to NWCON Technology Consulting
especially to Thomas Muschalik and S+P LION AG for their great support Taking
this opportunity Irsquod like to thank to the special persons who have been guiding me
through my dissertation Octavian Prostean and Mircea Vladutiu Not to forget the
people who encouraged me to publish my first books and articles Aron Poanta and
Caius Panoiu thanking them for the useful advices Last but not least I would like
to thank my family and friends Especially to my mother Sabina Cristea and to
Susanne and Edgar Hammes who supported me with all their powers They gave
me the time I needed to be one of those who wrote this book for you
vii
Contents
1 What is Web Dynpro 1
2 SAP Easy Access 5
21 Changing the SAP Easy Access 6
22 Favorites List 6
23 Setting a Transaction as Start Transaction 8
24 Creating a Shortcut 8
3 Designing a Web Dynpro Component 11
31 View 14
311 View Layout 14
312 Context View 17
313 Actions 19
314 Methods 19
315 Properties 21
316 Attributes 22
32 Componentcontroller 23
33 Window 23
34 Application 24
35 ABAP Debugger 27
36 Web Dynpro Logon Page Configuration 30
4 ABAP Dictionary 33
41 Data Element 34
42 Domain 35
43 Structure 38
44 Table 40
45 Search Help 45
46 Database View 48
47 Table Type 51
48 Lock Object 52
ix
5 Context Nodes and Attributes at Design Time 55
51 Attributes 56
52 Nodes 58
521 Creating a Node that Uses an ABAP Dictionary
Repository Object 59
522 Working with Child Nodes 64
6 Data Binding Context Mapping and Interface Methods 67
61 Data Binding 67
62 Context Mapping 72
621 Internal Context Mapping 72
622 External Context Mapping 76
63 Interface Methods 83
7 View Controller Methods 87
71 Hook Methods 87
711 wdDoInit 88
712 wdDoExit 91
713 wdDoModifyView 91
714 wdDoBeforeAction 96
715 wdDoOnContextMenu 98
72 Supply Function Methods 102
73 User-Defined Instance Methods 103
74 Fire Methods 105
75 Event Handler Methods 109
8 Layout UI Elements 113
81 FlowLayout 114
82 GridLayout 116
83 MatrixLayout 119
84 RowLayout 120
9 User Interface Elements (UI elements) Static and Dynamic
Programming 123
91 Action 124
911 Timed Trigger 124
912 ButtonChoice 126
92 Selection 132
921 DropDownByKey 132
922 DropDownByIndex 135
923 RadioButtonGroupByIndex 137
93 Layout 140
931 ViewContainerUIElement 140
932 TabStrip 146
933 PageHeader 149
934 ContextualPanel 152
x Contents
935 Tray UI Element 155
936 MessageArea 159
94 Complex 163
941 Table 163
942 RoadMap 171
943 PhaseIndicator 180
944 Tree ndash Sequential Implementation 186
945 DateNavigator 191
95 Graphic 197
951 Image 198
952 BusinessGraphics 201
96 Integration 206
961 The InteractiveForm 206
962 FileUpload 215
10 Messages Exceptions and Web Dynpro ABAP 221
101 Message Handling 222
1011 Dynamic Texts Stored in the Text Pool
of the Assistance Class 222
1012 Text from Database Table T100 225
102 Exception Handling 227
1021 Exception Class with OTR Text 228
1022 Exception Class with Text from a Message Class 233
11 Writing Multilanguage Applications 237
111 Creating Multilanguage User Interfaces 238
1111 Internationalization of Data Elements Defined
in ABAP Dictionary 240
1112 Internationalization of Domains Defined
in ABAP Dictionary 241
1113 Internationalization of Text from OTR 242
1114 Internationalization of Text from Assistance Class 244
1115 Internationalization of Messages 245
112 Multilanguage Records in the Database 247
1121 Study an Example Created in the System 248
1122 Creating Table Structures and Internationalization
of the Records 250
1123 Using the Internationalized Records in WebDynpro 255
12 Web Dynpro Model 259
121 Assistance Class as a Model for a Multicomponent
Application 260
122 BAPI as a Model 274
1221 Creating a BAPI 274
1222 Using the Created BAPI as a Model 279
123 Web Service 283
Contents xi
1231 Creating the Web Service 284
1232 Web Service Configuration 287
1233 Testing the Web Service 288
1234 Consuming the Web Service in Web Dynpro 289
13 ALV and Select Options 295
131 SAP List Viewer 295
1311 Simple ALV Example 296
1312 ALV Configuration Model 299
132 Select Options 306
133 ALV and Select Options 313
14 Integrating a Web Dynpro Application into the SAP
NetWeaver Portal 315
141 Creating a Folder 316
142 Connecting to the Back-End ABAP System 317
143 Creating an iView 321
144 Creating a Role and Role Assignment 324
145 Running the Application into the Portal 327
146 Triggering a Portal Event 327
147 Reacting to a Portal Event 329
148 Creating a Page 331
149 Running the Application that Processes Portal Events 333
15 Web Dynpro and Authorization 335
151 Role Based Access Control Pattern ndash RBAC 337
152 Authorization Object Class 338
153 Authorization Object 338
154 Authorization Fields 340
155 Creating a Single Role and Changing its Authorization Data 343
156 Creating the Web Dynpro Component 346
1561 Checking the Authorization of the Current User 346
1562 Assigning the User-Role and Running
the Application 349
16 Web Dynpro Mind Map 351
161 Creating a Mind Map 351
162 Web Dynpro ABAP Mind Map 352
Appendix 353
Index 357
xii Contents
Chapter 1
What is Web Dynpro
ldquoLogic will get you from A to B Imagination will take you everywhererdquo
Albert Einstein
Abstract In this chapter we present the place and role of the Web Dynpro within
the SAP NetWeaver platform So we start with the layers of the SAP NetWeaver
platform we continue with the importance of the Application Platform layer and
we conclude with the place and role of Web Dynpro (ABAP and Java) within the
Application Server ABAP and respective Application Server Java
To answer this question we have to look at the SAP NetWeaver technology
platform (Fig 11)
As we can see four layers are distinguished in this context Application Plat-
form Process Integration Information Integration and People Integration
The Application Platform represents the technical basis of almost all the other
SAP products This is the reason why the Application Platform plays a central role
in the SAP NetWeaver
The Application Platform essentially offers two programming interfaces ABAP
and Java (J2EE) ABAP is the programming interface for Application Server (AS)
ABAP and Java is the programming interface for AS Java
To create ABAP and Java applications we have two independent development
environments ABAP Workbench for ABAP and SAP NetWeaver Developer
Studio for Java
Both development environments offer the possibility to create web based appli-
cations built by using declarative programming techniques based on the Model
View Controller (MVC) paradigm
SAP NetWeaver Developer Studio is the SAPrsquos own development environment
used to develop Java-based multilayer business applications This development
environment is based on Eclipse and offers a Web Dynpro Perspective to create
Web Dynpro Java applications (Fig 12)
All the tools we need to create Web Dynpro Java applications are found within
the SAP NetWeaver Developer Studio
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_1 Springer-Verlag Berlin Heidelberg 2010
1
ABAP Workbench is the SAPrsquos own development environment used to develop
ABAP-based multilayer business applications This development environment
offers Web Dynpro Explorer to create Web Dynpro ABAP components (Fig 13)
Fig 12 SAP NetWeaver Developer Studio ndash Web Dynpro perspective
Fig 11 SAP NetWeaver components (SAP)
2 1 What is Web Dynpro
The Application Server ABAP has the structure presented in Fig 14
Fig 13 ABAP Workbench ndash Web Dynpro Explorer
Fig 14 AS ABAP (SAP)
1 What is Web Dynpro 3
As we can see most of the AS ABAP components can be divided into three
layers
l Presentation layerl Business layerl Persistence layer
Web Dynpro ABAP is part of the presentation layer and itrsquos the SAP standard UI
technology used for developing web business applications without knowing HTML
or JavaScript
Web Dynpro ABAP offers many advantages as follows
l Strict separation between the layout and business datal Re-use and better maintainability through reusabilityl Automatic input checksl Automatic data transport using data bindingl WYSIWYG (What You See Is What You Get) view editor
Web Dynpro ABAP andWeb Dynpro Java mostly offer the same functionalities
But of course there are some differences between them for example
l Web Dynpro Java unlike the Web Dynpro ABAP disposes of a ViewSet that
allows us to integrate in a Screen more Views by using certain pre-defined
layouts In this respect their common part is the View Container UI Elementl Web Dynpro Java offers graphical tools that ease the programming work as
Navigation Manager and Diagram View unlike the Web Dynpro ABAP where
we dispose only of a tool used to visualize and to define the window structure
The Web Dynpro ABAP is what the current book is about More information
about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by
Chris Whealy
4 1 What is Web Dynpro
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
Foreword
Taking Albert Einsteinrsquos quote as a motto ldquoExample isnrsquot another way to teach it
is the only way to teachrdquo our target was to create a book for explaining step-by-
step the Web Dynpro ABAP to the reader Assisted by practical examples you will
learn more and more about Web Dynpro ABAP from chapter to chapter Moreover
the connections with other areas are also pointed out by practical examples
In Chap 1 we explain what means the Web Dynpro integrated in a SAP
NetWeaver platform
Chapter 2 is about the ldquoEasy Accessrdquo to a SAP System
In Chap 3 we describe the modality to creating a Web Dynpro Component
We explain all the elements of a view through examples and we show you how to
use the ABAP Debugger to diagnose the Application
Chapter 4 gives attention to the ABAP Dictionary where all the Development
Objects are created These ones are the basis for all our examples With this
knowledge you will be able to easily create Web Dynpro applications
In Chap 5 we present the Context Nodes and Attributes and explain their
importance for the Web Dynpro We consider the possibilities to create use fill in
with data and read the contents
In Chap 6 we go into details with Data Binding Context Mapping and
Interface Methods For this purpose we present the Data Binding through simple
examples We change these examples step-by-step to show you a clear picture of
the context mapping (as well as in an internal and external way ndash Direct Mapping
and Reverse Mapping)
Chapter 7 covers the View Controller Methods beginning with some exam-
ples of Hook Methods and ending with User Defined Methods and Event Han-
dler Methods Each method is explained by an example
Chapter 8 illustrates the layout of the UI Elements
In our largest chapter (Chap 9) we describe in details the User Interfaces (UI)
Each UI element is presented through an example Moreover we show the dynamic
programming of these UI elements and give additional information
v
Chapter 10 includes Messages and Exceptions We start with the creation of the
necessary classes (Message Class Exceptions Class andAssistance Class) and we
show you how to use them to create solid applications that catch exceptions and
inform the user through messages
Chapter 11 is about creating Multilingual Applications on the levels of inter-
faces and master data We also present how to use these data in the Web Dynpro
components
In Chap 12 we present several Web Dynpro Models We show you not only
how to use an Assistance Class a Web Service or a BAPI but also how to create
Multi Component Applications
Chapter 13 covers the ABAP list viewer (ALV) and the Select options (SO)
We start again with simple examples and build them up to an ALV output configu-
ration in combination with SOs
In Chap 14 itrsquos described the integration of Web Dynpro Applications in the
SAP NetWeaver Portal We present the connection with the back-end ABAP
System ending with WD applications that send and react to a portal event
The next Chapter (Chap 15) is about Web Dynpro and Authorizations We
shortly present the Role Based Access Control (RBAC) model and describe the
SAP NetWeaver authorization concept
In our last Chapter (Chap 16) we would like to show how the Mind Map can
help you to learn Web Dynpro ABAP easier and faster We create a Mind Map that
includes all the necessary Web Dynpro Elements
The examples in our book have been developed on a SAP System with SAP
NetWeaver 70 and Support Package 17 From SDN (httpwwwsdnsapcom) you
can download a free of charge SAP NetWeaver Trial Version with ABAP and SAP
GUI for testing With this Trial Version you can create most of our exercises
Yoursquoll also find most of the configuration steps at SDN To use the SAP interactive
forms by ADOBE you need both NetWeaver Trial Versions (ABAP and Java)
because ADS is an integral part of the SAP NetWeaver Java version Additionally
you need the ADOBE Live Cycle Designer from the SAP Service marketplace The
configuration steps required in this case are shown in the SAP PRESS book ldquoSAP
Interactive Forms by Adoberdquo (Hauser et al) To be able to work with the portal you
need the SAP NetWeaver Java Trial Version In the SAP PRESS book ldquoDevel-
operrsquos Guide to SAP NetWeaver Portal Applicationsrdquo (Banner et al) you will find
all the software and hardware requirements along with the configuration steps
The creation of a book takes time Many discussions with students and devel-
opers made us think about writing a practical book on the Web Dynpro ABAP
subject The most important issue was to guide the reader step-by-step with
practical examples Many weekends holidays and evenings were invested in this
book and the positive feedback of our colleagues always gave us new energy
vi Foreword
Acknowledgements
We would like to thank our proofreaders Dieter Schmitt and Heinz-Jurgen
Gebhardt Their advices and comments helped us a lot
Ulrich Gellert would like to thank all his colleagues of S+P LION AG for the
useful input during the project I also would like to thank my father Gerhard
Gellert who unfortunately died too early He introduced me into the world of IT
in 1983 and without him our company could never become what it is Special
thanks go to my mother Gabriele Gellert She has been supporting me until today
and she is the heart of our company Especially I would like to thank my lovely
wife Carmen and my children Alexa and Marc for their support during the project
Ana Daniela Cristea gives special thanks to NWCON Technology Consulting
especially to Thomas Muschalik and S+P LION AG for their great support Taking
this opportunity Irsquod like to thank to the special persons who have been guiding me
through my dissertation Octavian Prostean and Mircea Vladutiu Not to forget the
people who encouraged me to publish my first books and articles Aron Poanta and
Caius Panoiu thanking them for the useful advices Last but not least I would like
to thank my family and friends Especially to my mother Sabina Cristea and to
Susanne and Edgar Hammes who supported me with all their powers They gave
me the time I needed to be one of those who wrote this book for you
vii
Contents
1 What is Web Dynpro 1
2 SAP Easy Access 5
21 Changing the SAP Easy Access 6
22 Favorites List 6
23 Setting a Transaction as Start Transaction 8
24 Creating a Shortcut 8
3 Designing a Web Dynpro Component 11
31 View 14
311 View Layout 14
312 Context View 17
313 Actions 19
314 Methods 19
315 Properties 21
316 Attributes 22
32 Componentcontroller 23
33 Window 23
34 Application 24
35 ABAP Debugger 27
36 Web Dynpro Logon Page Configuration 30
4 ABAP Dictionary 33
41 Data Element 34
42 Domain 35
43 Structure 38
44 Table 40
45 Search Help 45
46 Database View 48
47 Table Type 51
48 Lock Object 52
ix
5 Context Nodes and Attributes at Design Time 55
51 Attributes 56
52 Nodes 58
521 Creating a Node that Uses an ABAP Dictionary
Repository Object 59
522 Working with Child Nodes 64
6 Data Binding Context Mapping and Interface Methods 67
61 Data Binding 67
62 Context Mapping 72
621 Internal Context Mapping 72
622 External Context Mapping 76
63 Interface Methods 83
7 View Controller Methods 87
71 Hook Methods 87
711 wdDoInit 88
712 wdDoExit 91
713 wdDoModifyView 91
714 wdDoBeforeAction 96
715 wdDoOnContextMenu 98
72 Supply Function Methods 102
73 User-Defined Instance Methods 103
74 Fire Methods 105
75 Event Handler Methods 109
8 Layout UI Elements 113
81 FlowLayout 114
82 GridLayout 116
83 MatrixLayout 119
84 RowLayout 120
9 User Interface Elements (UI elements) Static and Dynamic
Programming 123
91 Action 124
911 Timed Trigger 124
912 ButtonChoice 126
92 Selection 132
921 DropDownByKey 132
922 DropDownByIndex 135
923 RadioButtonGroupByIndex 137
93 Layout 140
931 ViewContainerUIElement 140
932 TabStrip 146
933 PageHeader 149
934 ContextualPanel 152
x Contents
935 Tray UI Element 155
936 MessageArea 159
94 Complex 163
941 Table 163
942 RoadMap 171
943 PhaseIndicator 180
944 Tree ndash Sequential Implementation 186
945 DateNavigator 191
95 Graphic 197
951 Image 198
952 BusinessGraphics 201
96 Integration 206
961 The InteractiveForm 206
962 FileUpload 215
10 Messages Exceptions and Web Dynpro ABAP 221
101 Message Handling 222
1011 Dynamic Texts Stored in the Text Pool
of the Assistance Class 222
1012 Text from Database Table T100 225
102 Exception Handling 227
1021 Exception Class with OTR Text 228
1022 Exception Class with Text from a Message Class 233
11 Writing Multilanguage Applications 237
111 Creating Multilanguage User Interfaces 238
1111 Internationalization of Data Elements Defined
in ABAP Dictionary 240
1112 Internationalization of Domains Defined
in ABAP Dictionary 241
1113 Internationalization of Text from OTR 242
1114 Internationalization of Text from Assistance Class 244
1115 Internationalization of Messages 245
112 Multilanguage Records in the Database 247
1121 Study an Example Created in the System 248
1122 Creating Table Structures and Internationalization
of the Records 250
1123 Using the Internationalized Records in WebDynpro 255
12 Web Dynpro Model 259
121 Assistance Class as a Model for a Multicomponent
Application 260
122 BAPI as a Model 274
1221 Creating a BAPI 274
1222 Using the Created BAPI as a Model 279
123 Web Service 283
Contents xi
1231 Creating the Web Service 284
1232 Web Service Configuration 287
1233 Testing the Web Service 288
1234 Consuming the Web Service in Web Dynpro 289
13 ALV and Select Options 295
131 SAP List Viewer 295
1311 Simple ALV Example 296
1312 ALV Configuration Model 299
132 Select Options 306
133 ALV and Select Options 313
14 Integrating a Web Dynpro Application into the SAP
NetWeaver Portal 315
141 Creating a Folder 316
142 Connecting to the Back-End ABAP System 317
143 Creating an iView 321
144 Creating a Role and Role Assignment 324
145 Running the Application into the Portal 327
146 Triggering a Portal Event 327
147 Reacting to a Portal Event 329
148 Creating a Page 331
149 Running the Application that Processes Portal Events 333
15 Web Dynpro and Authorization 335
151 Role Based Access Control Pattern ndash RBAC 337
152 Authorization Object Class 338
153 Authorization Object 338
154 Authorization Fields 340
155 Creating a Single Role and Changing its Authorization Data 343
156 Creating the Web Dynpro Component 346
1561 Checking the Authorization of the Current User 346
1562 Assigning the User-Role and Running
the Application 349
16 Web Dynpro Mind Map 351
161 Creating a Mind Map 351
162 Web Dynpro ABAP Mind Map 352
Appendix 353
Index 357
xii Contents
Chapter 1
What is Web Dynpro
ldquoLogic will get you from A to B Imagination will take you everywhererdquo
Albert Einstein
Abstract In this chapter we present the place and role of the Web Dynpro within
the SAP NetWeaver platform So we start with the layers of the SAP NetWeaver
platform we continue with the importance of the Application Platform layer and
we conclude with the place and role of Web Dynpro (ABAP and Java) within the
Application Server ABAP and respective Application Server Java
To answer this question we have to look at the SAP NetWeaver technology
platform (Fig 11)
As we can see four layers are distinguished in this context Application Plat-
form Process Integration Information Integration and People Integration
The Application Platform represents the technical basis of almost all the other
SAP products This is the reason why the Application Platform plays a central role
in the SAP NetWeaver
The Application Platform essentially offers two programming interfaces ABAP
and Java (J2EE) ABAP is the programming interface for Application Server (AS)
ABAP and Java is the programming interface for AS Java
To create ABAP and Java applications we have two independent development
environments ABAP Workbench for ABAP and SAP NetWeaver Developer
Studio for Java
Both development environments offer the possibility to create web based appli-
cations built by using declarative programming techniques based on the Model
View Controller (MVC) paradigm
SAP NetWeaver Developer Studio is the SAPrsquos own development environment
used to develop Java-based multilayer business applications This development
environment is based on Eclipse and offers a Web Dynpro Perspective to create
Web Dynpro Java applications (Fig 12)
All the tools we need to create Web Dynpro Java applications are found within
the SAP NetWeaver Developer Studio
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_1 Springer-Verlag Berlin Heidelberg 2010
1
ABAP Workbench is the SAPrsquos own development environment used to develop
ABAP-based multilayer business applications This development environment
offers Web Dynpro Explorer to create Web Dynpro ABAP components (Fig 13)
Fig 12 SAP NetWeaver Developer Studio ndash Web Dynpro perspective
Fig 11 SAP NetWeaver components (SAP)
2 1 What is Web Dynpro
The Application Server ABAP has the structure presented in Fig 14
Fig 13 ABAP Workbench ndash Web Dynpro Explorer
Fig 14 AS ABAP (SAP)
1 What is Web Dynpro 3
As we can see most of the AS ABAP components can be divided into three
layers
l Presentation layerl Business layerl Persistence layer
Web Dynpro ABAP is part of the presentation layer and itrsquos the SAP standard UI
technology used for developing web business applications without knowing HTML
or JavaScript
Web Dynpro ABAP offers many advantages as follows
l Strict separation between the layout and business datal Re-use and better maintainability through reusabilityl Automatic input checksl Automatic data transport using data bindingl WYSIWYG (What You See Is What You Get) view editor
Web Dynpro ABAP andWeb Dynpro Java mostly offer the same functionalities
But of course there are some differences between them for example
l Web Dynpro Java unlike the Web Dynpro ABAP disposes of a ViewSet that
allows us to integrate in a Screen more Views by using certain pre-defined
layouts In this respect their common part is the View Container UI Elementl Web Dynpro Java offers graphical tools that ease the programming work as
Navigation Manager and Diagram View unlike the Web Dynpro ABAP where
we dispose only of a tool used to visualize and to define the window structure
The Web Dynpro ABAP is what the current book is about More information
about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by
Chris Whealy
4 1 What is Web Dynpro
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
Chapter 10 includes Messages and Exceptions We start with the creation of the
necessary classes (Message Class Exceptions Class andAssistance Class) and we
show you how to use them to create solid applications that catch exceptions and
inform the user through messages
Chapter 11 is about creating Multilingual Applications on the levels of inter-
faces and master data We also present how to use these data in the Web Dynpro
components
In Chap 12 we present several Web Dynpro Models We show you not only
how to use an Assistance Class a Web Service or a BAPI but also how to create
Multi Component Applications
Chapter 13 covers the ABAP list viewer (ALV) and the Select options (SO)
We start again with simple examples and build them up to an ALV output configu-
ration in combination with SOs
In Chap 14 itrsquos described the integration of Web Dynpro Applications in the
SAP NetWeaver Portal We present the connection with the back-end ABAP
System ending with WD applications that send and react to a portal event
The next Chapter (Chap 15) is about Web Dynpro and Authorizations We
shortly present the Role Based Access Control (RBAC) model and describe the
SAP NetWeaver authorization concept
In our last Chapter (Chap 16) we would like to show how the Mind Map can
help you to learn Web Dynpro ABAP easier and faster We create a Mind Map that
includes all the necessary Web Dynpro Elements
The examples in our book have been developed on a SAP System with SAP
NetWeaver 70 and Support Package 17 From SDN (httpwwwsdnsapcom) you
can download a free of charge SAP NetWeaver Trial Version with ABAP and SAP
GUI for testing With this Trial Version you can create most of our exercises
Yoursquoll also find most of the configuration steps at SDN To use the SAP interactive
forms by ADOBE you need both NetWeaver Trial Versions (ABAP and Java)
because ADS is an integral part of the SAP NetWeaver Java version Additionally
you need the ADOBE Live Cycle Designer from the SAP Service marketplace The
configuration steps required in this case are shown in the SAP PRESS book ldquoSAP
Interactive Forms by Adoberdquo (Hauser et al) To be able to work with the portal you
need the SAP NetWeaver Java Trial Version In the SAP PRESS book ldquoDevel-
operrsquos Guide to SAP NetWeaver Portal Applicationsrdquo (Banner et al) you will find
all the software and hardware requirements along with the configuration steps
The creation of a book takes time Many discussions with students and devel-
opers made us think about writing a practical book on the Web Dynpro ABAP
subject The most important issue was to guide the reader step-by-step with
practical examples Many weekends holidays and evenings were invested in this
book and the positive feedback of our colleagues always gave us new energy
vi Foreword
Acknowledgements
We would like to thank our proofreaders Dieter Schmitt and Heinz-Jurgen
Gebhardt Their advices and comments helped us a lot
Ulrich Gellert would like to thank all his colleagues of S+P LION AG for the
useful input during the project I also would like to thank my father Gerhard
Gellert who unfortunately died too early He introduced me into the world of IT
in 1983 and without him our company could never become what it is Special
thanks go to my mother Gabriele Gellert She has been supporting me until today
and she is the heart of our company Especially I would like to thank my lovely
wife Carmen and my children Alexa and Marc for their support during the project
Ana Daniela Cristea gives special thanks to NWCON Technology Consulting
especially to Thomas Muschalik and S+P LION AG for their great support Taking
this opportunity Irsquod like to thank to the special persons who have been guiding me
through my dissertation Octavian Prostean and Mircea Vladutiu Not to forget the
people who encouraged me to publish my first books and articles Aron Poanta and
Caius Panoiu thanking them for the useful advices Last but not least I would like
to thank my family and friends Especially to my mother Sabina Cristea and to
Susanne and Edgar Hammes who supported me with all their powers They gave
me the time I needed to be one of those who wrote this book for you
vii
Contents
1 What is Web Dynpro 1
2 SAP Easy Access 5
21 Changing the SAP Easy Access 6
22 Favorites List 6
23 Setting a Transaction as Start Transaction 8
24 Creating a Shortcut 8
3 Designing a Web Dynpro Component 11
31 View 14
311 View Layout 14
312 Context View 17
313 Actions 19
314 Methods 19
315 Properties 21
316 Attributes 22
32 Componentcontroller 23
33 Window 23
34 Application 24
35 ABAP Debugger 27
36 Web Dynpro Logon Page Configuration 30
4 ABAP Dictionary 33
41 Data Element 34
42 Domain 35
43 Structure 38
44 Table 40
45 Search Help 45
46 Database View 48
47 Table Type 51
48 Lock Object 52
ix
5 Context Nodes and Attributes at Design Time 55
51 Attributes 56
52 Nodes 58
521 Creating a Node that Uses an ABAP Dictionary
Repository Object 59
522 Working with Child Nodes 64
6 Data Binding Context Mapping and Interface Methods 67
61 Data Binding 67
62 Context Mapping 72
621 Internal Context Mapping 72
622 External Context Mapping 76
63 Interface Methods 83
7 View Controller Methods 87
71 Hook Methods 87
711 wdDoInit 88
712 wdDoExit 91
713 wdDoModifyView 91
714 wdDoBeforeAction 96
715 wdDoOnContextMenu 98
72 Supply Function Methods 102
73 User-Defined Instance Methods 103
74 Fire Methods 105
75 Event Handler Methods 109
8 Layout UI Elements 113
81 FlowLayout 114
82 GridLayout 116
83 MatrixLayout 119
84 RowLayout 120
9 User Interface Elements (UI elements) Static and Dynamic
Programming 123
91 Action 124
911 Timed Trigger 124
912 ButtonChoice 126
92 Selection 132
921 DropDownByKey 132
922 DropDownByIndex 135
923 RadioButtonGroupByIndex 137
93 Layout 140
931 ViewContainerUIElement 140
932 TabStrip 146
933 PageHeader 149
934 ContextualPanel 152
x Contents
935 Tray UI Element 155
936 MessageArea 159
94 Complex 163
941 Table 163
942 RoadMap 171
943 PhaseIndicator 180
944 Tree ndash Sequential Implementation 186
945 DateNavigator 191
95 Graphic 197
951 Image 198
952 BusinessGraphics 201
96 Integration 206
961 The InteractiveForm 206
962 FileUpload 215
10 Messages Exceptions and Web Dynpro ABAP 221
101 Message Handling 222
1011 Dynamic Texts Stored in the Text Pool
of the Assistance Class 222
1012 Text from Database Table T100 225
102 Exception Handling 227
1021 Exception Class with OTR Text 228
1022 Exception Class with Text from a Message Class 233
11 Writing Multilanguage Applications 237
111 Creating Multilanguage User Interfaces 238
1111 Internationalization of Data Elements Defined
in ABAP Dictionary 240
1112 Internationalization of Domains Defined
in ABAP Dictionary 241
1113 Internationalization of Text from OTR 242
1114 Internationalization of Text from Assistance Class 244
1115 Internationalization of Messages 245
112 Multilanguage Records in the Database 247
1121 Study an Example Created in the System 248
1122 Creating Table Structures and Internationalization
of the Records 250
1123 Using the Internationalized Records in WebDynpro 255
12 Web Dynpro Model 259
121 Assistance Class as a Model for a Multicomponent
Application 260
122 BAPI as a Model 274
1221 Creating a BAPI 274
1222 Using the Created BAPI as a Model 279
123 Web Service 283
Contents xi
1231 Creating the Web Service 284
1232 Web Service Configuration 287
1233 Testing the Web Service 288
1234 Consuming the Web Service in Web Dynpro 289
13 ALV and Select Options 295
131 SAP List Viewer 295
1311 Simple ALV Example 296
1312 ALV Configuration Model 299
132 Select Options 306
133 ALV and Select Options 313
14 Integrating a Web Dynpro Application into the SAP
NetWeaver Portal 315
141 Creating a Folder 316
142 Connecting to the Back-End ABAP System 317
143 Creating an iView 321
144 Creating a Role and Role Assignment 324
145 Running the Application into the Portal 327
146 Triggering a Portal Event 327
147 Reacting to a Portal Event 329
148 Creating a Page 331
149 Running the Application that Processes Portal Events 333
15 Web Dynpro and Authorization 335
151 Role Based Access Control Pattern ndash RBAC 337
152 Authorization Object Class 338
153 Authorization Object 338
154 Authorization Fields 340
155 Creating a Single Role and Changing its Authorization Data 343
156 Creating the Web Dynpro Component 346
1561 Checking the Authorization of the Current User 346
1562 Assigning the User-Role and Running
the Application 349
16 Web Dynpro Mind Map 351
161 Creating a Mind Map 351
162 Web Dynpro ABAP Mind Map 352
Appendix 353
Index 357
xii Contents
Chapter 1
What is Web Dynpro
ldquoLogic will get you from A to B Imagination will take you everywhererdquo
Albert Einstein
Abstract In this chapter we present the place and role of the Web Dynpro within
the SAP NetWeaver platform So we start with the layers of the SAP NetWeaver
platform we continue with the importance of the Application Platform layer and
we conclude with the place and role of Web Dynpro (ABAP and Java) within the
Application Server ABAP and respective Application Server Java
To answer this question we have to look at the SAP NetWeaver technology
platform (Fig 11)
As we can see four layers are distinguished in this context Application Plat-
form Process Integration Information Integration and People Integration
The Application Platform represents the technical basis of almost all the other
SAP products This is the reason why the Application Platform plays a central role
in the SAP NetWeaver
The Application Platform essentially offers two programming interfaces ABAP
and Java (J2EE) ABAP is the programming interface for Application Server (AS)
ABAP and Java is the programming interface for AS Java
To create ABAP and Java applications we have two independent development
environments ABAP Workbench for ABAP and SAP NetWeaver Developer
Studio for Java
Both development environments offer the possibility to create web based appli-
cations built by using declarative programming techniques based on the Model
View Controller (MVC) paradigm
SAP NetWeaver Developer Studio is the SAPrsquos own development environment
used to develop Java-based multilayer business applications This development
environment is based on Eclipse and offers a Web Dynpro Perspective to create
Web Dynpro Java applications (Fig 12)
All the tools we need to create Web Dynpro Java applications are found within
the SAP NetWeaver Developer Studio
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_1 Springer-Verlag Berlin Heidelberg 2010
1
ABAP Workbench is the SAPrsquos own development environment used to develop
ABAP-based multilayer business applications This development environment
offers Web Dynpro Explorer to create Web Dynpro ABAP components (Fig 13)
Fig 12 SAP NetWeaver Developer Studio ndash Web Dynpro perspective
Fig 11 SAP NetWeaver components (SAP)
2 1 What is Web Dynpro
The Application Server ABAP has the structure presented in Fig 14
Fig 13 ABAP Workbench ndash Web Dynpro Explorer
Fig 14 AS ABAP (SAP)
1 What is Web Dynpro 3
As we can see most of the AS ABAP components can be divided into three
layers
l Presentation layerl Business layerl Persistence layer
Web Dynpro ABAP is part of the presentation layer and itrsquos the SAP standard UI
technology used for developing web business applications without knowing HTML
or JavaScript
Web Dynpro ABAP offers many advantages as follows
l Strict separation between the layout and business datal Re-use and better maintainability through reusabilityl Automatic input checksl Automatic data transport using data bindingl WYSIWYG (What You See Is What You Get) view editor
Web Dynpro ABAP andWeb Dynpro Java mostly offer the same functionalities
But of course there are some differences between them for example
l Web Dynpro Java unlike the Web Dynpro ABAP disposes of a ViewSet that
allows us to integrate in a Screen more Views by using certain pre-defined
layouts In this respect their common part is the View Container UI Elementl Web Dynpro Java offers graphical tools that ease the programming work as
Navigation Manager and Diagram View unlike the Web Dynpro ABAP where
we dispose only of a tool used to visualize and to define the window structure
The Web Dynpro ABAP is what the current book is about More information
about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by
Chris Whealy
4 1 What is Web Dynpro
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
Acknowledgements
We would like to thank our proofreaders Dieter Schmitt and Heinz-Jurgen
Gebhardt Their advices and comments helped us a lot
Ulrich Gellert would like to thank all his colleagues of S+P LION AG for the
useful input during the project I also would like to thank my father Gerhard
Gellert who unfortunately died too early He introduced me into the world of IT
in 1983 and without him our company could never become what it is Special
thanks go to my mother Gabriele Gellert She has been supporting me until today
and she is the heart of our company Especially I would like to thank my lovely
wife Carmen and my children Alexa and Marc for their support during the project
Ana Daniela Cristea gives special thanks to NWCON Technology Consulting
especially to Thomas Muschalik and S+P LION AG for their great support Taking
this opportunity Irsquod like to thank to the special persons who have been guiding me
through my dissertation Octavian Prostean and Mircea Vladutiu Not to forget the
people who encouraged me to publish my first books and articles Aron Poanta and
Caius Panoiu thanking them for the useful advices Last but not least I would like
to thank my family and friends Especially to my mother Sabina Cristea and to
Susanne and Edgar Hammes who supported me with all their powers They gave
me the time I needed to be one of those who wrote this book for you
vii
Contents
1 What is Web Dynpro 1
2 SAP Easy Access 5
21 Changing the SAP Easy Access 6
22 Favorites List 6
23 Setting a Transaction as Start Transaction 8
24 Creating a Shortcut 8
3 Designing a Web Dynpro Component 11
31 View 14
311 View Layout 14
312 Context View 17
313 Actions 19
314 Methods 19
315 Properties 21
316 Attributes 22
32 Componentcontroller 23
33 Window 23
34 Application 24
35 ABAP Debugger 27
36 Web Dynpro Logon Page Configuration 30
4 ABAP Dictionary 33
41 Data Element 34
42 Domain 35
43 Structure 38
44 Table 40
45 Search Help 45
46 Database View 48
47 Table Type 51
48 Lock Object 52
ix
5 Context Nodes and Attributes at Design Time 55
51 Attributes 56
52 Nodes 58
521 Creating a Node that Uses an ABAP Dictionary
Repository Object 59
522 Working with Child Nodes 64
6 Data Binding Context Mapping and Interface Methods 67
61 Data Binding 67
62 Context Mapping 72
621 Internal Context Mapping 72
622 External Context Mapping 76
63 Interface Methods 83
7 View Controller Methods 87
71 Hook Methods 87
711 wdDoInit 88
712 wdDoExit 91
713 wdDoModifyView 91
714 wdDoBeforeAction 96
715 wdDoOnContextMenu 98
72 Supply Function Methods 102
73 User-Defined Instance Methods 103
74 Fire Methods 105
75 Event Handler Methods 109
8 Layout UI Elements 113
81 FlowLayout 114
82 GridLayout 116
83 MatrixLayout 119
84 RowLayout 120
9 User Interface Elements (UI elements) Static and Dynamic
Programming 123
91 Action 124
911 Timed Trigger 124
912 ButtonChoice 126
92 Selection 132
921 DropDownByKey 132
922 DropDownByIndex 135
923 RadioButtonGroupByIndex 137
93 Layout 140
931 ViewContainerUIElement 140
932 TabStrip 146
933 PageHeader 149
934 ContextualPanel 152
x Contents
935 Tray UI Element 155
936 MessageArea 159
94 Complex 163
941 Table 163
942 RoadMap 171
943 PhaseIndicator 180
944 Tree ndash Sequential Implementation 186
945 DateNavigator 191
95 Graphic 197
951 Image 198
952 BusinessGraphics 201
96 Integration 206
961 The InteractiveForm 206
962 FileUpload 215
10 Messages Exceptions and Web Dynpro ABAP 221
101 Message Handling 222
1011 Dynamic Texts Stored in the Text Pool
of the Assistance Class 222
1012 Text from Database Table T100 225
102 Exception Handling 227
1021 Exception Class with OTR Text 228
1022 Exception Class with Text from a Message Class 233
11 Writing Multilanguage Applications 237
111 Creating Multilanguage User Interfaces 238
1111 Internationalization of Data Elements Defined
in ABAP Dictionary 240
1112 Internationalization of Domains Defined
in ABAP Dictionary 241
1113 Internationalization of Text from OTR 242
1114 Internationalization of Text from Assistance Class 244
1115 Internationalization of Messages 245
112 Multilanguage Records in the Database 247
1121 Study an Example Created in the System 248
1122 Creating Table Structures and Internationalization
of the Records 250
1123 Using the Internationalized Records in WebDynpro 255
12 Web Dynpro Model 259
121 Assistance Class as a Model for a Multicomponent
Application 260
122 BAPI as a Model 274
1221 Creating a BAPI 274
1222 Using the Created BAPI as a Model 279
123 Web Service 283
Contents xi
1231 Creating the Web Service 284
1232 Web Service Configuration 287
1233 Testing the Web Service 288
1234 Consuming the Web Service in Web Dynpro 289
13 ALV and Select Options 295
131 SAP List Viewer 295
1311 Simple ALV Example 296
1312 ALV Configuration Model 299
132 Select Options 306
133 ALV and Select Options 313
14 Integrating a Web Dynpro Application into the SAP
NetWeaver Portal 315
141 Creating a Folder 316
142 Connecting to the Back-End ABAP System 317
143 Creating an iView 321
144 Creating a Role and Role Assignment 324
145 Running the Application into the Portal 327
146 Triggering a Portal Event 327
147 Reacting to a Portal Event 329
148 Creating a Page 331
149 Running the Application that Processes Portal Events 333
15 Web Dynpro and Authorization 335
151 Role Based Access Control Pattern ndash RBAC 337
152 Authorization Object Class 338
153 Authorization Object 338
154 Authorization Fields 340
155 Creating a Single Role and Changing its Authorization Data 343
156 Creating the Web Dynpro Component 346
1561 Checking the Authorization of the Current User 346
1562 Assigning the User-Role and Running
the Application 349
16 Web Dynpro Mind Map 351
161 Creating a Mind Map 351
162 Web Dynpro ABAP Mind Map 352
Appendix 353
Index 357
xii Contents
Chapter 1
What is Web Dynpro
ldquoLogic will get you from A to B Imagination will take you everywhererdquo
Albert Einstein
Abstract In this chapter we present the place and role of the Web Dynpro within
the SAP NetWeaver platform So we start with the layers of the SAP NetWeaver
platform we continue with the importance of the Application Platform layer and
we conclude with the place and role of Web Dynpro (ABAP and Java) within the
Application Server ABAP and respective Application Server Java
To answer this question we have to look at the SAP NetWeaver technology
platform (Fig 11)
As we can see four layers are distinguished in this context Application Plat-
form Process Integration Information Integration and People Integration
The Application Platform represents the technical basis of almost all the other
SAP products This is the reason why the Application Platform plays a central role
in the SAP NetWeaver
The Application Platform essentially offers two programming interfaces ABAP
and Java (J2EE) ABAP is the programming interface for Application Server (AS)
ABAP and Java is the programming interface for AS Java
To create ABAP and Java applications we have two independent development
environments ABAP Workbench for ABAP and SAP NetWeaver Developer
Studio for Java
Both development environments offer the possibility to create web based appli-
cations built by using declarative programming techniques based on the Model
View Controller (MVC) paradigm
SAP NetWeaver Developer Studio is the SAPrsquos own development environment
used to develop Java-based multilayer business applications This development
environment is based on Eclipse and offers a Web Dynpro Perspective to create
Web Dynpro Java applications (Fig 12)
All the tools we need to create Web Dynpro Java applications are found within
the SAP NetWeaver Developer Studio
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_1 Springer-Verlag Berlin Heidelberg 2010
1
ABAP Workbench is the SAPrsquos own development environment used to develop
ABAP-based multilayer business applications This development environment
offers Web Dynpro Explorer to create Web Dynpro ABAP components (Fig 13)
Fig 12 SAP NetWeaver Developer Studio ndash Web Dynpro perspective
Fig 11 SAP NetWeaver components (SAP)
2 1 What is Web Dynpro
The Application Server ABAP has the structure presented in Fig 14
Fig 13 ABAP Workbench ndash Web Dynpro Explorer
Fig 14 AS ABAP (SAP)
1 What is Web Dynpro 3
As we can see most of the AS ABAP components can be divided into three
layers
l Presentation layerl Business layerl Persistence layer
Web Dynpro ABAP is part of the presentation layer and itrsquos the SAP standard UI
technology used for developing web business applications without knowing HTML
or JavaScript
Web Dynpro ABAP offers many advantages as follows
l Strict separation between the layout and business datal Re-use and better maintainability through reusabilityl Automatic input checksl Automatic data transport using data bindingl WYSIWYG (What You See Is What You Get) view editor
Web Dynpro ABAP andWeb Dynpro Java mostly offer the same functionalities
But of course there are some differences between them for example
l Web Dynpro Java unlike the Web Dynpro ABAP disposes of a ViewSet that
allows us to integrate in a Screen more Views by using certain pre-defined
layouts In this respect their common part is the View Container UI Elementl Web Dynpro Java offers graphical tools that ease the programming work as
Navigation Manager and Diagram View unlike the Web Dynpro ABAP where
we dispose only of a tool used to visualize and to define the window structure
The Web Dynpro ABAP is what the current book is about More information
about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by
Chris Whealy
4 1 What is Web Dynpro
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
Contents
1 What is Web Dynpro 1
2 SAP Easy Access 5
21 Changing the SAP Easy Access 6
22 Favorites List 6
23 Setting a Transaction as Start Transaction 8
24 Creating a Shortcut 8
3 Designing a Web Dynpro Component 11
31 View 14
311 View Layout 14
312 Context View 17
313 Actions 19
314 Methods 19
315 Properties 21
316 Attributes 22
32 Componentcontroller 23
33 Window 23
34 Application 24
35 ABAP Debugger 27
36 Web Dynpro Logon Page Configuration 30
4 ABAP Dictionary 33
41 Data Element 34
42 Domain 35
43 Structure 38
44 Table 40
45 Search Help 45
46 Database View 48
47 Table Type 51
48 Lock Object 52
ix
5 Context Nodes and Attributes at Design Time 55
51 Attributes 56
52 Nodes 58
521 Creating a Node that Uses an ABAP Dictionary
Repository Object 59
522 Working with Child Nodes 64
6 Data Binding Context Mapping and Interface Methods 67
61 Data Binding 67
62 Context Mapping 72
621 Internal Context Mapping 72
622 External Context Mapping 76
63 Interface Methods 83
7 View Controller Methods 87
71 Hook Methods 87
711 wdDoInit 88
712 wdDoExit 91
713 wdDoModifyView 91
714 wdDoBeforeAction 96
715 wdDoOnContextMenu 98
72 Supply Function Methods 102
73 User-Defined Instance Methods 103
74 Fire Methods 105
75 Event Handler Methods 109
8 Layout UI Elements 113
81 FlowLayout 114
82 GridLayout 116
83 MatrixLayout 119
84 RowLayout 120
9 User Interface Elements (UI elements) Static and Dynamic
Programming 123
91 Action 124
911 Timed Trigger 124
912 ButtonChoice 126
92 Selection 132
921 DropDownByKey 132
922 DropDownByIndex 135
923 RadioButtonGroupByIndex 137
93 Layout 140
931 ViewContainerUIElement 140
932 TabStrip 146
933 PageHeader 149
934 ContextualPanel 152
x Contents
935 Tray UI Element 155
936 MessageArea 159
94 Complex 163
941 Table 163
942 RoadMap 171
943 PhaseIndicator 180
944 Tree ndash Sequential Implementation 186
945 DateNavigator 191
95 Graphic 197
951 Image 198
952 BusinessGraphics 201
96 Integration 206
961 The InteractiveForm 206
962 FileUpload 215
10 Messages Exceptions and Web Dynpro ABAP 221
101 Message Handling 222
1011 Dynamic Texts Stored in the Text Pool
of the Assistance Class 222
1012 Text from Database Table T100 225
102 Exception Handling 227
1021 Exception Class with OTR Text 228
1022 Exception Class with Text from a Message Class 233
11 Writing Multilanguage Applications 237
111 Creating Multilanguage User Interfaces 238
1111 Internationalization of Data Elements Defined
in ABAP Dictionary 240
1112 Internationalization of Domains Defined
in ABAP Dictionary 241
1113 Internationalization of Text from OTR 242
1114 Internationalization of Text from Assistance Class 244
1115 Internationalization of Messages 245
112 Multilanguage Records in the Database 247
1121 Study an Example Created in the System 248
1122 Creating Table Structures and Internationalization
of the Records 250
1123 Using the Internationalized Records in WebDynpro 255
12 Web Dynpro Model 259
121 Assistance Class as a Model for a Multicomponent
Application 260
122 BAPI as a Model 274
1221 Creating a BAPI 274
1222 Using the Created BAPI as a Model 279
123 Web Service 283
Contents xi
1231 Creating the Web Service 284
1232 Web Service Configuration 287
1233 Testing the Web Service 288
1234 Consuming the Web Service in Web Dynpro 289
13 ALV and Select Options 295
131 SAP List Viewer 295
1311 Simple ALV Example 296
1312 ALV Configuration Model 299
132 Select Options 306
133 ALV and Select Options 313
14 Integrating a Web Dynpro Application into the SAP
NetWeaver Portal 315
141 Creating a Folder 316
142 Connecting to the Back-End ABAP System 317
143 Creating an iView 321
144 Creating a Role and Role Assignment 324
145 Running the Application into the Portal 327
146 Triggering a Portal Event 327
147 Reacting to a Portal Event 329
148 Creating a Page 331
149 Running the Application that Processes Portal Events 333
15 Web Dynpro and Authorization 335
151 Role Based Access Control Pattern ndash RBAC 337
152 Authorization Object Class 338
153 Authorization Object 338
154 Authorization Fields 340
155 Creating a Single Role and Changing its Authorization Data 343
156 Creating the Web Dynpro Component 346
1561 Checking the Authorization of the Current User 346
1562 Assigning the User-Role and Running
the Application 349
16 Web Dynpro Mind Map 351
161 Creating a Mind Map 351
162 Web Dynpro ABAP Mind Map 352
Appendix 353
Index 357
xii Contents
Chapter 1
What is Web Dynpro
ldquoLogic will get you from A to B Imagination will take you everywhererdquo
Albert Einstein
Abstract In this chapter we present the place and role of the Web Dynpro within
the SAP NetWeaver platform So we start with the layers of the SAP NetWeaver
platform we continue with the importance of the Application Platform layer and
we conclude with the place and role of Web Dynpro (ABAP and Java) within the
Application Server ABAP and respective Application Server Java
To answer this question we have to look at the SAP NetWeaver technology
platform (Fig 11)
As we can see four layers are distinguished in this context Application Plat-
form Process Integration Information Integration and People Integration
The Application Platform represents the technical basis of almost all the other
SAP products This is the reason why the Application Platform plays a central role
in the SAP NetWeaver
The Application Platform essentially offers two programming interfaces ABAP
and Java (J2EE) ABAP is the programming interface for Application Server (AS)
ABAP and Java is the programming interface for AS Java
To create ABAP and Java applications we have two independent development
environments ABAP Workbench for ABAP and SAP NetWeaver Developer
Studio for Java
Both development environments offer the possibility to create web based appli-
cations built by using declarative programming techniques based on the Model
View Controller (MVC) paradigm
SAP NetWeaver Developer Studio is the SAPrsquos own development environment
used to develop Java-based multilayer business applications This development
environment is based on Eclipse and offers a Web Dynpro Perspective to create
Web Dynpro Java applications (Fig 12)
All the tools we need to create Web Dynpro Java applications are found within
the SAP NetWeaver Developer Studio
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_1 Springer-Verlag Berlin Heidelberg 2010
1
ABAP Workbench is the SAPrsquos own development environment used to develop
ABAP-based multilayer business applications This development environment
offers Web Dynpro Explorer to create Web Dynpro ABAP components (Fig 13)
Fig 12 SAP NetWeaver Developer Studio ndash Web Dynpro perspective
Fig 11 SAP NetWeaver components (SAP)
2 1 What is Web Dynpro
The Application Server ABAP has the structure presented in Fig 14
Fig 13 ABAP Workbench ndash Web Dynpro Explorer
Fig 14 AS ABAP (SAP)
1 What is Web Dynpro 3
As we can see most of the AS ABAP components can be divided into three
layers
l Presentation layerl Business layerl Persistence layer
Web Dynpro ABAP is part of the presentation layer and itrsquos the SAP standard UI
technology used for developing web business applications without knowing HTML
or JavaScript
Web Dynpro ABAP offers many advantages as follows
l Strict separation between the layout and business datal Re-use and better maintainability through reusabilityl Automatic input checksl Automatic data transport using data bindingl WYSIWYG (What You See Is What You Get) view editor
Web Dynpro ABAP andWeb Dynpro Java mostly offer the same functionalities
But of course there are some differences between them for example
l Web Dynpro Java unlike the Web Dynpro ABAP disposes of a ViewSet that
allows us to integrate in a Screen more Views by using certain pre-defined
layouts In this respect their common part is the View Container UI Elementl Web Dynpro Java offers graphical tools that ease the programming work as
Navigation Manager and Diagram View unlike the Web Dynpro ABAP where
we dispose only of a tool used to visualize and to define the window structure
The Web Dynpro ABAP is what the current book is about More information
about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by
Chris Whealy
4 1 What is Web Dynpro
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
5 Context Nodes and Attributes at Design Time 55
51 Attributes 56
52 Nodes 58
521 Creating a Node that Uses an ABAP Dictionary
Repository Object 59
522 Working with Child Nodes 64
6 Data Binding Context Mapping and Interface Methods 67
61 Data Binding 67
62 Context Mapping 72
621 Internal Context Mapping 72
622 External Context Mapping 76
63 Interface Methods 83
7 View Controller Methods 87
71 Hook Methods 87
711 wdDoInit 88
712 wdDoExit 91
713 wdDoModifyView 91
714 wdDoBeforeAction 96
715 wdDoOnContextMenu 98
72 Supply Function Methods 102
73 User-Defined Instance Methods 103
74 Fire Methods 105
75 Event Handler Methods 109
8 Layout UI Elements 113
81 FlowLayout 114
82 GridLayout 116
83 MatrixLayout 119
84 RowLayout 120
9 User Interface Elements (UI elements) Static and Dynamic
Programming 123
91 Action 124
911 Timed Trigger 124
912 ButtonChoice 126
92 Selection 132
921 DropDownByKey 132
922 DropDownByIndex 135
923 RadioButtonGroupByIndex 137
93 Layout 140
931 ViewContainerUIElement 140
932 TabStrip 146
933 PageHeader 149
934 ContextualPanel 152
x Contents
935 Tray UI Element 155
936 MessageArea 159
94 Complex 163
941 Table 163
942 RoadMap 171
943 PhaseIndicator 180
944 Tree ndash Sequential Implementation 186
945 DateNavigator 191
95 Graphic 197
951 Image 198
952 BusinessGraphics 201
96 Integration 206
961 The InteractiveForm 206
962 FileUpload 215
10 Messages Exceptions and Web Dynpro ABAP 221
101 Message Handling 222
1011 Dynamic Texts Stored in the Text Pool
of the Assistance Class 222
1012 Text from Database Table T100 225
102 Exception Handling 227
1021 Exception Class with OTR Text 228
1022 Exception Class with Text from a Message Class 233
11 Writing Multilanguage Applications 237
111 Creating Multilanguage User Interfaces 238
1111 Internationalization of Data Elements Defined
in ABAP Dictionary 240
1112 Internationalization of Domains Defined
in ABAP Dictionary 241
1113 Internationalization of Text from OTR 242
1114 Internationalization of Text from Assistance Class 244
1115 Internationalization of Messages 245
112 Multilanguage Records in the Database 247
1121 Study an Example Created in the System 248
1122 Creating Table Structures and Internationalization
of the Records 250
1123 Using the Internationalized Records in WebDynpro 255
12 Web Dynpro Model 259
121 Assistance Class as a Model for a Multicomponent
Application 260
122 BAPI as a Model 274
1221 Creating a BAPI 274
1222 Using the Created BAPI as a Model 279
123 Web Service 283
Contents xi
1231 Creating the Web Service 284
1232 Web Service Configuration 287
1233 Testing the Web Service 288
1234 Consuming the Web Service in Web Dynpro 289
13 ALV and Select Options 295
131 SAP List Viewer 295
1311 Simple ALV Example 296
1312 ALV Configuration Model 299
132 Select Options 306
133 ALV and Select Options 313
14 Integrating a Web Dynpro Application into the SAP
NetWeaver Portal 315
141 Creating a Folder 316
142 Connecting to the Back-End ABAP System 317
143 Creating an iView 321
144 Creating a Role and Role Assignment 324
145 Running the Application into the Portal 327
146 Triggering a Portal Event 327
147 Reacting to a Portal Event 329
148 Creating a Page 331
149 Running the Application that Processes Portal Events 333
15 Web Dynpro and Authorization 335
151 Role Based Access Control Pattern ndash RBAC 337
152 Authorization Object Class 338
153 Authorization Object 338
154 Authorization Fields 340
155 Creating a Single Role and Changing its Authorization Data 343
156 Creating the Web Dynpro Component 346
1561 Checking the Authorization of the Current User 346
1562 Assigning the User-Role and Running
the Application 349
16 Web Dynpro Mind Map 351
161 Creating a Mind Map 351
162 Web Dynpro ABAP Mind Map 352
Appendix 353
Index 357
xii Contents
Chapter 1
What is Web Dynpro
ldquoLogic will get you from A to B Imagination will take you everywhererdquo
Albert Einstein
Abstract In this chapter we present the place and role of the Web Dynpro within
the SAP NetWeaver platform So we start with the layers of the SAP NetWeaver
platform we continue with the importance of the Application Platform layer and
we conclude with the place and role of Web Dynpro (ABAP and Java) within the
Application Server ABAP and respective Application Server Java
To answer this question we have to look at the SAP NetWeaver technology
platform (Fig 11)
As we can see four layers are distinguished in this context Application Plat-
form Process Integration Information Integration and People Integration
The Application Platform represents the technical basis of almost all the other
SAP products This is the reason why the Application Platform plays a central role
in the SAP NetWeaver
The Application Platform essentially offers two programming interfaces ABAP
and Java (J2EE) ABAP is the programming interface for Application Server (AS)
ABAP and Java is the programming interface for AS Java
To create ABAP and Java applications we have two independent development
environments ABAP Workbench for ABAP and SAP NetWeaver Developer
Studio for Java
Both development environments offer the possibility to create web based appli-
cations built by using declarative programming techniques based on the Model
View Controller (MVC) paradigm
SAP NetWeaver Developer Studio is the SAPrsquos own development environment
used to develop Java-based multilayer business applications This development
environment is based on Eclipse and offers a Web Dynpro Perspective to create
Web Dynpro Java applications (Fig 12)
All the tools we need to create Web Dynpro Java applications are found within
the SAP NetWeaver Developer Studio
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_1 Springer-Verlag Berlin Heidelberg 2010
1
ABAP Workbench is the SAPrsquos own development environment used to develop
ABAP-based multilayer business applications This development environment
offers Web Dynpro Explorer to create Web Dynpro ABAP components (Fig 13)
Fig 12 SAP NetWeaver Developer Studio ndash Web Dynpro perspective
Fig 11 SAP NetWeaver components (SAP)
2 1 What is Web Dynpro
The Application Server ABAP has the structure presented in Fig 14
Fig 13 ABAP Workbench ndash Web Dynpro Explorer
Fig 14 AS ABAP (SAP)
1 What is Web Dynpro 3
As we can see most of the AS ABAP components can be divided into three
layers
l Presentation layerl Business layerl Persistence layer
Web Dynpro ABAP is part of the presentation layer and itrsquos the SAP standard UI
technology used for developing web business applications without knowing HTML
or JavaScript
Web Dynpro ABAP offers many advantages as follows
l Strict separation between the layout and business datal Re-use and better maintainability through reusabilityl Automatic input checksl Automatic data transport using data bindingl WYSIWYG (What You See Is What You Get) view editor
Web Dynpro ABAP andWeb Dynpro Java mostly offer the same functionalities
But of course there are some differences between them for example
l Web Dynpro Java unlike the Web Dynpro ABAP disposes of a ViewSet that
allows us to integrate in a Screen more Views by using certain pre-defined
layouts In this respect their common part is the View Container UI Elementl Web Dynpro Java offers graphical tools that ease the programming work as
Navigation Manager and Diagram View unlike the Web Dynpro ABAP where
we dispose only of a tool used to visualize and to define the window structure
The Web Dynpro ABAP is what the current book is about More information
about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by
Chris Whealy
4 1 What is Web Dynpro
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
935 Tray UI Element 155
936 MessageArea 159
94 Complex 163
941 Table 163
942 RoadMap 171
943 PhaseIndicator 180
944 Tree ndash Sequential Implementation 186
945 DateNavigator 191
95 Graphic 197
951 Image 198
952 BusinessGraphics 201
96 Integration 206
961 The InteractiveForm 206
962 FileUpload 215
10 Messages Exceptions and Web Dynpro ABAP 221
101 Message Handling 222
1011 Dynamic Texts Stored in the Text Pool
of the Assistance Class 222
1012 Text from Database Table T100 225
102 Exception Handling 227
1021 Exception Class with OTR Text 228
1022 Exception Class with Text from a Message Class 233
11 Writing Multilanguage Applications 237
111 Creating Multilanguage User Interfaces 238
1111 Internationalization of Data Elements Defined
in ABAP Dictionary 240
1112 Internationalization of Domains Defined
in ABAP Dictionary 241
1113 Internationalization of Text from OTR 242
1114 Internationalization of Text from Assistance Class 244
1115 Internationalization of Messages 245
112 Multilanguage Records in the Database 247
1121 Study an Example Created in the System 248
1122 Creating Table Structures and Internationalization
of the Records 250
1123 Using the Internationalized Records in WebDynpro 255
12 Web Dynpro Model 259
121 Assistance Class as a Model for a Multicomponent
Application 260
122 BAPI as a Model 274
1221 Creating a BAPI 274
1222 Using the Created BAPI as a Model 279
123 Web Service 283
Contents xi
1231 Creating the Web Service 284
1232 Web Service Configuration 287
1233 Testing the Web Service 288
1234 Consuming the Web Service in Web Dynpro 289
13 ALV and Select Options 295
131 SAP List Viewer 295
1311 Simple ALV Example 296
1312 ALV Configuration Model 299
132 Select Options 306
133 ALV and Select Options 313
14 Integrating a Web Dynpro Application into the SAP
NetWeaver Portal 315
141 Creating a Folder 316
142 Connecting to the Back-End ABAP System 317
143 Creating an iView 321
144 Creating a Role and Role Assignment 324
145 Running the Application into the Portal 327
146 Triggering a Portal Event 327
147 Reacting to a Portal Event 329
148 Creating a Page 331
149 Running the Application that Processes Portal Events 333
15 Web Dynpro and Authorization 335
151 Role Based Access Control Pattern ndash RBAC 337
152 Authorization Object Class 338
153 Authorization Object 338
154 Authorization Fields 340
155 Creating a Single Role and Changing its Authorization Data 343
156 Creating the Web Dynpro Component 346
1561 Checking the Authorization of the Current User 346
1562 Assigning the User-Role and Running
the Application 349
16 Web Dynpro Mind Map 351
161 Creating a Mind Map 351
162 Web Dynpro ABAP Mind Map 352
Appendix 353
Index 357
xii Contents
Chapter 1
What is Web Dynpro
ldquoLogic will get you from A to B Imagination will take you everywhererdquo
Albert Einstein
Abstract In this chapter we present the place and role of the Web Dynpro within
the SAP NetWeaver platform So we start with the layers of the SAP NetWeaver
platform we continue with the importance of the Application Platform layer and
we conclude with the place and role of Web Dynpro (ABAP and Java) within the
Application Server ABAP and respective Application Server Java
To answer this question we have to look at the SAP NetWeaver technology
platform (Fig 11)
As we can see four layers are distinguished in this context Application Plat-
form Process Integration Information Integration and People Integration
The Application Platform represents the technical basis of almost all the other
SAP products This is the reason why the Application Platform plays a central role
in the SAP NetWeaver
The Application Platform essentially offers two programming interfaces ABAP
and Java (J2EE) ABAP is the programming interface for Application Server (AS)
ABAP and Java is the programming interface for AS Java
To create ABAP and Java applications we have two independent development
environments ABAP Workbench for ABAP and SAP NetWeaver Developer
Studio for Java
Both development environments offer the possibility to create web based appli-
cations built by using declarative programming techniques based on the Model
View Controller (MVC) paradigm
SAP NetWeaver Developer Studio is the SAPrsquos own development environment
used to develop Java-based multilayer business applications This development
environment is based on Eclipse and offers a Web Dynpro Perspective to create
Web Dynpro Java applications (Fig 12)
All the tools we need to create Web Dynpro Java applications are found within
the SAP NetWeaver Developer Studio
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_1 Springer-Verlag Berlin Heidelberg 2010
1
ABAP Workbench is the SAPrsquos own development environment used to develop
ABAP-based multilayer business applications This development environment
offers Web Dynpro Explorer to create Web Dynpro ABAP components (Fig 13)
Fig 12 SAP NetWeaver Developer Studio ndash Web Dynpro perspective
Fig 11 SAP NetWeaver components (SAP)
2 1 What is Web Dynpro
The Application Server ABAP has the structure presented in Fig 14
Fig 13 ABAP Workbench ndash Web Dynpro Explorer
Fig 14 AS ABAP (SAP)
1 What is Web Dynpro 3
As we can see most of the AS ABAP components can be divided into three
layers
l Presentation layerl Business layerl Persistence layer
Web Dynpro ABAP is part of the presentation layer and itrsquos the SAP standard UI
technology used for developing web business applications without knowing HTML
or JavaScript
Web Dynpro ABAP offers many advantages as follows
l Strict separation between the layout and business datal Re-use and better maintainability through reusabilityl Automatic input checksl Automatic data transport using data bindingl WYSIWYG (What You See Is What You Get) view editor
Web Dynpro ABAP andWeb Dynpro Java mostly offer the same functionalities
But of course there are some differences between them for example
l Web Dynpro Java unlike the Web Dynpro ABAP disposes of a ViewSet that
allows us to integrate in a Screen more Views by using certain pre-defined
layouts In this respect their common part is the View Container UI Elementl Web Dynpro Java offers graphical tools that ease the programming work as
Navigation Manager and Diagram View unlike the Web Dynpro ABAP where
we dispose only of a tool used to visualize and to define the window structure
The Web Dynpro ABAP is what the current book is about More information
about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by
Chris Whealy
4 1 What is Web Dynpro
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
1231 Creating the Web Service 284
1232 Web Service Configuration 287
1233 Testing the Web Service 288
1234 Consuming the Web Service in Web Dynpro 289
13 ALV and Select Options 295
131 SAP List Viewer 295
1311 Simple ALV Example 296
1312 ALV Configuration Model 299
132 Select Options 306
133 ALV and Select Options 313
14 Integrating a Web Dynpro Application into the SAP
NetWeaver Portal 315
141 Creating a Folder 316
142 Connecting to the Back-End ABAP System 317
143 Creating an iView 321
144 Creating a Role and Role Assignment 324
145 Running the Application into the Portal 327
146 Triggering a Portal Event 327
147 Reacting to a Portal Event 329
148 Creating a Page 331
149 Running the Application that Processes Portal Events 333
15 Web Dynpro and Authorization 335
151 Role Based Access Control Pattern ndash RBAC 337
152 Authorization Object Class 338
153 Authorization Object 338
154 Authorization Fields 340
155 Creating a Single Role and Changing its Authorization Data 343
156 Creating the Web Dynpro Component 346
1561 Checking the Authorization of the Current User 346
1562 Assigning the User-Role and Running
the Application 349
16 Web Dynpro Mind Map 351
161 Creating a Mind Map 351
162 Web Dynpro ABAP Mind Map 352
Appendix 353
Index 357
xii Contents
Chapter 1
What is Web Dynpro
ldquoLogic will get you from A to B Imagination will take you everywhererdquo
Albert Einstein
Abstract In this chapter we present the place and role of the Web Dynpro within
the SAP NetWeaver platform So we start with the layers of the SAP NetWeaver
platform we continue with the importance of the Application Platform layer and
we conclude with the place and role of Web Dynpro (ABAP and Java) within the
Application Server ABAP and respective Application Server Java
To answer this question we have to look at the SAP NetWeaver technology
platform (Fig 11)
As we can see four layers are distinguished in this context Application Plat-
form Process Integration Information Integration and People Integration
The Application Platform represents the technical basis of almost all the other
SAP products This is the reason why the Application Platform plays a central role
in the SAP NetWeaver
The Application Platform essentially offers two programming interfaces ABAP
and Java (J2EE) ABAP is the programming interface for Application Server (AS)
ABAP and Java is the programming interface for AS Java
To create ABAP and Java applications we have two independent development
environments ABAP Workbench for ABAP and SAP NetWeaver Developer
Studio for Java
Both development environments offer the possibility to create web based appli-
cations built by using declarative programming techniques based on the Model
View Controller (MVC) paradigm
SAP NetWeaver Developer Studio is the SAPrsquos own development environment
used to develop Java-based multilayer business applications This development
environment is based on Eclipse and offers a Web Dynpro Perspective to create
Web Dynpro Java applications (Fig 12)
All the tools we need to create Web Dynpro Java applications are found within
the SAP NetWeaver Developer Studio
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_1 Springer-Verlag Berlin Heidelberg 2010
1
ABAP Workbench is the SAPrsquos own development environment used to develop
ABAP-based multilayer business applications This development environment
offers Web Dynpro Explorer to create Web Dynpro ABAP components (Fig 13)
Fig 12 SAP NetWeaver Developer Studio ndash Web Dynpro perspective
Fig 11 SAP NetWeaver components (SAP)
2 1 What is Web Dynpro
The Application Server ABAP has the structure presented in Fig 14
Fig 13 ABAP Workbench ndash Web Dynpro Explorer
Fig 14 AS ABAP (SAP)
1 What is Web Dynpro 3
As we can see most of the AS ABAP components can be divided into three
layers
l Presentation layerl Business layerl Persistence layer
Web Dynpro ABAP is part of the presentation layer and itrsquos the SAP standard UI
technology used for developing web business applications without knowing HTML
or JavaScript
Web Dynpro ABAP offers many advantages as follows
l Strict separation between the layout and business datal Re-use and better maintainability through reusabilityl Automatic input checksl Automatic data transport using data bindingl WYSIWYG (What You See Is What You Get) view editor
Web Dynpro ABAP andWeb Dynpro Java mostly offer the same functionalities
But of course there are some differences between them for example
l Web Dynpro Java unlike the Web Dynpro ABAP disposes of a ViewSet that
allows us to integrate in a Screen more Views by using certain pre-defined
layouts In this respect their common part is the View Container UI Elementl Web Dynpro Java offers graphical tools that ease the programming work as
Navigation Manager and Diagram View unlike the Web Dynpro ABAP where
we dispose only of a tool used to visualize and to define the window structure
The Web Dynpro ABAP is what the current book is about More information
about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by
Chris Whealy
4 1 What is Web Dynpro
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
Chapter 1
What is Web Dynpro
ldquoLogic will get you from A to B Imagination will take you everywhererdquo
Albert Einstein
Abstract In this chapter we present the place and role of the Web Dynpro within
the SAP NetWeaver platform So we start with the layers of the SAP NetWeaver
platform we continue with the importance of the Application Platform layer and
we conclude with the place and role of Web Dynpro (ABAP and Java) within the
Application Server ABAP and respective Application Server Java
To answer this question we have to look at the SAP NetWeaver technology
platform (Fig 11)
As we can see four layers are distinguished in this context Application Plat-
form Process Integration Information Integration and People Integration
The Application Platform represents the technical basis of almost all the other
SAP products This is the reason why the Application Platform plays a central role
in the SAP NetWeaver
The Application Platform essentially offers two programming interfaces ABAP
and Java (J2EE) ABAP is the programming interface for Application Server (AS)
ABAP and Java is the programming interface for AS Java
To create ABAP and Java applications we have two independent development
environments ABAP Workbench for ABAP and SAP NetWeaver Developer
Studio for Java
Both development environments offer the possibility to create web based appli-
cations built by using declarative programming techniques based on the Model
View Controller (MVC) paradigm
SAP NetWeaver Developer Studio is the SAPrsquos own development environment
used to develop Java-based multilayer business applications This development
environment is based on Eclipse and offers a Web Dynpro Perspective to create
Web Dynpro Java applications (Fig 12)
All the tools we need to create Web Dynpro Java applications are found within
the SAP NetWeaver Developer Studio
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_1 Springer-Verlag Berlin Heidelberg 2010
1
ABAP Workbench is the SAPrsquos own development environment used to develop
ABAP-based multilayer business applications This development environment
offers Web Dynpro Explorer to create Web Dynpro ABAP components (Fig 13)
Fig 12 SAP NetWeaver Developer Studio ndash Web Dynpro perspective
Fig 11 SAP NetWeaver components (SAP)
2 1 What is Web Dynpro
The Application Server ABAP has the structure presented in Fig 14
Fig 13 ABAP Workbench ndash Web Dynpro Explorer
Fig 14 AS ABAP (SAP)
1 What is Web Dynpro 3
As we can see most of the AS ABAP components can be divided into three
layers
l Presentation layerl Business layerl Persistence layer
Web Dynpro ABAP is part of the presentation layer and itrsquos the SAP standard UI
technology used for developing web business applications without knowing HTML
or JavaScript
Web Dynpro ABAP offers many advantages as follows
l Strict separation between the layout and business datal Re-use and better maintainability through reusabilityl Automatic input checksl Automatic data transport using data bindingl WYSIWYG (What You See Is What You Get) view editor
Web Dynpro ABAP andWeb Dynpro Java mostly offer the same functionalities
But of course there are some differences between them for example
l Web Dynpro Java unlike the Web Dynpro ABAP disposes of a ViewSet that
allows us to integrate in a Screen more Views by using certain pre-defined
layouts In this respect their common part is the View Container UI Elementl Web Dynpro Java offers graphical tools that ease the programming work as
Navigation Manager and Diagram View unlike the Web Dynpro ABAP where
we dispose only of a tool used to visualize and to define the window structure
The Web Dynpro ABAP is what the current book is about More information
about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by
Chris Whealy
4 1 What is Web Dynpro
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
ABAP Workbench is the SAPrsquos own development environment used to develop
ABAP-based multilayer business applications This development environment
offers Web Dynpro Explorer to create Web Dynpro ABAP components (Fig 13)
Fig 12 SAP NetWeaver Developer Studio ndash Web Dynpro perspective
Fig 11 SAP NetWeaver components (SAP)
2 1 What is Web Dynpro
The Application Server ABAP has the structure presented in Fig 14
Fig 13 ABAP Workbench ndash Web Dynpro Explorer
Fig 14 AS ABAP (SAP)
1 What is Web Dynpro 3
As we can see most of the AS ABAP components can be divided into three
layers
l Presentation layerl Business layerl Persistence layer
Web Dynpro ABAP is part of the presentation layer and itrsquos the SAP standard UI
technology used for developing web business applications without knowing HTML
or JavaScript
Web Dynpro ABAP offers many advantages as follows
l Strict separation between the layout and business datal Re-use and better maintainability through reusabilityl Automatic input checksl Automatic data transport using data bindingl WYSIWYG (What You See Is What You Get) view editor
Web Dynpro ABAP andWeb Dynpro Java mostly offer the same functionalities
But of course there are some differences between them for example
l Web Dynpro Java unlike the Web Dynpro ABAP disposes of a ViewSet that
allows us to integrate in a Screen more Views by using certain pre-defined
layouts In this respect their common part is the View Container UI Elementl Web Dynpro Java offers graphical tools that ease the programming work as
Navigation Manager and Diagram View unlike the Web Dynpro ABAP where
we dispose only of a tool used to visualize and to define the window structure
The Web Dynpro ABAP is what the current book is about More information
about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by
Chris Whealy
4 1 What is Web Dynpro
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
The Application Server ABAP has the structure presented in Fig 14
Fig 13 ABAP Workbench ndash Web Dynpro Explorer
Fig 14 AS ABAP (SAP)
1 What is Web Dynpro 3
As we can see most of the AS ABAP components can be divided into three
layers
l Presentation layerl Business layerl Persistence layer
Web Dynpro ABAP is part of the presentation layer and itrsquos the SAP standard UI
technology used for developing web business applications without knowing HTML
or JavaScript
Web Dynpro ABAP offers many advantages as follows
l Strict separation between the layout and business datal Re-use and better maintainability through reusabilityl Automatic input checksl Automatic data transport using data bindingl WYSIWYG (What You See Is What You Get) view editor
Web Dynpro ABAP andWeb Dynpro Java mostly offer the same functionalities
But of course there are some differences between them for example
l Web Dynpro Java unlike the Web Dynpro ABAP disposes of a ViewSet that
allows us to integrate in a Screen more Views by using certain pre-defined
layouts In this respect their common part is the View Container UI Elementl Web Dynpro Java offers graphical tools that ease the programming work as
Navigation Manager and Diagram View unlike the Web Dynpro ABAP where
we dispose only of a tool used to visualize and to define the window structure
The Web Dynpro ABAP is what the current book is about More information
about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by
Chris Whealy
4 1 What is Web Dynpro
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
As we can see most of the AS ABAP components can be divided into three
layers
l Presentation layerl Business layerl Persistence layer
Web Dynpro ABAP is part of the presentation layer and itrsquos the SAP standard UI
technology used for developing web business applications without knowing HTML
or JavaScript
Web Dynpro ABAP offers many advantages as follows
l Strict separation between the layout and business datal Re-use and better maintainability through reusabilityl Automatic input checksl Automatic data transport using data bindingl WYSIWYG (What You See Is What You Get) view editor
Web Dynpro ABAP andWeb Dynpro Java mostly offer the same functionalities
But of course there are some differences between them for example
l Web Dynpro Java unlike the Web Dynpro ABAP disposes of a ViewSet that
allows us to integrate in a Screen more Views by using certain pre-defined
layouts In this respect their common part is the View Container UI Elementl Web Dynpro Java offers graphical tools that ease the programming work as
Navigation Manager and Diagram View unlike the Web Dynpro ABAP where
we dispose only of a tool used to visualize and to define the window structure
The Web Dynpro ABAP is what the current book is about More information
about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by
Chris Whealy
4 1 What is Web Dynpro
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
Chapter 2
SAP Easy Access
ldquoThe way to get started is to quit talking and begin doingrdquo
Walt Disney
Abstract This chapter presents the SAP Easy Access highlighting some aspects
found in our everyday work So we show how to change the standard settings how
to add in the Favorites list the frequently used transactions and how to create a
Shortcut on the Desktop
SAP easy access starts automatically after logging-in into the SAP system In the
left side we can see the user menu Here are the functions the user needs to perform
his tasks (Fig 21)
SAP Easy User Menu
Fig 21 SAP easy access
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_2 Springer-Verlag Berlin Heidelberg 2010
5
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
21 Changing the SAP Easy Access
We can change the SAP easy access settings through the menu Extras Settings
by specifying settings as follows
l The place of the Favoritesl The presents of the menul The easy access picture in the right side of the screen ndash to be present or notl Displays or not the technical names (Fig 22)
22 Favorites List
The user menu is mostly defined by the administrator but we can define our own
Favorites list Here we can create our own list of favorites containing items as
transaction files web addresses or other objects
To add new transactions in the Favorite list we can choose from the menu
Favorites Insert Transactions (Fig 23)
As a result the new item appears in our Favorites list (Fig 24)
We can find the list of the SAP transaction codes in the transparent table TSTC
Besides the transactions predefined in the system we can create our own transac-
tions (eg with transaction SE93) which are going to be inserted in this table
Fig 22 Settings
Fig 23 Inserting transaction onto the Favorites list
Fig 24 Favorites list
6 2 SAP Easy Access
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
Every time we use a transaction the system verifies in this table whether the
transaction exists and if we have the proper authorization to use it
As support for our daily tasks we add here some of the transactions we use in
this book (Fig 25)
To add other objects we can choose them from the menu Favorites Add
Other Objects (Fig 26)
Fig 25 Transactions used
Fig 26 Adding new objects in Favorites list
22 Favorites List 7
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
We add the web address to open the SDN page (Fig 27)
We can use Favorites Download to PC to save on our computer a list with all
the objects we have in the Favorites folder To upload in a Favorites folder objects
from a list saved on our computer we can use Favorites Upload from PC
23 Setting a Transaction as Start Transaction
We have the possibility to set a transaction as start transaction Extras Set start
transaction (Fig 28) In this way the desired transaction is automatically started
after logging-in into the system (in our case the SE80 transaction) and we donrsquot see
the SAP easy access anymore
24 Creating a Shortcut
After installing the SAP GUI a SAP logon icon appears on our desktop By using
this logon we can login into the system Additionally we can create a SAP logon
shortcut to be used to perform the same logon but we donrsquot need to fill all the
entries in the logon form A SAP shortcut allows us not only to perform a logon into
the system but to execute other commands too So we can start a SAP transaction
run a report or perform a system command
To create a SAP Shortcut on our desktop to start the transaction SE80 we can
use the Wizard available in the layout menu by clicking on the respective icon
located in the system function bar (Fig 29)
Fig 27 Inserting a web address
Fig 28 Setting the start transaction dialog box
8 2 SAP Easy Access
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
Another possibility to create a SAP shortcut on our desktop is to select a
transaction or another object from the Favorites list and to use the menu Edit Create Shortcut on the Desktop
Fig 29 Creating a SAP Shortcut on our Desktop
24 Creating a Shortcut 9
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
Chapter 3
Designing a Web Dynpro Component
ldquoExperience is something you donrsquot get until just after you need itrdquo
Steven Wright
Abstract The present chapter is dedicated to the constitutive elements of a Web
Dynpro ABAP component Moreover we show how to use the ABAP Debugger to
execute by line or by section a Web Dynpro application and how to use the new
tool offered by ABAP Debugger to reach the context attributes values
In order to develop a Web Dynpro ABAP component we have to open the ABAP
Workbench of the Application Server ABAP To work with ABAP Workbench we
need an authorization as a developer or a developer key and for the SAP NetWea-
ver ABAP trial version we can use BCUSER automatically registered as a devel-
oper Web Dynpro is available with release SAP NetWeaver 2004s and later
After logging into AS ABAP we can use the transaction SE80 to call the object
navigator (Fig 31)
Fig 31 Object navigator
U Gellert and AD Cristea Web Dynpro ABAP for PractitionersDOI 101007978-3-642-11385-7_3 Springer-Verlag Berlin Heidelberg 2010
11
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
All the repository objects we develop with the ABAP Workbench tool we build
by using the Object Navigator Here we develop not only Web Dynpro applications
but also other development objects (eg reports database tables data elements
classes function modules etc)
The development objects we create as customer have the first letter ldquoyrdquo
or ldquozrdquo Therefore we created a Web Dynpro component with the name
y_wd_component
We have to assign all the development objects created with ABAP Workbench
to a package We can use the default package ldquo$TMPrdquo to create test programs
without transporting or we can create our own packages We choose to create our
own package named Y_WEBDYNPRO (Fig 32)
We have chosen the package type ldquoNot a Main Packagerdquo because this package
holds development object and not other packages
After creating the package we create a Web Dynpro component as follows
right-click on the package name and from the context menu we select Create Web Dynpro Web Dynpro component We have to enter the component
name a short description the type we want to create the view name and the
window name (Fig 33)
Fig 32 Creating the package Y_WEBDYNPRO
Fig 33 Creating a Web Dynpro component
12 3 Designing a Web Dynpro Component
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
After saving our component we have to assign it to our package (Fig 34)
As a result in Object Navigator we can see the Package Y_WEBDYNPRO and
our first created Web Dynpro Component (Fig 35)
The name of the development objects marked in blue are not active After
creating the Web Dynpro component we have to activate it (Fig 36)
Fig 34 Assigning the component to a package
Fig 35 The content of our package
3 Designing a Web Dynpro Component 13
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
31 View
Each Web Dynpro application has at least one view Each View has a view Layout
where we can add different UI (User Interface) elements that can be nested one in
the other one to create the screen The positioning of the UI elements in a view is
realized by using the layout and data layout
Each View has a view controller that is automatically created for this view and
each View has several tabs (Properties Layout Outbound Plug Inbound Plug
Attributes Context Actions and Methods) This indicates that a View consist of
many parts
311 View Layout
The screen content of a view is designed in the Layout tab The View Layout isdivided in three areas
l UI element libraryl View designerl Context menus UI elements properties and UI element hierarchy (Fig 37)
Tip
In case an error occurs and in the View Layout we canrsquot see UI Element Library and View
Designer we have to map the IP address to the host name because the Web Dynpro ABAP
uses a fully qualified domain name FQDN in conclusion the URLs that contain the IP
addresses are not supported
To realize this mapping we use the HOSTS file (CWindowssystem32driversetc) where we
enter the IP address and the host name separated by (at least) one space
In case an error occurs ldquoURL httphostnameportsapbcwdvd call was terminated because the
corresponding service is not availablerdquo ndash we have to activate the respective service by using the
SICF transaction
Fig 36 WD component activation
14 3 Designing a Web Dynpro Component
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
The UI Elements are grouped in a library to be accessed via the View Layout
We have several ways to add an UI element into the view layout For example
l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig 38)
l By dragging amp dropping (Fig 39)
All the UI Elements we enter into a screen are children of the node ROOTUI-
ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE-
MENTCONTAINER is the top of this hierarchy With ldquoSwap Root Elementrdquo we
have the possibility to transform ROOTUIELEMENETCONTAINER from a
Transparent Container into another UI element (Table FlashIsland Group etc)
In this way we can use for example the FlashIsland UI element to integrate Adobe
Flex into our web Dynpro component This transformation is possible only if the
ROOTUIELEMENTCONTAINER doesnrsquot have any child UI elements
Fig 38 Adding UI elements into the view
View Designer
UI element Library
UI elements properties
UI elements hierarchy
Context Menus
Fig 37 View Layout
31 View 15
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
In our ROOTUIELEMENTCONTAINER we insert one Group UI element one
InputField UI element one Label UI element one TextView UI element and one
Button UI element (Fig 310)
If we select individual UI elements in the layout of a view their properties are
displayed in the Properties area In this way we can change the properties of each
element For example we have changed the property design of the button UI
element and the property state of the InputField UI element (Fig 311)
As a result of changing the property state of the InputField UI element from the
Normal item to the required one the label associated to this UI element becomes a
red star and the end user knows that this value is mandatory
For a property we can create fixed character strings we can choose from a list
or we can bind properties to context nodes or attributes by using the Binding button
For the text property of an UI element Button we have created a fixed character
string ldquoSaverdquo For the design property we have chosen from the list one of the
supported designs
Group
Label
Button
TextView
InputField
Fig 310 View layout
Drag amp Drop
Fig 39 Adding UI elements into the view
16 3 Designing a Web Dynpro Component
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
We need to bind the value property of the InputField UI element and the text
property of the TextView UI element To be able to do this we will create two
context attributes
By using ldquoContext Menusrdquo we have the possibility to create for an application
our own context menus displayed in the Browser when the user presses right click
on an UI element In standard mode the web Dynpro Framework offers the default
context menus with certain functionalities eg hiding an UI element displayed into
the Browser After running the application we can test this standard mode by right-
clicking on the inputField UI element
312 Context View
The data are stored in the context and the UI Elements are the only objects the user
interacts with
Every View has a Context View where we can create context nodes and
attributes Via data binding the context of a view controller provides a view with
all the required data For our application we create two context attributes named
NAME and GREETING of STRING type (Fig 312)
To put the data on the screen and to read data from user we connect the proper
UI Elements properties with attributes or nodes
In our case we connect the property value of the InputField UI element with the
NAME attribute To create a greeting for the user and to show it after the user presses
the Save button we connect the property text of the TextView UI element with the
GREETING attribute These connections are known as data binding (Fig 313)
Fig 311 UI element properties
31 View 17
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
The effect of the binding is that at runtime any data changes are transported
in both directions and these changes affect all the properties bound to this
element
Fig 313 Data binding
Fig 312 Creating an attribute in context view
18 3 Designing a Web Dynpro Component
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
313 Actions
Some of the UI Elements have special events that are linked with the user actions
The UI element Button is one of these UI elements and thatrsquos why we have to create
an action that reacts to the user interaction To do this we use the Action tab
(Fig 314)
As we can see each action has a corresponding event handler method automati-
cally generated by the Framework An event handler method is a special method of
a view controller that has the ONACTION prefix followed by the action name For
the SAVE action the Framework generates the ONACTION event handler
After creating an action we can assign it to an UI element that has attached an
event (Fig 315)
After generation this method is empty but we can fill it with source code by
using the Methods tab
314 Methods
In the Methods tab of a View we can find some types of methods (eg event handler
methods Hook methods user-defined instance methods)
Fig 315 Assigning an action
to an UI element
Fig 314 Creating an action
31 View 19
