Web Dynpro ABAP for Practitioners

By Ulrich Gellert and Ana Daniela Cristea

Web Dynpro ABAP, a NetWeaver web application user interface tool of SAP enables web programming connected to SAP Systems. The main focus of the authors was to create a book based on practical experience. Each chapter includes examples which lead through the content step-by-step and enable the reader to gradually emerge in the topic of the Web Dynpro ABAP process. The authors explain in particular how to design a Web Dynpro component, the data binding and inteface methods, and the view controller methods. They also describe the other SAP NetWeaver Elements (ABAP Dictionary, Authorization) and the integration of the Web Dynpro Application into the SAP NetWeaver Portal.

• Language: English
• Publisher: Springer
• Release date: Jun 21, 2010
• ISBN: 9783642113857

Book preview

Ulrich Gellert and Ana Daniela CristeaWeb Dynpro ABAP for Practitioners10.1007/978-3-642-11385-7_2© Springer-Verlag Berlin Heidelberg 2010

2. SAP Easy Access

Ulrich Gellert¹   and Ana Daniela Cristea¹  

(1)

c/o S + P LION AG, Robert-Bosch-Str. 9, 68542 Heddesheim, Germany

Ulrich Gellert (Corresponding author)

Email: [e-mail]

Ana Daniela Cristea

Email: [e-mail]

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.

The way to get started is to quit talking and begin doing

Walt Disney

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. 2.1).

A978-3-642-11385-7_2_Fig1_HTML.gif

Fig. 2.1

SAP easy access

2.1 Changing the SAP Easy Access

We can change the SAP easy access settings through the menu Extras → Settings, by specifying settings as follows:

The place of the Favorites

The presents of the menu

The easy access picture in the right side of the screen – to be present or not

Displays or not the technical names (Fig. 2.2).

A978-3-642-11385-7_2_Fig2_HTML.gif

Fig. 2.2

Settings

2.2 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. 2.3).

A978-3-642-11385-7_2_Fig3_HTML.gif

Fig. 2.3

Inserting transaction onto the Favorites list

As a result, the new item appears in our Favorites list (Fig. 2.4).

A978-3-642-11385-7_2_Fig4_HTML.gif

Fig. 2.4

Favorites list

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 transactions (e.g. with transaction SE93) which are going to be inserted in this table. 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. 2.5).

A978-3-642-11385-7_2_Fig5_HTML.gif

Fig. 2.5

Transactions used

To add other objects, we can choose them from the menu Favorites → Add Other Objects (Fig. 2.6).

A978-3-642-11385-7_2_Fig6_HTML.gif

Fig. 2.6

Adding new objects in Favorites list

We add the web address to open the SDN page (Fig. 2.7).

A978-3-642-11385-7_2_Fig7_HTML.gif

Fig. 2.7

Inserting a web address

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.

2.3 Setting a Transaction as Start Transaction

We have the possibility to set a transaction as start transaction: Extras → Set start transaction (Fig. 2.8). In this way, the desired transaction is automatically started after logging-in into the system (in our case the SE80 transaction), and we don’t see the SAP easy access anymore.

A978-3-642-11385-7_2_Fig8_HTML.gif

Fig. 2.8

Setting the start transaction dialog box

2.4 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 don’t 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. 2.9).

A978-3-642-11385-7_2_Fig9_HTML.gif

Fig. 2.9

Creating a SAP Shortcut on our Desktop

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.

Ulrich Gellert and Ana Daniela CristeaWeb Dynpro ABAP for Practitioners10.1007/978-3-642-11385-7_3© Springer-Verlag Berlin Heidelberg 2010

3. Designing a Web Dynpro Component

Ulrich Gellert¹   and Ana Daniela Cristea¹  

(1)

c/o S + P LION AG, Robert-Bosch-Str. 9, 68542 Heddesheim, Germany

Ulrich Gellert (Corresponding author)

Email: [e-mail]

Ana Daniela Cristea

Email: [e-mail]

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.

Experience is something you don’t get until just after you need it

Steven Wright

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 NetWeaver ABAP trial version we can use BCUSER, automatically registered as a developer. 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. 3.1).

A978-3-642-11385-7_3_Fig1_HTML.gif

Fig. 3.1

Object navigator

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 (e.g. reports, database tables, data elements, classes, function modules, etc).

The development objects we create as customer have the first letter y or z. 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 $TMP to create test programs without transporting, or we can create our own packages. We choose to create our own package, named Y_WEBDYNPRO (Fig. 3.2).

A978-3-642-11385-7_3_Fig2_HTML.gif

Fig. 3.2

Creating the package Y_WEBDYNPRO

We have chosen the package type Not a Main Package, 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. 3.3).

A978-3-642-11385-7_3_Fig3_HTML.gif

Fig. 3.3

Creating a Web Dynpro component

After saving A978-3-642-11385-7_3_Figa_HTML.gif our component, we have to assign it to our package (Fig. 3.4).

A978-3-642-11385-7_3_Fig4_HTML.gif

Fig. 3.4

Assigning the component to a package

As a result, in Object Navigator we can see the Package Y_WEBDYNPRO and our first created Web Dynpro Component (Fig. 3.5).

A978-3-642-11385-7_3_Fig5_HTML.gif

Fig. 3.5

The content of our package

The name of the development objects marked in blue are not active. After creating the Web Dynpro component, we have to activate it A978-3-642-11385-7_3_Figb_HTML.gif (Fig. 3.6).

A978-3-642-11385-7_3_Fig6_HTML.gif

Fig. 3.6

WD component activation

3.1 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.

3.1.1 View Layout

The screen content of a view is designed in the Layout tab. The View Layout is divided in three areas:

UI element library

View designer

Context menus, UI elements properties and UI element hierarchy (Fig. 3.7).

A978-3-642-11385-7_3_Fig7_HTML.gif

Fig. 3.7

View Layout

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:

By right-clicking on the ROOTUIELEMENTCONTAINER (Fig. 3.8)

A978-3-642-11385-7_3_Fig8_HTML.gif

Fig. 3.8

Adding UI elements into the view

By dragging & dropping (Fig. 3.9).

A978-3-642-11385-7_3_Fig9_HTML.gif

Fig. 3.9

Adding UI elements into the view

All the UI Elements we enter into a screen are children of the node ROOTUIELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELEMENTCONTAINER is the top of this hierarchy. With Swap Root Element 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 doesn’t have any child UI elements.

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. 3.10).

A978-3-642-11385-7_3_Fig10_HTML.gif

Fig. 3.10

View layout

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. 3.11).

A978-3-642-11385-7_3_Fig11_HTML.gif

Fig. 3.11

UI element properties

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 Save. For the design property, we have chosen from the list one of the supported designs.

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 Context Menus 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, e.g. 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.

3.1.2 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. 3.12).

A978-3-642-11385-7_3_Fig12_HTML.gif

Fig. 3.12

Creating an attribute in context view

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. 3.13).

A978-3-642-11385-7_3_Fig13_HTML.gif

Fig. 3.13

Data binding

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.

3.1.3 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 that’s why we have to create an action that reacts to the user interaction. To do this, we use the Action tab (Fig. 3.14).

A978-3-642-11385-7_3_Fig14_HTML.gif

Fig. 3.14

Creating an action

As we can see, each action has a corresponding event handler method, automatically 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. 3.15).

A978-3-642-11385-7_3_Fig15_HTML.gif

Fig. 3.15

Assigning an action to an UI element

After generation, this method is empty, but we can fill it with source code by using the Methods tab.

3.1.4 Methods

In the Methods tab of a View, we can find some types of methods (e.g. event handler methods, Hook methods, user-defined instance methods).

In our case, in the Methods tab we can find the Hook methods, automatically generated by the Framework, and our event handler method ONACTIONSAVE (Fig. 3.16).

A978-3-642-11385-7_3_Fig16_HTML.gif

Fig. 3.16

Methods tab

With double-click on the method name, we open the ABAP editor (Fig. 3.17). In this way, we can insert the source code.

A978-3-642-11385-7_3_Fig17_HTML.gif

Fig. 3.17

ABAP editor

The user enters his name that we use to show a greeting message with the help of textView UI element. To create a greeting for the end user, we concatenate his name with the string WELCOME and we pass this string value in the GREETING attribute. After this, we reset the inputField UI element. To do this, we pass an empty string into the NAME attribute bound to the corresponding UI element (Listing 3.1).

A978-3-642-11385-7_3_Fig39_HTML.gif

Listing 3.1

On action save event handler method

For more details about Methods, please see Chap. 7.

3.1.5 Properties

In the Properties tab, we can create a description text for our view, we have information about the view and about the person who created and changed this view. In this tab, we can set the view lifetime:

Framework controlled – controlled by Framework

When visible – lifetime limited to its visibility. A view controller is always deleted as soon as the corresponding view is no longer displayed on the user interface. It is used when a view is displayed only once and not repeatedly.

Additionally, Property tab offers the possibility to define the usages (Fig. 3.18).

A978-3-642-11385-7_3_Fig18_HTML.gif

Fig. 3.18

Properties view

We can define a usage to be able to access the methods of another internal controller or of an interface controller, if the usage has been defined for an external component. To create a new usage in the Used Controller/Components table, we have to choose the Button Create Controller Usage. The table Used Controller/Components includes a list with all the global controllers of our own component and, in case we define usages, this list includes the external component and its interface controller.

In our case, we don’t use any external components. In the list we have only the global controller COMPONENTCONTROLLER. We have to specify that, for each view controller, the usage of the corresponding component controller is automatically created.

3.1.6 Attributes

Each View controller contains some attributes automatically generated by the Framework (Fig. 3.19).

A978-3-642-11385-7_3_Fig19_HTML.gif

Fig. 3.19

Attributes tab

The attribute WD_COMP_CONTROLLER is a reference variable of IG_COMPONENTCONTROLLER type that we can use to access all the publicly accessible methods of the component global generated interface of the corresponding component controller.

The attribute WD_THIS