Wedynpro Abap

No portion of this publication may be reproduced without written consent. 3

Put your integrated WebSphere environments into production fast

For years, SAP teams with ABAP experience have longed for a solutionwhereby ABAP developers could write professional, Web-based applica-tions without having to learn HTML or JavaScript. At the same time, SAPhas longed for a solution to bridge the divide between SAP applicationswritten in ABAP and those written specifically for the Web. Until now,ABAP developers were left with the daunting task of having to learn anunfamiliar technology, such as Business Server Pages (BSPs) or (worse yet)Java, and SAP grew to rely heavily on a gateway, such as SAP InternetTransaction Server (ITS), to dynamically convert (i.e., screen paint) SAPGUI Dynpro screens to HTML. With SAP NetWeaver 2004s, SAPcustomers, partners, and even SAP itself finally have a viable solution.

Web Dynpro for ABAP (WD4A) a form-based version of the stable,proven classic Dynpro technology underlying ABAP promises to changehow both SAP and SAP customers design, develop, and deploy new business applications. If this sounds like Im overstating its significance,consider that SAP is in the process of migrating its entire product portfolioto Web Dynpro over the upcoming months. The first completely WebDynpro ABAP-based releases, which were introduced to the marketrecently, are SAP Supplier Relationship Management (SRM) 6.0 and SAPs new mid-market solution, SAP All-in-One. Since there are no plans to upgrade SAP Enterprise Resource Planning (ERP) 2005 to a new version until 2010, the Web Dynpro ABAP-converted applicationswill be shipped in SAP ERP 2005 enhancement packages.1

At this point, perhaps youre wondering: Why is Web Dynpro for ABAPso revolutionary? How is it superior to SAPs existing Web development

Get started developing Web-native custom SAP applicationswith Web Dynpro for ABAPby Ulli Hoffmann

Ulli HoffmannManaging DirectorINIDFAB Computing GmbH

Ulli Hoffmann is ManagingDirector of INIDFAB ComputingGmbH, a company that focuses onthe development and technology of Web-based applications andprocesses running on the SAPNetWeaver platform. Besidesdeveloping the business ofINIDFAB, Ulli is involved invarious projects with SAP AG and SAP customers as a seniorconsultant. Currently, his majorproject is designing andimplementing a Web DynproABAP-based extension frameworkfor SAP SRM 6.0. Ulli is theauthor of a book on Web Dynprofor ABAP published by SAPPRESS. You may contact him [email protected].

1 Examples of this massive project are component LORD_MAINTAIN_COMP, which replaces theSAP GUI transactions for sales order processing VA01 through VA05, and component MMPUR_LEAN_PO_COMP, which replaces the SAPGUI transactions for purchase order processing ME21trough ME23. SAP is already urging customers to begin using Web Dynpro for all future development projects.

This article originally appeared in the July/August 2007 issue of SAP Professional Journal and appearshere with the permission of the publisher, Wellesley Information Services. For information about SAPProfessional Journal and other WIS publications, visit www.WISpubs.com.

SAP Professional Journal July/August 2007

4 www.SAPpro.com 2007 SAP Professional Journal. All rights reserved.

options such as BSPs, SAP ITS, and the classicDynpro development? There are four key reasons:

Web Dynpro for ABAP is based on a metamodelconcept. When a Web Dynpro application is dev-eloped, the data is stored in tables as metadata.Depending on the rendering technique used by the client, the source code, which is executed atruntime, is generated from the data residing in the metadata tables. With this approach, the appli-cation developer doesnt need to consider duringdesign time which client will run the application.The WD4A framework provides adapter modulesthat generate the client-specific rendering. Pro-viding the availability of such adapters, WebDynpro ABAP applications are able to run on theWeb, mobile devices, smart clients, and so forth.

Web Dynpro for ABAP applications can bewritten by ABAP developers. Over the years,SAP customers have trained and educated armiesof developers and business process analysts in the specifics of SAPs proprietary programminglanguage, ABAP. Their huge investment ispreserved by letting these experts now writefeature-rich applications based on ABAP that canbe run on the Web or in any other environment.

Web Dynpro for ABAP applications provideeasy access to comprehensive ABAP stack functionality. SAP applications deliver manyfeatures that increase the efficiency of developersand users of business applications, and thereforeany application that carries the SAP logo shouldinclude these features. With Web Dynpro forABAP, functionalities such as the F1 and F4 helpsystems, T100 messaging, modification-freeenhancements, and many more are now availableto be integrated into Web Dynpro for ABAP appli-cations via a few mouse clicks.2

Web Dynpro for ABAP separates business logicfrom presentation logic. Web Dynpro for ABAPimplements the Model-View-Controller paradigm(MVC).3 The clear separation of logic layersallows a better understanding of the design anddevelopment process, urges developers to improvethe quality of their work, and lowers project andmaintenance cost at the end of the day.

With all of these benefits, its not hard to under-stand why SAP is migrating business applications toWD4A, but also why SAPs emerging form-basedclient technologies such as SAP NetWeaver BusinessClient and SAP Interactive Forms by Adobe will bebased on Web Dynpro for ABAP as well.

Note!

Web Dynpro for ABAP is a new developmentoption for programmers writing complex business applications. Web Dynpro for ABAPdoes not replace SAP Visual Composer4 withinSAP NetWeaver Portal or the Web ApplicationDesigner within SAP NetWeaver BusinessIntelligence (BI), which continues to enablenon-programmers to develop only simple, Web-based reports without programming.

This article provides an introduction to WebDynpro for ABAP programming and some guidancefor your future development projects and decisions.The new Web Dynpro design time, which is integratedinto the ABAP Workbench, provides a number oftools for developing WD4A applications. I describethese tools throughout this article to help you becomefamiliar with their core functionalities. I also coverwhen to use them and for what purpose.

2 Implementing such functionalities in a Web Dynpro Java applicationeither is not feasible or requires much more effort compared to WebDynpro ABAP. The developer needs not only to write complex Javascenarios to get the desired behavior, but also to extend the ABAPback end to provide the data through remote function calls (RFCs) or Web services.

3 For information on the MVC paradigm, go to Wikipedia, the onlineencyclopedia, at http://en.wikipedia.org/wiki/Model-view-controller.

4 For information on this development tool, refer to the SAP ProfessionalJournal article, Get started creating SAP Enterprise Portal iViews withVisual Composer a purely model-driven, code-free developmentapproach by Karl Kessler (November/December 2005).

Get started developing Web-native custom SAP applications with Web Dynpro for ABAP


With WD4A you can develop applications intwo manners, one is called declarative program-ming you create the layout including the screenelements and the containers providing the data tothe screen elements using tools such as the ViewEditor and Controller Editor. In addition to usingthese graphical tools, you can design your userinterface (UI) by writing pure ABAP code. InWD4A this is called dynamic programming inwhich you develop your application in a way thatdecisions towards the structure of the layout anddata containers as well as navigation are madeduring runtime. This enables the developer toimplement generic components that can be usedfor a variety of application scenarios. However,dynamic programming requires a deep under-standing of the inner workings of the framework.Because this article serves as an introduction to WD4A framework, its focus is on declarativeprogramming.

To help you become familiar with the develop-ment environment and the process of componentdevelopment, I step you through developing acomponent that can be used to display purchaseorder data. The goal of the example is to show the steps required to develop a component that isable to display the header and item data of a givenpurchase order. Another important characteristic of WD4A is its component-based structure, whichfocuses on component reuse. To help illustrate this functionality, I show you how you can inte-grate and use an existing component in a broader

business case. The idea is to develop a componentthat displays the header data of a particularpurchase order and provides the functionality ofdisplaying the items of that purchase order in a list as well as the detailed data of a single selecteditem. During development of the example, welltake into consideration that the component can be used in a business application that can create,change, and delete purchase orders and identifywhere items can be added to these purchase orders.

The article is aimed at the ABAP developercommunity, which has become familiar with theABAP Workbench over years of implementingclassic Dynpro applications. Having some experi-

Note!

You can use this article as a starting point to getinsight into the concepts, behavior, and advan-tages of the Web Dynpro for ABAP framework.It should encourage you to try to develop morecomplex scenarios and enable you to estimatedevelopment effort for developing feature-richuser interfaces (UIs) in WD4A.

Note!

Classic Dynpro development5 still remains anoption for development of design and adminis-trative tools. An example is SAPs integrateddevelopment environment (IDE) for ABAPdevelopment, better known as ABAPWorkbench. You should consider using BSP forUI development in the following cases:

The application is going to run only in aWeb environment

The customers requirements are based onpixel-exact rendering and positioning ofscreen

The application requires rich graphic andplug-in support

The application runs in stateless mode

5 For more information on dynpro programming, see the SAPProfessional Journal articles, "Take another look at ABAP dynpros practical programming techniques for better user interfaces with morecontrol and fewer surprises" and "Take another look at ABAP dynpros advanced programming techniques for better user interfaces withmore control and fewer surprises" by Doris Vielsack and ArndtRosenthal (March/April 2006).



ence in BSP6 will help you to understand the wayview elements (which are the controls of the visiblearea of a user interface) are positioned on the screenand how to modify their appearance. In general,developing Web Dynpro ABAP applications meansdealing a lot with object-oriented methodologies anddesign patterns. Therefore, you should have a well-grounded understanding of how object-orientedparadigms are treated in ABAP Objects.7 This willdefinitely speed up your development cycles.

The Web Dynpro componentand its partsA Web Dynpro component is the heart of a WebDynpro application. It is the basis of your applicationdevelopment and for the reuse of the component itself.A component can be seen as a modular unit repre-senting a set of tasks. Components can be embeddedwithin other components. A component cannot beexecuted on its own. To run a component, it must beassigned to an application. In the Web Dynpro context,the application is a technical entity that defines:

The component, which is the entry point to theapplication

An interface view of the entry component, whichdisplays during startup

The navigation plug of the interface view, which is called during startup

Figure 1 shows the parts that comprise andsupport a Web Dynpro component.

Component interface: You can assign certain

parts of a component to the interface of thecomponent. The component interface provides theuser or other components access to the inner work-ings of a component. However, you can defineinterfaces that are independent of a component.Such an interface is called a Web Dynpro compo-nent interface definition. You define an interface in case different components need to implement a common interface, or the development of acomponent and the development of the use of acomponent need to be separated. The interfacecontains a visual part (interface view) and aprogrammatic part (controller and context).

Component usage: By defining a componentusage, you can embed other components into acomponent. In that way you will be able to use and access the functionality developed in the usedcomponent. Consider this example: Assume thatyou have to create a component to register users ofa Web site. The user data, which is to be collected,comprises the name and the address. You knowthat a colleague has already developed a genericcomponent for maintaining address data. You cannow reuse the component by defining a usage inthe component for registering users and access thefunctionality for maintaining the address datawithout further development effort.

Controller: Controllers handle data flow andbinding. Every view belongs to a dedicated view

Figure 1 Parts of a Web Dynpro component

6 For more information on the BPS application development, see the following SAP Professional Journal articles: "Developing CustomApplications for SAP Enterprise Portal Starting with the 'Right'Options in Light of SAP NetWeaver" by Patrick Dixon (March/April2005) and "Develop More Extensible and Maintainable WebApplications with the Model-View-Controller (MVC) Design Pattern"by Ken Huang and Markus Wieser (January/February 2004).

7 For information on ABAP Objects, see the SAP Professional Journalarticle "Not Yet Using ABAP Objects? Eight Reasons Why EveryABAP Developer Should Give It a Second Look" (September/October2004) by Horst Keller and Gerd Kluger.



controller, every window belongs to a windowcontroller, and the heart of every component is the component controller. You can add customcontrollers for further structuring of tasks and data(for example, for separating header and item datain a sales order application). A view controllerperforms event handling based on the actionsinvoked in the view. Besides event handling(which is implemented in event handler methods),controllers may perform other activity imple-mented in hook methods, such as WDDOINITor WDDOMODIFYVIEW.

View: A view is the visible area of the UI. Theview contains controls, known as view elements.Actions are properties of view elements used totrigger events for designated user input (i.e.,selecting a link or pressing a button). An event isalways connected to a handler method, where theuser input is processed. You can add navigationplugs to a view for navigating between views.

Note!

SAP proposes defining only a maximum number of 15 views per component. Exceedingthis number will lead to a noticeable performance reduction of your application.

Window: You can arrange views in complexscreen layouts using windows. The window alsodefines navigation links between navigation plugs.

Looking at a component from the outside, the terminterface view is used instead of the term window.

Context: All data processing in a Web Dynproapplication is done via contexts. Each controllerhas a context, which represents a hierarchicalstructured data container, in which you can enternodes and attributes. The attributes represent yourdata elements; the nodes are used to group attrib-utes and other lower-level nodes. Typically, a viewcontrollers context keeps the data to be presentedin the view elements (e.g., input fields, tables, etc.)of the view, and a binding exists between the viewelement properties and the context elements. Acomponent controllers context keeps the datarequired in the component and shared amongmultiple views and windows of that component.Context elements can be mapped across context.Through context mapping the framework ensuresthat the data is available in all mapping contexts at runtime.

View element: View elements are the smallestparts of a view. In most of the cases, they candescribe a graphical, visible area in the client (e.g., buttons, input fields, check boxes, etc.).However, in certain cases they can also describe a piece of functionality that is added to the viewand executed in the client. An example is theTimedTrigger view element, which adds a piece of code to the view (in the case of a Web browserclient, these are JavaScript functions) that causesthe client to send periodic requests to the server.The appearance and functionality of all viewelements are described by their properties.Examples of view element properties are height,width, design, and so on.

Web Dynpro Explorer toolsetYour starting point for developing Web Dynpro appli-cations is the ABAP Workbench (transaction SE80).The Web Dynpro Explorer, which contains the toolsetfor editing the different parts of a component, is inte-grated into the ABAP Workbench, which means youdont need to memorize another transaction code. Just

Note!

SAP proposes defining only a maximum number of eight usages per component.Exceeding this number will lead to a noticeableperformance reduction of your application.

select the entry Web Dynpro Comp./Intf., and you canstart working with the Web Dynpro Explorer either bycreating a new component or interface or displayingan existing one. Lets look at each of the tools in thetoolset:

Component Editor

Controller Editor

View Editor

Window Editor

Web Dynpro Code Wizard

Component Editor

After you select the component you want to work onfrom the object list in the Web Dynpro Explorer, theComponent Editor is displayed, as shown in Figure 2.The Component Editor provides an overview of theparts of which your component consists. The initialframework creates a component controller, a compo-nent interface, and a window to which you add all the other parts, such as views, usages, and customcontroller. As you can see, the selected component(i.e., Z_WDC_SAPPJ_SIMPLE) consists of a compo-nent controller, a component interface including the



interface view W_DISPLAY_UNAME, the viewV_DISPLAY_UNAME, and the windowW_DISPLAY_UNAME.

Note!

Every window added to a component is automatically added to the interface controllerof that component (thats why W_DISPLAY_UNAME appears twice: once under InterfaceViews and again under Windows). When youtalk about the interface controller of a compo-nent, the window is then referred to as an interface view.

To add a new part to the component, you right-click on the component name in the Component Editorand then select the part you want to add from thecontext menu. If you create a new component, thecomponent name is entered in the input field of theobject list. After you press the Enter key, the frame-work leads you through the creation process by askingyou to assign a package and a transport request to the object.

As you can see, the Component Editor also liststhe Web Dynpro applications to which the componentis assigned. In the example, the entry point is theapplication Z_WDA_SAPPJ_SIMPLE, which definescomponent Z_WDC_SAPPJ_SIMPLE.

Note!

Multiple applications can use the same component as an entry point. The component will behave differently because of the differentinterface views and start plugs defined in eachapplication.

Figure 2 Component Editor



Controller Editor

You program the behavior of a component in itscontrollers. There you can create the context, defineattributes, and implement methods. The componentcontroller allows you to provide the componentsinterface to other components via methods, events,and context nodes to be specifically identified. Themethods, events, and context nodes of this interfacethen make up the interface controller. The interfacecontroller itself cannot be changed separately; youmust make modifications to the interface via thecomponent controller. The interface controller iseditable only in cases where you create a WebDynpro component interface definition.

There are component-global controllers, such asthe component controller, custom controller, andinterface controller. You can access these controllersby selecting its respective name in the ComponentEditor. You create and maintain the individual partsof all component-global controllers in this area ofthe Web Dynpro Explorer. In Figure 3 the compo-nent controller is selected in the Component Editorand its parts are shown in the right pane of thewindow.

In every controller, you can implement severaldifferent types of methods. You can use hook

methods to interfere in the program flow at certain times. Names of hook methods start withWDDO; examples are WDDOINIT() and WDDOMODIFYVIEW(). In their initial state, thesemethods do not contain statements. Furthermore, in all controllers, you can implement additionalmethods that manage your data and control logic.These methods are the instance methods of a compo-nent, called using the self-reference WD_THIS>[method_name]. Event handler methods are imple-mented to respond to events of controllers, to eventsof navigation plugs, and to actions that are receivedfrom the client. If you want to create an event handlermethod, which registers an event that can be triggeredwithin another controller, you can assign its name onthe Methods tab of the controller. Then you can selectthe event handler method type and the event to whichto react. You use supply function methods to populatethe context attributes of the context node elements. Ifit exists, the supply function method is always calledbefore the initial read access to that context node.Supply function methods are assigned to contextnodes by binding the Supply Function property to therespective method.

Views and windows also have controllers. Toaccess these controllers, you can switch to the ViewEditor or Window Editor by selecting the name of the

Figure 3 Accessing the Controller Editor of the component controller



respective view or window from the ComponentEditors list.

Note!

You can access the data and functionality of the component-global controllers from every-where in the component; whereas, the data ofthe lower-level controllers of the views andwindows is only visible in the respective viewor window.

View Editor

The View Editor consists of a graphical layout editor,called the view designer, and a view controller. Youaccess the View Editor from the Component Editor byselecting the name of the particular view. You openthe view designer by selecting the Layout tab in theView Editor. Figure 4 shows the View Editor of theview V_DISPLAY_UNAME. Under the Layout tab,

you can see a number of view elements arranged bythe view designer in a tree-like structure.

You use the view designer to define the visualappearance of the UI by adding and arranging view elements to the layout. You access the viewelements from the Layout tab of the View Editor. The view designer is divided into two parts: a treerepresentation of the view starting at a root node (the ROOTUIELEMENTCONTAINER) and aWYSIWYG tool. The WYSIWYG tool renders immediately the view elements that you have added to the layout. You can turn this tool on and off usingthe Show/Hide Layout Preview button.

Finally, you use the view controller to implement thelogic of the view. In a view controller, you can definethe context, methods, actions, and navigation plugs.

Window Editor

The Window Editor consists of a graphical part, thenavigation modeler, and a window controller.

You access the Window Editor from theComponent Editor by selecting the name of the particular window. You open the navigation modeler

Figure 4 Accessing the view designer as part of the View Editor



by selecting the Window tab of the Window Editor.Figure 5 shows the Window Editor of the windowW_DISPLAY_UNAME. Under the Window tab, youcan see the embedded views including their inboundand outbound plugs.

You can link all views of the component with eachother by defining navigation links between the plugs.The linkage specifies the navigation path between theviews at runtime. You can also create inbound andoutbound plugs for a particular window. These plugsare used to manage component behavior when thecomponent is either called from the application orother components or when the component is left.

Web Dynpro Code Wizard

The Web Dynpro Code Wizard helps to derive ABAPstatements when you edit controller methods and auto-mates the layout design when you are creating formcontainers or tables. You can launch the wizard fromevery controller editor by clicking on the Web DynproCode Wizard button on the Web Dynpro Explorertoolbar, as shown in Figure 6 (or by pressing the shortkey Ctrl+F7).

The wizard provides a list of functions that dependon the location from which you call it. The wizardoffers support in the following cases:

Figure 6 Accessing the Web Dynpro Code Wizard

Figure 5 Accessing the navigation modeler as part of the Window Editor



Calling a method in the controller

Calling a method in a used controller

Creating a used component

Read access to a context node

Adding messages to the message manager

Accessing the portal manager

Triggering navigation by calling an outbound plug

Triggering events

Creating tables in the view designer

Creating forms in the view designer

Steps to building a simpleWeb Dynpro applicationWeb Dynpro development involves a variety of toolsfor creating and editing all necessary parts. Thefollowing is a simple application that shows in whatorder you need to create the various parts and whattools you need to use. The purpose of this applica-tion is to output the SAP user name to the browserwindow. Using what youve learned about the parts ofa Web Dynpro application and the development toolsprovided by the Web Dynpro Explorer, lets build asimple application that welcomes the user at startup.

1. Use transaction SE80 to enter the ABAPWorkbench, and then select Web DynproComp./Intf. from the object list to start WebDynpro Explorer.

2. Enter a name for the Web Dynpro component youare creating (e.g., Z_WDC_SAPPJ_SIMPLE), asshown in Figure 7. See the sidebar on the nextpage for naming recommendations.

Figure 7 Creating a new component

Figure 8 Specifying the component description and window name

Replace the default windowname with a new name

3. Press the Enter button, and when asked whetheryou want to create a new object, confirm the query.

4. After you confirm the query, the dialog in Figure 8appears. Here you can enter a short description of the component, and specify whether you arecreating a Web Dynpro component (alreadyselected) or a Web Dynpro component interface.Also in this dialog, you assign a name for thewindow. The framework defaults the componentname as the window name, but to avoid any con-fusion that might be caused by having the samenames, enter a different name for the window (e.g.,W_DISPLAY_UNAME), and then click on .



Note!

The sample applications described in this article were developed on an SAP NetWeaverApplication Server (AS) ABAP 7.00 SP10,which is included in SAP NetWeaver 2004s and SAP ERP 2005. In case you have access tothe follow-up release, which is SAP NetWeaverAS ABAP 7.10, included in SAP NetWeaver2007, the screen shown in Figure 8 might alsoinclude a field for entering the name of a view.

5. Enter a package name and assign a transport task.These queries are standard ABAP behavior anddont differ from any other scenario involving the creation of any ABAP object.

6. Web Dynpro Explorer now displays the component, including the component controller,the interface controller, and the window. Right-click the component name and select Create View from the context menu, as shown in Figure 9, and then enter the view name, e.g.,V_DISPLAY_UNAME.

The framework opens the View Editor and defaults

Naming Web Dynpro partsUse these recommendations for naming your Web Dynpro parts to avoid confusion and make your architecture better to be understood by others:

Use the literal _WDC_ in the Web Dynpro component name (e.g., Z_WDC_SAPPJ_SIMPLE)

Use the literal _WDA_ in the Web Dynpro application name (e.g., Z_WDA_SAPPJ_SIMPLE)

Prefix view names with V (e.g., V_DISPLAY_UNAME)

Prefix window names with W (e.g., W_DISPLAY_UNAME)

Figure 9 Creating a view



to the tab for editing the view layout. Our exampleapplication will output a greeting to the user usingthe SAP user name; therefore, we need to add twoTextView view elements to the layout: one for thegreeting text and the other for the user name.

7. Right-click on the ROOTUIELEMENTCON-TAINER entry of the layout, enter the name of the element you want to create (e.g., TXV_GREETING), and then select the type of element(e.g., TextView), as shown in Figure 10. All subse-quent UI elements added to a view layout will behierarchically subordinate to the UI element calledROOTUIELEMENTCONTAINER. The root node isalways of type TransparentContainer and is alwayscalled ROOTUIELEMENTCONTAINER. Youcannot change this it is hard coded!

8. Create the second TextView type element, andname it TXV_UNAME. The resulting layout structure is shown in Figure 11.

9. The TXV_GREETING TextView view elementwill write the text Welcome to the browserscreen. To assign the static text string to the property text, select TXV_GREETING in the view layout, and then edit its properties in the lower portion of the screen, as shown in Figure 12.

Note!

All text literals assigned to properties of viewelements (e.g., caption, labels, button texts, etc.)become part of the translation process and areautomatically entered into a translators worklist (transaction SE63).

Figure 10 Adding view elements to a view

Figure 11 View layout containing two TextView view elements

this scenario we will use the functionality of asupply function method. Enter the name of thesupply function method (e.g., supply_greeting) into

10.Next to the Welcome text, we want to display theSAP user name. The user name is determined bycalling an application programming interface (API)and is written into a context attribute. First, weneed to create a context node that will contain theattribute. In the View Editor, switch from theLayout tab to the Context tab. Right-click the nodeCONTEXT and select Create Node. The CreateNodes screen is displayed.

11. Enter the name for the context node (e.g.,GREETING). Leave all the other settingsproposed by the framework (see Figure 13).

12.The context node will contain one attribute, whichwill hold the users name and to which the prop-erty text of the TXV_UNAME TextView viewelement will be bound. To create the attribute,right-click on the context node, and then selectCreate Attribute, as shown in Figure 14 on the next page.

13.Assign the name UNAME to the attribute, and setthe type to STRING.

14.Now we will implement reading the SAP username and writing it to the context attribute. For



Figure 12 Editing view element properties

Figure 13 Creating a context node

Note!

A characteristic of the context node is its cardinality. There are four possible settings:

1..1 At the time of context initialization,exactly one element is created that is main-tained at runtime.

0..1 At runtime, a maximum of one con-text element can be used.

1..n At the time of context initialization,one or more elements can be created, but atleast one element must exist at runtime.

0..n At runtime, any number of contextelements can be used.



the Supply Function property field of the contextnode GREETING, as shown in Figure 15.

15.Double-click on the name of the Supply Functionvalue (i.e., supply_greeting) to navigate to themethod editor. To implement the steps for readingthe SAP user name from the API and assigning itto the context attribute, add the code shown inFigure 16 to the supply function method.

16.To display the value of attribute UNAME, we needto bind the property text of the TextView viewelement TXV_UNAME to the context attribute.Select the view element in the layout of the ViewEditor, and then select the button in the Bindingcolumn on the right side of the property table ofthe View Editor, as shown in Figure 17.

17.In the next screen, which displays all availablecontext nodes and attributes, select the attributeUNAME, and confirm the selection by clicking on

. The attribute is then assigned to the propertytext. The binding of a property to a context is indicated by an icon in the Binding column.

Figure 15 Creating a supply function method

Note!

Depending on the value of the property cardi-nality of the context node, you have differentoptions for writing data to the context:

Methods bind_element(), bind_structure(),set_attribute(), and set_static_attributes() are used to bind data to context nodes ofcardinality 0..1 or 1..1.

Methods bind_elements() and bind_table()are used to bind data to context nodes ofcardinality 0..n or 1..n.

Figure 14 Adding attributes to a context node

Right-click on the component name and selectActivate, or click on the Activate button on theWeb Dynpro Explorer toolbar.

20.Now that we have added all our components,views, and attributes, we create the Web Dynproapplication. Right-click on the component name,and select Create Web Dynpro Application from the context menu. Enter an application name,e.g. Z_WDA_DISPLAY_UNAME. Add a shortdescription to explain the use of the application. To identify the component entry point for theapplication, we need to define the window or inter-face view and an inbound plug. Because we haveonly one window and only one default inboundplug added by the framework when the windowwas created, the framework provides their names,which, in this case, well leave. Dont forget tosave your application.



18.Next we need to embed the view into the window.For this purpose, switch to the Window Editor bydouble-clicking the window W_DISPLAY_UNAME on the left side of the Web DynproExplorer. The Window Editor is displayed andopens the navigation modeler, which is locatedunder the Window tab. Right-click on the windowname, and then select Embed View from thecontext menu, as shown in Figure 18. The systemproposes all views available to the component. The view that we need to display the user name isV_DISPLAY_UNAME. After weve selected theview, the system adds it to the window structure.

19.Its time to save and activate the component.

DATA ls_greeting TYPE if_v_display_uname=>element_greeting.

DATA ls_user_data TYPE usr03.

*---- Get user details CALL FUNCTION 'SUSR_SHOW_USER_DETAILS'

EXPORTING

bname = syst-uname

no_display = 'X'

CHANGING

user_usr03 = ls_user_data.

*----- Create user name

CONCATENATE ls_user_data-name1 ls_user_data-name2 '!'

INTO ls_greeting-uname SEPARATED BY space.

*----- Bind to context

node->bind_structure( new_item = ls_greeting ).

Figure 16 Code for implementing a supply function method

Figure 17 Binding a view element property to acontext node attribute

Figure 18 Embedding a view into a window



Note!

A Web Dynpro application consists of one ormore Web Dynpro components. The WebDynpro application defines only the entry pointof the starting component and provides theURL. All programming logic is implemented incomponents.

You can start the Web Dynpro application bypressing F8. In the browser window, you should seeyour name displayed because it is maintained in theSAP system youve been working on.

Note!

Web Dynpro applications are able to run on thefollowing client platforms:

JavaScript-enabled Web browsers (MS IE5.5 and higher, Mozilla 1.7 and higher)

Web Dynpro client for Windows (includedin SAP NetWeaver Business Client NWBC version 1.0)

That concludes our exercise of building a simpleWeb Dynpro application, but we arent done yet. Lets take what youve learned and apply it to a real-world purchase order application.

Web Dynpro component todisplay purchase order dataNow that you are familiar with the basics of WebDynpro development, lets take a step further intoimplementing a component to retrieve and displaypurchase order data. The difference between this WebDynpro application and the first one we created is that

we will now implement a more common UI scenarioinvolving header and item data of business objects. Tohelp illustrate the purpose of the development stepsthat follow, lets first look at the result of the develop-ment effort, as shown in Figure 19.

The purchase order output is displayed in the Webbrowser. The screen is divided into three sections:Purchase Order Header, Purchase Order ItemOverview, and Purchase Order Item Detail. Whencreating the layout, you will include each of thesethree sections in a Group view element.

The Purchase Order Header section displays anumber of properties, e.g., the purchasing documentnumber 4500000008, the company code AR01, etc.The Purchase Order is divided into two areas. TheItem Overview displays the items purchased in a tableformat where, in this example, the item withnumber 00010 is selected in the table. For eachselected item, the item detailed data is shown in theItem Detail section. Switching between items in thetable will automatically update the detailed data of theselected item.

The application is started in display mode; there-fore, all input fields are read-only (that is, you cantenter data; the fields are inactive). The icons at theend of some of the input fields indicate that an inputhelp is available. Clicking on the icon displays a pop-up with information regarding the data presented inthe input field (e.g., a description to the purchaseorder number).

The purchase order data is retrieved by calling the function module BAPI_PO_GETDETAIL, whichuses the purchase order number as importing param-eter. The function module returns the purchase orderheader data in a structure and the item list in aninternal table format. In this example, well run theapplication in display mode only. Then we will extendthe implementation of the purchase order componentby adding the functionality to switch to edit mode tomodify existing item data and add new items to thepurchase order.

Whenever you develop a component, keep its reusein mind. In this example, since the component willdisplay the item detail data of a particular purchaseorder, it should be possible to integrate the component



into applications in which it can be called with anypurchase order number. Examples of applications inwhich you might use the component are:

An application in which purchase orders arecreated manually by users, similar to the classicDynpro transactions ME21, ME22, ME23.

An application in which purchase requisitions arecreated by users, and after approval purchaseorders are created automatically by the system,similar to scenarios common in SAP SRM. Youcan review and modify the automatically createdpurchase orders and their items using the compo-nent developed in this article.

To call the component from other components or applications and refer to a certain purchase order,you have to implement the purchase order number asthe importing parameter to the component. The WebDynpro application provides this parameter through aURL parameter, which we will name PO_NUMBER.Well name the parameter that controls the mode inwhich the data is presented to the user (that is,

whether the user is able to modify the data) DETAIL_MODE. Considering these definitions, thecaller of the application needs to provide the purchaseorder number and the mode parameters. So in ourexample, the mode needs to be set to DISPLAY.

Note!

The prefixes sap- and sap-wd- are reservedfor SAP and should not be used in URLparameter names.

Before adding the purchase order specific function-ality, you need to complete steps 1 through 6 to createthe new component for the purchase order example.

1. Create component Z_WDC_SAPPJ_PO withwindow W_DEFAULT.

Figure 19 Web Dynpro application for displaying purchase order data



2. Create a view with the name V_DEFAULT.

3. Switch to the Window Editor and embed the viewV_DEFAULT.

4. Activate the component.

5. Create an application with nameZ_WDA_SAPPJ_PO, using componentZ_WDC_SAPPJ_PO, interface viewW_DEFAULT, and plug DEFAULT.

6. Save the application.

With the Z_WDC_SAPPJ_PO componentcreated, we can begin to add new functionality to it.

The context data for the purchase order header data and item data is accessed from the windowcontroller and from the view controller. For thatreason, it makes sense to keep the data globally avail-able in the component controller. We will create threecontext nodes in the component controller, and createcopies and mappings of these context nodes in thewindow controller and in the view controller. We willname the first node PO_HEADER and assign thedata type BAPIEKKOL. Note that the property cardi-nality of the context node is set to 1..1 because wewill only display a flat field structure. See Figure 20.

Not all fields of structure BAPIEKKOL are ofinterest to us. We will select a few important fieldsand add them as attributes of the context nodePO_HEADER: PO_NUMBER, CO_CODE,DOC_CAT, DOC_TYPE, STATUS, CREATED_ON,

CREATED_BY, VENDOR, and CURRENCY some of which are shown in Figure 21.

Next, we need to create the second context nodefor the item overview and item detailed data with thename PO_ITEMS and set it to type BAPIEKPO.From the BAPIEKPO structure, select the fieldsPO_ITEM, STATUS, SHORT_TEXT, MATERIAL,QUANTITY, UNIT, NET_PRICE, CUSTOMER,PRICE_UNIT, PLANT, MAT_GRP, NET_VALUE,and GROS_VALUE, and set them as attributes ofthe context node. Because the item data consists ofmultiple elements that are displayed in a table, weneed to set the property cardinality to the value 0..n.This means that during runtime the context nodemay contain zero or more elements.

In a third context node, well keep the informa-tion that is used to control the setting of propertiesof the view elements depending on the user mode.There will be just one attribute called READ_ONLY, which is set to X when the application isstarted with the URL parameter DETAIL_MODE set to DISPLAY. This causes all input fields on the screen to be inactive (or in other words, theycant be edited). Well name this context nodeUSER_MODE. Because the node contains anattribute to control only a view element property, we dont need a Digital Display Indicator Control(DDIC) type defined here. Set the property cardi-nality to 1..1, and set the attribute READ_ONLYto type WDY_BOOLEAN.

Now, switch to the view controller context, andcopy the component controller context nodes, andmap the view controller context to them. You can do this by simply dragging and dropping the nodesfrom the right pane, which shows the componentcontroller context, to the left panes root node withthe name CONTEXT. See Figure 22.

After mapping the view controller context nodes to the component controller context, wellproceed by following the same steps in the windowcontroller. Switch to the Window Editor, select theContext tab, copy the component controller contextinto the window controller, and then map thewindow controller context to the componentcontroller context.Figure 20 Setting the cardinality to 1..1



Note!

The modifications to a context node to whichother nodes are mapped are not automaticallycopied to the mapping nodes. You need to carryout an update for mapping each context nodemanually; otherwise, the modifications are notavailable in the mapping context node.

The first method, which is called when the appli-cation is started, is the event handler method of theinbound plug of the window, which is flagged asDEFAULT. In our example, the name of this methodis HANDLEDEFAULT(). In this method, the parame-ters, which are passed by the application, are read, and

the data of the given purchase order number isretained by calling the function module BAPI_PO_GETDETAIL. Then the context nodes are filled.The implementation of the event handler method isshown in Figure 23 on the next page.

To specify the parameters used in the URL, add the parameters PO_NUMBER and DETAIL_MODEto the parameter definition of method HANDLEDE-FAULT(). They will be defined as importingparameters of type STRING, as shown in Figure 24on the next page.

Next, well create the layout of the view, whichconsists of three areas that display the purchase order:header data, item overview, and item detail data.

These three areas are defined in the layout usingthe Group view element. Add these view elements to the layout, and then assign the following IDs:

Figure 22 Copy and map context nodes

Figure 21 Selecting and adding attributes to a context node

Drag and drop to copy andmap the component controllernode to the view controller



GRP_POHEADER, GRP_ITEM_OVERVIEW, andGRP_ITEM_DETAIL. The layout of your viewshould look like the one shown in Figure 25.

Next, well add the fields to display the purchaseorder header data. There are nine fields with theirlabels shown in the browser. We could add these view

METHOD handledefault.

DATA lv_po_number TYPE ebeln.

DATA ls_bapiekkol TYPE bapiekkol.

DATA lt_bapiekpo TYPE STANDARD TABLE OF bapiekpo.

DATA lr_node TYPE REF TO if_wd_context_node.

DATA ls_po_header TYPE if_w_default=>element_po_header.

DATA lt_po_items TYPE if_w_default=>elements_po_items.

DATA ls_po_item TYPE if_w_default=>element_po_items.

DATA ls_user_mode TYPE if_w_default=>element_user_mode.

FIELD-SYMBOLS TYPE bapiekpo.

*--- Read PO number and get PO detail data

lv_po_number = po_number.

CALL FUNCTION 'BAPI_PO_GETDETAIL'

EXPORTING

purchaseorder = lv_po_number

IMPORTING

po_header = ls_bapiekkol

TABLES

po_items = lt_bapiekpo.

*--- Fill PO header context node

lr_node = wd_context->get_child_node( 'PO_HEADER' ).

MOVE-CORRESPONDING ls_bapiekkol TO ls_po_header.

lr_node->bind_structure( new_item = ls_po_header ).

*--- Fill PO item context node

LOOP AT lt_bapiekpo ASSIGNING .

MOVE-CORRESPONDING TO ls_po_item.

APPEND ls_po_item TO lt_po_items.

ENDLOOP.

lr_node = wd_context->get_child_node( 'PO_ITEMS' ).

lr_node->bind_table( new_items = lt_po_items ).

*--- Set operational mode

lr_node = wd_context->get_child_node( 'USER_MODE' ).

IF detail_mode EQ 'DISPLAY'.

ls_user_mode-readonly = abap_true.

ELSEIF detail_mode EQ 'CREATE'.

ls_user_mode-readonly = abap_false.

ENDIF.

lr_node->bind_structure( new_item = ls_user_mode ).

ENDMETHOD.

Figure 23 Code for implementing the method HANDLEDEFAULT()



elements manually step by step; however, the WebDynpro framework provides a much easier way to dothis based on the Web Dynpro Code Wizard. Right-click on the group GRP_POHEADER, and then selectCreate Container Form from the context menu, asshown in Figure 26.

In the next screen, you:

1. Select which context node contains the fields to beused on the form

2. Set a default field type (cell editor) to be used forall fields

3. Overwrite the default field type for each contextattribute

4. Deselect the Bind column check box so the fielddoes not appear on the screen

5. Select the Bind column check box, and assign aproperty in the next column you can define towhich attribute the particular view element prop-erty is bound (for an InputField view element, theproperty value is used)

To display the purchase order data, well use inputfields only. Why this? When checking the data types ofthe context node attributes, we can see that all of themhave a length greater than one and represent a string, acharacter set, or a number. Other view elements thatare suitable for a form are check boxes, radio buttons,and so on. However, the context node doesnt containany attributes of type XFLAG or ABAP_BOOL(internal ABAP Boolean type). All of the nine attrib-utes of the context node will be displayed on thescreen. Thats why the property values of all of theInputField view elements are bound to the contextattributes (see Figure 27 on the next page).

After you confirm your input, the Web DynproCode Wizard displays the next screen and adds foreach attribute a Label view element and an InputFieldview element to the layout without any interactionwith the user. This is especially time-saving if youneed to create input forms with many fields. In ourcase, the wizard adds nine (one for each attribute)Label view elements and InputField view elements to

Figure 24 Importing parameters of the method HANDLEDEFAULT()

Figure 25 The layout containing three Group viewelements

Figure 26 Creating a form using the Web DynproCode Wizard



the layout of the view in seconds. Because the inputfields are bound to context attributes that have aDDIC type assigned, the label texts are also automati-cally pulled from the DDIC definition of the particulardata element. In case the text is not suitable, you canoverwrite these descriptions by manually editing theproperty text of the Label view element.

In the next step, well edit the second part of thelayout (i.e., the area in which the item overview table of the purchase order is displayed). This area iscontained in the Group view element GRP_ITEM_OVERVIEW. Our focus here is to add a Table viewelement and the columns of the table. Right-click onthe GRP_ITEM_OVERVIEW element, and from thelist of available view elements, select the Table viewelement. Assign an ID to the Table view element (e.g.,TBL_ITEM_OVERVIEW). As shown in Figure 19,the Item Overview has nine columns. Adding columnsto the table is also supported by the Web DynproCode Wizard. To start the wizard, select the ID of theTable view element, and then select Create Bindingfrom the context menu (see Figure 28).

The screen in which you can define the columns ofa table looks similar to the one for defining the formcontainer (Figure 27). We first have to select thecontext node that contains the attributes representingthe columns of the table. In our case, we select the

context node PO_ITEMS. In the next step, we caneither select a standard cell editor type that is used forall of the table columns in the Standard Cell Editorfield, or define the cell editor individually for eachcolumn in the table shown below the Standard CellEditor field. See Figure 29.

The Standard Cell Editor field is set to InputField;however, since we dont want to edit the values shownin the item overview, well use the TextView view

Figure 27 Creating a container form from context attributes

Figure 28 Calling the Web Dynpro Code Wizard toadd columns to a table



element as the cell editor. Only the data that offers theuser enough information regarding a particular itemwill be shown in the table. In case the user wants toget more detailed data of a purchase order item, theuser can select the item from the list and all availablefields are displayed in the item detailed area. In ourexample, the columns of the table will be created forthe attributes PO_ITEM, STATUS, SHORT_TEXT,MATERIAL, QUANTITY, UNIT, NET_PRICE, andCUSTOMER only, because we selected the check boxin the Bind column. Attributes such as PRICE_UNIT,PLANT, and MAT_GRP will not appear in the table,but they will be displayed in the item detailed area,configuration of which is described later.

The property of the TextView element, whichneeds to be bound to the context node attributes totransport their value, is text. Select this property in thelast column of the wizard popup. After confirming allof the entries were made, the Web Dynpro CodeWizard starts running and adds for each attributeselected in the Bind column a TableColumn viewelement in the table layout, as shown in Figure 30.

Until now, we have defined the output areas of thepurchase order header and the item overview table.What is left is the part considered for the item detaileddata. Looking at the screen displayed in Figure 19,you can see that the way the fields are arranged anddisplayed in the item detailed area looks similar to the

purchase order header. So defining the layout for theitem detailed data is done in a similar way comparedto the purchase order header. To start, right-click theGroup view element with the ID GRP_ITEM_DETAIL, and then select Create Container Form fromthe context menu. Follow the steps that we used tocreate the purchase order header data. When it comesto selecting the attributes that will represent the fieldson the screen, select all attributes of context nodePO_ITEMS. After you have created the containerform, save your work and activate the component.

Figure 29 Creating table columns from a context node

Figure 30 Columns added to the Table view element



You usually start a Web Dynpro application byselecting the application name in the ComponentEditor and pressing F8. However, in our example, weneed to add the URL parameter PO_NUMBER andDETAIL_MODE and their values to the URL gener-ated by the framework. Without these parameters, theframework will not be able to identify a purchaseorder. Add the parameters to the URL by copying theframework-generated URL from the applicationsProperty tab to the address field of your Web browser.Next, identify a valid purchase order in your SAPERP system, and add it as a value of the URL param-eter PO_NUMBER. Make sure the value of URL8parameter DETAIL_MODE is DISPLAY.

Consider that depending on which system youwork, the values for the domain name, the portnumber, and the client might be different. The resultedoutput of the application is shown in Figure 19.

ConclusionThis article introduced you to the fundamentals ofWeb Dynpro for ABAP programming. It hopefully hasincreased your curiosity to dig deeper into theconcepts and functionality to develop feature-richapplications that not only run in a Web environmentbut can also be integrated into SAPs NetWeaverBusiness Client.

Although the focus of this article is on the devel-opment and integration of just one component, I hope you realize that the strength of the Web Dynproframework lies in the ability to componentize yourapplication, i.e., to develop self-contained logicalunits components that can be reused instead of implementing one and the same functionalitiesmultiple times.

I have not covered the implementation of suchusages of components (which might become the

topic of a future article). However, you shouldconsider componentization in an early stage of yourdevelopment process and also use the SAP-deliveredcomponents to provide comprehensive functionality to your customers by enriching your application.Some examples of components that are part of theSAP NetWeaver 2004s release and its follow-upService Packages are:

SALV_WD_TABLE: This component providescommon list operations to tabular structures ofdata. It implements similar functionality that isoffered by the classic Dynpro ALV.

POWL_UI_COMP: This component providesfunctionality to create user-definable work lists.The user can define and optionally store queries in a similar way these tasks are done from classicDynpro selection screen variants.

WDR_OVS: In addition to the simple input helpsin which the search screen consists of fields forrestricting the search and the search result list only, the object value selector (OVS) componentWDR_OVS provides the option of implementingextended search functionalities. WDR_OVS buildson a uniform process and a uniform layout thatallow the developer to implement search helps forany values and objects while always retaining thesame user interaction.

WDR_SELECT_OPTIONS: The componentprovides different and more complex select optionsfor defining search criteria. These include, forinstance, the definition of areas and individualvalues to be included in the search and the valuesto be excluded from the search. The functions ofselect options were also converted from the classicDynpro programming into the WD4A framework.

When designing your Web Dynpro application, tryto incorporate such predefined components instead of implementing the relevant functions manually.Reuse of software components allows faster develop-ment cycles and reduces expenses. Web Dynpro forABAP supports these development processes using aconstantly growing library of predefined components.

8 The complete URL to call the application on the system used to developthe example for this article is http://ld1052.wdf.sap.corp:50017/sap/bc/webdynpro/sap/z_wda_sappj_po?sap-client=300&sap-language=EN&PO_NUMBER=4500000008&DETAIL_MODE=DISPLAY.

Answers at your fingertips.Extend your learning throughout the year with a license to SAP Professional Journal Online, where developers

and administrators are never more than an arm's length away from thousands of best practices and step-by-step

tutorials to implement, maintain, and extend SAP R/3 and SAP NetWeaver technology.

www.sappro.com

To learn about licenses for individuals, teams, and entire sites, visit www.sappro.com.

Documents

Wedynpro Abap