Basic Web Dynpro ABAP

Step by step guide

Objective 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

Ver 1.0

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.

_______________________________________________________________________ _
Page 2 of 51

Ver 1.0

Objectives of Web Dynpro Model-based UI development

Enforce clear separation between UI logic and business logic Little coding, lots of design Declarative UI development Accessibility support Adobe Forms integration Centrally provided UI elements Internationalization support

Central implementation of user interface standards

SAP 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 logic See the MVC Architecture diagram: Model View Controller (MVC)

_______________________________________________________________________ _
Page 3 of 51

Ver 1.0

Web Dynpro Component Architecture

A Typical Web Dynpro Component diagram is

Web Dynpro Component contains Windows Views UI elements Layout Controllers Context Data Event Methods Attributes Component Interface _______________________________________________________________________ _
Page 4 of 51

Ver 1.0

Interface Controller Interface View

View Is embedded into window Defines the visible layout via predefined UI elements Dont contain any HTML or scripting UI 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 structure

Controller Contains the logic of the UI layer Implements event handlers Implements action handlers Each view has its own view controller Context Hierarchy of nodes and attributes Nodes and attributes can be bound to properties of UI elements Framework cares about updating the values Each node can be a collection of elements. Min and max number of elements in a node is steered by Cardinality (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)

_______________________________________________________________________ _
Page 5 of 51

Ver 1.0

Context Root Node Node Elements

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. _______________________________________________________________________ _
Page 6 of 51

Ver 1.0

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.

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

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

_______________________________________________________________________ _
Page 7 of 51

Ver 1.0

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. _______________________________________________________________________ _
Page 8 of 51

Ver 1.0

It will prompt to specify package and select Local Object under local objects (temporary-> non transportable)

button to store

Now, your new WD component has been created. Activate the Created WD component to proceed with development.

_______________________________________________________________________ _
Page 9 of 51

Ver 1.0

How to create a view: Follow the screenshots shown below to create a view. _______________________________________________________________________ _
Page 10 of 51

Ver 1.0

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

_______________________________________________________________________ _
Page 11 of 51

Ver 1.0

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 WDDOINIT WDDOBEFOREACTION WDDOAFTERACTION WDDOEXIT

- Method for Modifying the View before Rendering - Controller Initialization Method - Method for Validation of User Input - Method for non-action specific operations before Navigation - Controller Clean-Up Method

_______________________________________________________________________ _
Page 12 of 51

Ver 1.0

A view has exactly one view context, which contains the data required for the view. Windows In 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.

_______________________________________________________________________ _
Page 13 of 51

Ver 1.0

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.

_______________________________________________________________________ _
Page 14 of 51

Ver 1.0

Navigation between Views

To 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 view Outbound 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

_______________________________________________________________________ _
Page 15 of 51

Ver 1.0

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) _______________________________________________________________________ _
Page 16 of 51

Ver 1.0

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.

_______________________________________________________________________ _
Page 17 of 51

Ver 1.0

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 info

_______________________________________________________________________ _
Page 18 of 51

Ver 1.0

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

Click on node

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

button to

_______________________________________________________________________ _
Page 19 of 51

Ver 1.0

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.

_______________________________________________________________________ _
Page 20 of 51

Ver 1.0

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.

_______________________________________________________________________ _
Page 21 of 51

Ver 1.0

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. _______________________________________________________________________ _
Page 22 of 51

Ver 1.0

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.

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.

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

_______________________________________________________________________ _
Page 23 of 51

Ver 1.0

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

_______________________________________________________________________ _
Page 24 of 51

Ver 1.0

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

_______________________________________________________________________ _
Page 25 of 51

Ver 1.0

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.
Method WDDOINIT. * ------------------------ Initialize Assistance Class -------------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.

_______________________________________________________________________ _
Page 26 of 51

Ver 1.0

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.

_______________________________________________________________________ _
Page 27 of 51

Ver 1.0

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) _______________________________________________________________________ _
Page 28 of 51

Ver 1.0

Click on OK

button.

_______________________________________________________________________ _
Page 29 of 51

Ver 1.0

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 _______________________________________________________________________ _
Page 30 of 51

Ver 1.0

Matrix Layout Row Layout

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

Recommended to use Matrix Layout

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

_______________________________________________________________________ _
Page 31 of 51

Ver 1.0

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

_______________________________________________________________________ _
Page 32 of 51

Ver 1.0

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)

_______________________________________________________________________ _
Page 33 of 51

Ver 1.0

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.

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

_______________________________________________________________________ _
Page 34 of 51

Ver 1.0

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

_______________________________________________________________________ _
Page 35 of 51

Ver 1.0

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. _______________________________________________________________________ _
Page 36 of 51

Ver 1.0

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

_______________________________________________________________________ _
Page 37 of 51

Ver 1.0

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 component

_______________________________________________________________________ _
Page 38 of 51

Ver 1.0

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

_______________________________________________________________________ _
Page 39 of 51

Ver 1.0

Click on Data source property to bind the node, where the selected elements from the node can be displayed as 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.

_______________________________________________________________________ _
Page 40 of 51

Ver 1.0

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)

_______________________________________________________________________ _
Page 41 of 51

Ver 1.0

Click on this button will open a popup to create an event for this action. 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

_______________________________________________________________________ _
Page 42 of 51

Ver 1.0

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

_______________________________________________________________________ _
Page 43 of 51

Ver 1.0

Write the following code in method

INITIALIZE with one importing parameter

(see below screenshot)

Method INITIALIZE. mo_context = io_context. Endmethod.

Write the following code in method

GET_FLIGHT_DETAILS (see below

screenshot)

METHOD get_flight_details. TYPES: BEGIN OF ty_flight, carrid TYPE s_carr_id, connid TYPE s_conn_id, fldate TYPE s_date, price TYPE s_price, currency TYPE s_currcode, planetype TYPE s_planetye, seatsmax TYPE s_seatsmax, seatsocc TYPE s_seatsocc, paymentsum TYPE s_sum,

_______________________________________________________________________ _
Page 44 of 51

Ver 1.0

END OF ty_flight. DATA: lo_nd_flight_input lo_el_flight_input lo_nd_flight_det node reference lo_el_flight_det ls_flight_input lt_flight_det

TYPE REF TO TYPE REF TO TYPE REF TO

if_wd_context_node, if_wd_context_element, if_wd_context_node, "FLIGHT_DET

TYPE REF TO if_wd_context_element, TYPE ty_flight, TYPE STANDARD TABLE OF ty_flight.

***get the reference of node 'FLIGHT_INPUT' lo_nd_flight_input = mo_context->get_child_node( name = 'FLIGHT_INPUT' ). lo_el_flight_input = lo_nd_flight_input->get_element( ). CALL METHOD lo_el_flight_input->get_static_attributes IMPORTING static_attributes = ls_flight_input. IF ls_flight_input IS NOT INITIAL. SELECT carrid connid fldate price currency planetype seatsmax seatsocc paymentsum FROM sflight INTO TABLE lt_flight_det WHERE carrid = ls_flight_input-carrid OR connid = ls_flight_input-connid OR fldate = ls_flight_input-fldate. ELSE. ***Raise an error message, if there are no input given in the main scre en RETURN. ENDIF. ***get the reference of node 'FLIGHT_DETAILS' lo_nd_flight_det = mo_context->get_child_node( name = 'FLIGHT_DETAILS' ). ***Bind the internal table to the node 'FLIGHT_DETAILS' to display in t he next screen ***which has list of flights available for the given conditions CALL METHOD lo_nd_flight_det->bind_table EXPORTING new_items = lt_flight_det. ENDMETHOD.

_______________________________________________________________________ _
Page 45 of 51

Ver 1.0

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.

_______________________________________________________________________ _
Page 46 of 51

Ver 1.0

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

Create an Application to execute and see the output

Select the WD component rights click on it create WD application

_______________________________________________________________________ _
Page 47 of 51

Ver 1.0

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

_______________________________________________________________________ _
Page 48 of 51

Ver 1.0

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.

_______________________________________________________________________ _
Page 49 of 51

Ver 1.0

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

_______________________________________________________________________ _
Page 50 of 51

Ver 1.0

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

_______________________________________________________________________ _
Page 51 of 51