Template

Ver 1.0

Basic Web Dynpro ABAP

Step by step guideObjective of this document:

To give an understanding and knowledge on advanced technology to everyone who wanted to have knowledge in the area of Basic Web Dynpro ABAP

Agenda

What is Web Dynpro for ABAP?Objectives of Web Dynpro

Web Dynpro Component Architecture

Web Dynpro Component Development

Web Dynpro is the SAP Netweaver programming model for user interfaces (UIs).

The Web Dynpro programming model is based on the Model View Controller paradigm, and has the following features that build on the classic dynpro model:

Clear separation of business logic and display logic

Uniform Meta model for all types of user interfaces

Execution on a number of client platforms

Extensive platform independence of interfaces

What is Web Dynpro for ABAP?Web Dynpro for ABAP (WD4A, WDA) is the SAP standard UI technology for developing Web applications in the ABAP environment. It consists of a runtime environment and a graphical development environment with special Web Dynpro tools that are integrated in the ABAP Workbench (SE80).

Web Dynpro offers the following advantages for application developers:

The use of declarative and graphical tools significantly reduces the implementation effort

Web Dynpro supports a structured design process

Strict separation between layout and business data

Reuse and better maintainability by using components

The layout and navigation is easily changed using the Web Dynpro tools

Stateful applications are supported that is, if the page is changed and the required data remains intact so that you can access it at any time throughout the entire application context.

Objectives of Web DynproModel-based UI development

Enforce clear separation between UI logic and business logic

Little coding, lots of design Declarative UI developmentCentral implementation of user interface standards

Accessibility support

Adobe Forms integration

Centrally provided UI elements

Internationalization supportSAP Web Dynpro uses principles of MVC paradigm

Controller: handle the user input and steers the application

Views: define the layout

Model: holds and provides the business logicSee the MVC Architecture diagram:Model View Controller (MVC)

Web Dynpro Component ArchitectureA Typical Web Dynpro Component diagram is

Web Dynpro Component contains

Windows

Views

UI elements

Layout

Controllers

Context Data

Event Methods

Attributes

Component Interface

Interface Controller Interface ViewView

Is embedded into window

Defines the visible layout via predefined UI elements

Dont contain any HTML or scriptingUI elements

Are the smallest UI building blocks (button, input field)

Available as provided UI element libraries

Have properties which steer their behavior

Can be nested with Container UI elements

Are positioned in hierarchical structureController

Contains the logic of the UI layer

Implements event handlers

Implements action handlers

Each view has its own view controllerContext Hierarchy of nodes and attributes

Nodes and attributes can be bound to properties of UI elements

Framework cares about updating the valuesEach node can be a collection of elements.

Min and max number of elements in a node is steered byCardinality(0...1) The node contains only one element instance, which must not be instantiated

(1...1) The node contains only one element instance, which is instantiated automatically

(0...n) The node can contain multiple element instances, of which none have to be instantiated

(1...n) The node can contain multiple element instances, of which at least one must always be instantiated (and is instantiated automatically)Component Controller Controller which is the backbone of the component

Has its own Context

Contains the logic for interaction with the model (ABAP class, function modules, BAPIs, Web Services)

Step by step guide to work on Web Dynpro ABAP.

1.Log into SAP system.

2.Enter transaction code SE80 (As shown in the above screenshot) to launch the Object Navigator, where you can create Web Dynpro Component or Web Dynpro interface.

Taking an example of a Web Dynpro Component, I will explain you the step by step procedure how to work on.

The Expected behavior of the application is to be:

Enter the Flight (Airline Code CARRID).

Enter Flight Connection Number-CONNID and

Enter Flight date-FLDATE in the initial screen.

Click on Display Flights Button to see the List of available flights for given conditions.

The list of available flights needs to be displayed on the WD table in the next screen.

3.Enter WD component name in Z name space to create new one and press ENTER.

Presses Yes on popup to create new WD component.

Enter the WD component description and press OK button.

Note: When WD component is crated, one view and window will get created default.It will prompt to specify package and select Local Object button to store under local objects (temporary-> non transportable)

Now, your new WD component has been created.

Activate the Created WD component to proceed with development.

How to create a view: Follow the screenshots shown below to create a view.

Views are embedded into windows and these actually displayed on the WD application screen when executed.

It will open a new popup to maintain the View name and description. Click on OK button. Click on SAVE

VIEW will contain following methods which can be controlled at view level.

WDDOMODIFYVIEW - Method for Modifying the View before Rendering

WDDOINIT

- Controller Initialization Method

WDDOBEFOREACTION- Method for Validation of User InputWDDOAFTERACTION- Method for non-action specific operations before

NavigationWDDOEXIT

- Controller Clean-Up Method

A view has exactly one view context, which contains the data required for the view.WindowsIn the Window maintenance screen, If you right-click on window ZWD_EXAMPLE, you can choose Embed View from the Context Menu. Embed the V_FLIGHT_DETAILS View.

Note: View MAIN is already embedded in to the window, since it has assigned when WD component was created.

Select Embed view ( it will open a popup to assign the view to be embedded (Click on F4 to display the number of views that created ( select the view V_FLIGHT_DETAILS.

Click on OK ( then it will display the screen as shown below.

Navigation between ViewsTo define the navigation between two views, you need to create exit and entry points for each view using outbound and inbound plugs.

It means you must create an inbound plug for one view and an outbound plug for the other view

Inbound plugs: define the possible starting points of a viewOutbound plugs: can be used to call a subsequent view.

Every view created in the WD component will have only one inbound plug and multiple outbound plugs.

In contrast, an inbound plug can be controlled by several outbound plugs.Select the view MAIN to define the inbound plugs as shown in the below screenshots.

Inbound Plug is TARGET_PLUG_NAME

Select the view V_FLIGHT_DETAILS to define the inbound plugs as shown in the below screenshot.

Note: Outbound plugs can also be created here, but in our case we are creating the outbound plugs when buttons are created.Map the inbound plugs and outbound plugs to happen navigation between views as shown in the below screenshot. (Click here to see how outbound plugs has created)Select the inbound plug (IN_FLIGHT_DET) of view V_FLIGHT_DETAILS and drag drop at the outbound plug (DISP_FLIGHTS) of view MAIN to make navigation from MAIN view to V_FLIGHT_DETAILS upon clicking Display Flights button.

Select the inbound plug (IN_MAIN) of view MAIN and drag drop at the outbound plug (BACK_TO_INIT) of view V_FLIGHT_DETAILS to make navigation back to MAIN view from V_FLIGHT_DETAILS upon clicking BACK button.

Here, we will describe each and every tab displayed in the Web Dynpro component controller.

Properties:

Properties will contain details such as description, created by, created on...Etc...You can see them in the below screenshot.

Context:

The data used in the component or in the view are stored in the context.

Each context has a root node, underneath which the individual data fields (attributes) are stored in a tree structure.

This property of a node is known as its cardinality.

Context Programming

Global Interface methods that will be used to work with the contexts IF_WD_CONTEXT the context itself

IF_WD_CONTEXT_NODE a context node

IF_WD_CONTEXT_ELEMENT an element of a node

IF_WD_CONTEXT_NODE_INFO context node infoFollow below steps to create a context node in the current component.

Click on node

Mention all the details in the popup ( click on button to add the required elements to the current node.

Select the required elements whichever is used in the initial screen.

Note: You can select as many as number of fields, but since we are going to use only CARRID, CONNID and FLDATE, we have selected only those.Click OK button.

Repeat the same steps to create another node (FLIGHT_DETAILS) which will display flight details on the WD table.

Select the required fields whichever you wanted to show them on the FLIGHT_DETAILS table.

Now, we have two nodes created for the current component controller.

The nodes whichever has been created at the component controller level can be used only at component controller level and the data stored in these nodes can be accessed only at component controller level.

But, to make use of these nodes at view level, we have to map them irrespective of the views created in the current WD component.

For that, we will call it as context mapping.

Context Mapping

Nodes of Component Controller context can be mapped to nodes of other contexts(views)WD Framework cares about data transport (references)Select a view MAIN ( select Context tab to do context mapping.

See the below screenshot to find, how does it displays when context mapping has been done to the current view.

Now, select the second view V_FLIGHT_DETAILS where the flight details have been displayed, do the context mapping as required.

Attributes

The following screenshot have 3 attributes.

WD_CONTEXT (Reference to Local Controller Context (IF_WD_CONTEXT_NODE)

WD_THIS( Self-Reference to Local Controller Interface

WD_ASSIST( Reference to the Instance of Assistance Class

We also can create our own attributes here depends on the requirement.

Events

Currently, we dont have any events used

Methods

These methods are called as hook methods, which comes default when WD component is created successfully.

WDDOINIT is called automatically when a controller is initialized for the first time.

This method can contain the following steps, for example:

Creating instances of help classes

Initializing controller attributes

Triggering authorization checks (recommended for help classes)

Setting initial values of the controller context

Instantiation of used component

As we know this method is used for initializing, send the reference of WD_CONTEXT (reference of IF_WD_CONTEXT_NODE) to the assistance class.

MethodWDDOINIT.*------------------------InitializeAssistanceClass--------------

wd_assist->initialize (io_context=wd_context).

endmethod.WDDOEXIT is called by the runtime when exiting the controller and can be used for releasing locks, for example.

Depending on the controller settings, the local controller interface also contains the methods WDDOBEFORENAVIGATION, WDDOPOSTPROCESSING.Designing the Layout:

Select the MAIN view here, which acts as initial screen for entering the flight details.

Step1: Inserting element in to the layout.

If you want to see the detailed documentation for the selected element type, follow the below screen shot.

Transparent Container UI element allows you to arrange its inserted UI elements through the specified layout. It makes you to manage the inserted elements very easily.

Repeat the same steps to design the MAIN view as shown here. (Step1 to insert an element in to the view)

Click on OK button.

Repeat the same steps to design the view layout to be displayed as shown in the below screenshot.

Alignment of fields displayed in the view

Select ROOTUIELEMENTCONTAINER to maintain the layout properties.

Here, we have four different layouts.

Flow Layout

Grid Layout

Matrix Layout

Row Layout

A standard Web Dynpro layout (for Matrix Layout) is used to arrange the UI elements on the Web Dynpro view.

Select the transparent container to set the layout property and recommended to use Matrix layout across all the view elements.

Follow the same steps to bind the corresponding node elements to the other view elements.

Create a button Display Flights. Upon clicking this button we will navigate to next screen where we can see the list of available flights.

The UI element Button represents the pushbutton on the screen. Create an event handler to execute when button is pressed.Click on ONACTION event ( it will open a new popup ( maintain the action name and outbound plug as shown here in the below screenshot.

Click OK button ( it will ask you to create an outbound plug ( click YES.

ONACTIONDISP_FLIGHTS event handler has been created in the view MAIN.

Use SOTR_EDIT transaction to create OTR text.

Click Create button to create a OTR text. ( Click SAVE ( OTR text is created

Copy the Alias name from OTR text ( Specify the text property for view element as $OTR:$TMP/DISP_FLIGHTS as shown in the below screenshot (Red colored circle).

Now, Activate the WD componentSelect the view V_FLIGHT_DETAILS to design the layout.

Select the table element that created ( right click on it (select create binding property to create the table columns.

Click OK button on the Define context binding popup ( now create binding to the table element.

It displays an popup as shown in the below screenshot( do as shown in the screenshot( check the checkboxes to make sure the number of columns displayed in the table.

Now, the view will be displayed as shown in the below screenshot.

Do the same to create a BACK button in this view (follow the same how created Display Flights button created in the MAIN view)

Activate the WD component once again.

Working with the Assistance Class

For each Web Dynpro component, you can create a uniquely assigned assistance class. This class should inherit from the abstract class CL_WD_COMPONENT_ASSISTANCE. The assistance class of a component provides the following advantages:

You can store coding there that is required within the component, but is not linked directly with the layout or with the function of a controller. This could be, for example, a call of the application layer or UI-based editing of the data.

Method calls of the assistance class are much better from a performance point of view than calls of methods of a Web Dynpro controller.

The second important function of the assistance class is the management of dynamic texts. Texts that are combined at runtime only and/or contain variables can be stored in the text pool of the assistance class as text symbols.

The assistance class is automatically instantiated when a component is called. The instance is available to each controller of the component through the attribute WD_ASSIST.

Select WD component (double click) ( Give an assistance class name in the place of input field. (Red Color circle from below screenshot)

Press ENTER button ( it will ask you to create an assistance class for this component( click YES ( Save as local object ( save the WD component and activate. Now we can work with assistance class.

Create 2 methods in the assistance class.

GET_FLIGHT_DETAILS is to get the list of flight details and

INITIALIZE is to initialize the assistance class

Write the following code in method INITIALIZE with one importing parameter (see below screenshot)

MethodINITIALIZE.mo_context=io_context.Endmethod.

Write the following code in method GET_FLIGHT_DETAILS (see below screenshot)METHODget_flight_details.

TYPES:BEGINOFty_flight,carridTYPEs_carr_id,connidTYPEs_conn_id,fldateTYPEs_date,priceTYPEs_price,currencyTYPEs_currcode,planetypeTYPEs_planetye,seatsmaxTYPEs_seatsmax,seatsoccTYPEs_seatsocc,paymentsumTYPEs_sum,ENDOFty_flight.DATA:lo_nd_flight_inputTYPEREFTOif_wd_context_node,lo_el_flight_inputTYPEREFTOif_wd_context_element,lo_nd_flight_detTYPEREFTOif_wd_context_node,"FLIGHT_DETnodereferencelo_el_flight_detTYPEREFTOif_wd_context_element,ls_flight_inputTYPEty_flight,lt_flight_detTYPESTANDARDTABLEOFty_flight.

***getthereferenceofnode'FLIGHT_INPUT'lo_nd_flight_input=mo_context->get_child_node(name='FLIGHT_INPUT').lo_el_flight_input=lo_nd_flight_input->get_element().CALLMETHODlo_el_flight_input->get_static_attributesIMPORTINGstatic_attributes=ls_flight_input.

IFls_flight_inputISNOTINITIAL.

SELECTcarridconnidfldatepricecurrencyplanetypeseatsmaxseatsoccpaymentsumFROMsflightINTOTABLElt_flight_detWHEREcarrid=ls_flight_input-carridORconnid=ls_flight_input-connidORfldate=ls_flight_input-fldate.

ELSE.***Raiseanerrormessage,iftherearenoinputgiveninthemainscreenRETURN.ENDIF.***getthereferenceofnode'FLIGHT_DETAILS'lo_nd_flight_det=mo_context->get_child_node(name='FLIGHT_DETAILS').***Bindtheinternaltabletothenode'FLIGHT_DETAILS'todisplayinthenextscreen***whichhaslistofflightsavailablefor the given conditions CALLMETHODlo_nd_flight_det->bind_tableEXPORTINGnew_items=lt_flight_det.

ENDMETHOD.

Click on the pattern button to read the method from interface IF_WD_CONTEXT_ELEMENT.

Upon clicking the Display Flights button we have to get the list of flights available for the given filter criteria ( call the method GET_FLIGHT_DETAILS.

Since method can only be called (Reference of Assistance class (wd_assist) is not available at view level) from component controller method create a method at component controller level and then this method will be executed and then we can see the list of available flights in the next screen.Write code as shown below at view MAIN (see below screenshot)

At component controller level, there is a call given to the assistance class.

Create an Application to execute and see the outputSelect the WD component (rights click on it ( create( WD application

Click OK ( Save it as local object ( we see below screen ( activate

If you dont see the below screen, probably you can refresh or launch the WD component once again.

Now, Execute the WD application ( Do as shown in the screenshot to test it.

You can see the initial screen, where you will have to enter the filter criteria ( click on Display Flights button.

Here, you can see the list of available flights for the given filter criteria.

Node Elements

Context Root Node

Select the Web Dynpro component / interface option from the dropdown list as shown here.

Select the context node from here (right side) which you wanted to map with current view( drag and drop to the view level (left side) context.

Here, we wanted to have a mapping with context node FLIGHT_INPUT since the view will be considered as an initial screen.

Recommended to use Matrix Layout

Layout Data have two different properties:

Matrix Data: View element will align to be in the same line.

MatrixHeadData: To display the view element in next line.

(As shown in this screenshot)

Click on the value property displayed to

Bind the node element to store the given value in this input field. Upon clicking, it will open a popup to bind the node element as shown here.

Click on Data source property to bind the node, where the selected elements from the node can be displayed as table columns.

Click on this button ( will open a popup to create an event for this action.

When this method is executed, it will return all the available flights for the given filter criteria.

To display the proper label beside the input field, assign the proper input field name to label for property

________________________________________________________________________

Page 48 of 48