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  Don’t 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

2. where you can create Web Dynpro Component or Web Dynpro interface.0 Context Root Node Node Elements Step by step guide to work on Web Dynpro ABAP. 1. Enter transaction code SE80 (As shown in the above screenshot) to launch the Object Navigator.Ver 1. I will explain you the step by step procedure how to work on. _______________________________________________________________________ _ Page 6 of 51 . Log into SAP system. Taking an example of a Web Dynpro Component.

Enter Flight Connection Number-CONNID and Enter Flight date-FLDATE in the initial screen. Select the ‘Web Dynpro component / interface’ option from the dropdown list as shown here. Enter WD component name in ‘Z’ name space to create new one and press ‘ENTER’.0 The Expected behavior of the application is to be: Enter the Flight (Airline Code – CARRID).Ver 1. Click on ‘Display Flights’ Button to see the List of available flights for given conditions. _______________________________________________________________________ _ Page 7 of 51 . The list of available flights needs to be displayed on the WD table in the next screen. 3.

Note: When WD component is crated. _______________________________________________________________________ _ Page 8 of 51 .0 Presses “Yes” on popup to create new WD component. one view and window will get created default. Enter the WD component description and press ‘OK’ button.Ver 1.

0 It will prompt to specify package and select “Local Object” under local objects (temporary-> non transportable) button to store Now. _______________________________________________________________________ _ Page 9 of 51 .Ver 1. Activate the Created WD component to proceed with development. your new WD component has been created.

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

0 Views are embedded into windows and these actually displayed on the WD application screen when executed. _______________________________________________________________________ _ Page 11 of 51 .Ver 1.

Click on ‘SAVE’ ‘VIEW’ will contain following methods which can be controlled at view level. Click on OK’ button.Controller Clean-Up Method _______________________________________________________________________ _ Page 12 of 51 .0 It will open a new popup to maintain the View name and description.Method for Modifying the View before Rendering . WDDOMODIFYVIEW WDDOINIT WDDOBEFOREACTION WDDOAFTERACTION WDDOEXIT .Method for non-action specific operations before Navigation .Method for Validation of User Input .Ver 1.Controller Initialization Method .

Windows In the Window maintenance screen.0 A view has exactly one view context. If you right-click on window ZWD_EXAMPLE. _______________________________________________________________________ _ Page 13 of 51 . which contains the data required for the view. Note: View MAIN is already embedded in to the window. since it has assigned when WD component was created. Embed the V_FLIGHT_DETAILS View. you can choose ‘Embed View’ from the Context Menu.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. Every view created in the WD component will have only one inbound plug and multiple outbound plugs. you need to create exit and entry points for each view using outbound and inbound plugs.Ver 1. Inbound Plug is TARGET_PLUG_NAME _______________________________________________________________________ _ Page 15 of 51 . 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. Select the view ‘MAIN’ to define the inbound plugs as shown in the below screenshots. In contrast. an inbound plug can be controlled by several outbound plugs.

but in our case we are creating the outbound plugs when buttons are created.Ver 1. Note: Outbound plugs can also be created here. (Click here to see how outbound plugs has created) _______________________________________________________________________ _ Page 16 of 51 . Map the inbound plugs and outbound plugs to happen navigation between views as shown in the below screenshot.0 Select the view V_FLIGHT_DETAILS to define the inbound plugs as shown in the below screenshot.

.You can see them in the below screenshot.. Properties: Properties will contain details such as description.Etc. we will describe each and every tab displayed in the Web Dynpro component controller. created by.. Here.Ver 1. created on.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. _______________________________________________________________________ _ Page 17 of 51 .. 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.

Each context has a root node.0 Context: The data used in the component or in the view are stored in the context. This property of a node is known as its cardinality. underneath which the individual data fields (attributes) are stored in a tree structure.Ver 1. 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. button to _______________________________________________________________________ _ Page 19 of 51 . Click on ‘node’ Mention all the details in the popup  click on add the required elements to the current node.0 Follow below steps to create a context node in the current component.

Ver 1. we have selected only those. but since we are going to use only CARRID. Click ‘OK’ button. CONNID and FLDATE.0 Select the required elements whichever is used in the initial screen. _______________________________________________________________________ _ Page 20 of 51 . Note: You can select as many as number of fields.

Select the required fields whichever you wanted to show them on the FLIGHT_DETAILS table.Ver 1. _______________________________________________________________________ _ Page 21 of 51 .0 Repeat the same steps to create another node (FLIGHT_DETAILS) which will display flight details on the WD table.

For that. we have two nodes created for the current component controller. we will call it as context mapping. But. 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. to make use of these nodes at view level. we have to map them irrespective of the views created in the current WD component. _______________________________________________________________________ _ Page 22 of 51 .Ver 1.0 Now.

how does it displays when context mapping has been done to the current view. See the below screenshot to find. we wanted to have a mapping with context node ‘FLIGHT_INPUT’ since the view will be considered as an initial screen. 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.Ver 1. _______________________________________________________________________ _ Page 23 of 51 .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.

_______________________________________________________________________ _ Page 24 of 51 . select the second view V_FLIGHT_DETAILS where the flight details have been displayed.Ver 1. do the context mapping as required.0 Now.

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. we don’t have any events used Methods _______________________________________________________________________ _ Page 25 of 51 .0 Attributes The following screenshot have 3 attributes.Ver 1. Events Currently.

WDDOINIT is called automatically when a controller is initialized for the first time. 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. for example. which comes default when WD component is created successfully.Ver 1. send the reference of WD_CONTEXT (reference of IF_WD_CONTEXT_NODE) to the assistance class. This method can contain the following steps. Method WDDOINIT. _______________________________________________________________________ _ Page 26 of 51 .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.0 These methods are called as hook methods.

_______________________________________________________________________ _ Page 27 of 51 . which acts as initial screen for entering the flight details. Designing the Layout: Select the MAIN view here. the local controller interface also contains the methods WDDOBEFORENAVIGATION.Ver 1. Step1: Inserting element in to the layout. WDDOPOSTPROCESSING.0 Depending on the controller settings.

0 If you want to see the detailed documentation for the selected element type. It makes you to manage the inserted elements very easily.Ver 1. 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 . follow the below screen shot. Transparent Container UI element allows you to arrange its inserted UI elements through the specified layout.

_______________________________________________________________________ _ Page 29 of 51 .0 Click on OK’ button.Ver 1.

Ver 1.  Flow Layout  Grid Layout _______________________________________________________________________ _ Page 30 of 51 .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.

Ver 1. 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 .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.

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.

(As shown in this screenshot) _______________________________________________________________________ _ Page 33 of 51 .Ver 1. MatrixHeadData: To display the view element in next line.0 Layout Data have two different properties: Matrix Data: View element will align to be in the same line.

_______________________________________________________________________ _ Page 34 of 51 . it will open a popup to bind the node element as shown here.0 Click on the value property displayed to Bind the node element to store the given value in this input field. Upon clicking.Ver 1. Follow the same steps to bind the corresponding ‘node elements’ to the other ‘view elements’.

0 Create a button ‘Display Flights’.Ver 1. Upon clicking this button we will navigate to next screen where we can see the list of available flights. _______________________________________________________________________ _ Page 35 of 51 .

0 The UI element Button represents the pushbutton on the screen. _______________________________________________________________________ _ Page 36 of 51 . 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. Create an event handler to execute when button is pressed.Ver 1.

Ver 1.  Click ‘SAVE’  OTR text is created _______________________________________________________________________ _ Page 37 of 51 . Click Create button to create a OTR text. Use SOTR_EDIT transaction to create OTR text.0 ONACTIONDISP_FLIGHTS event handler has been created in the view MAIN.

Now.Ver 1. Activate the WD component _______________________________________________________________________ _ Page 38 of 51 .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).

0 Select the view V_FLIGHT_DETAILS to design the layout. _______________________________________________________________________ _ Page 39 of 51 . Select the table element that created  right click on it select ‘create binding’ property to create the table columns.Ver 1.

where the selected elements from the node can be displayed as table columns. _______________________________________________________________________ _ Page 40 of 51 .Ver 1. 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. Click OK button on the ‘Define context binding’ popup  now create binding to the table element.0 Click on ‘Data source’ property to bind the node.

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 .0 Now.Ver 1. the view will be displayed as shown in the below screenshot.

This class should inherit from the abstract class _______________________________________________________________________ _ Page 42 of 51 . you can create a uniquely assigned assistance class. Working with the Assistance Class For each Web Dynpro component.0 Click on this button  will open a popup to create an event for this action. Activate the WD component once again.Ver 1.

The assistance class of a component provides the following advantages: You can store coding there that is required within the component.0 CL_WD_COMPONENT_ASSISTANCE. Select WD component (double click)  Give an assistance class name in the place of input field. 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 assistance class is automatically instantiated when a component is called. Create 2 methods in the assistance class. but is not linked directly with the layout or with the function of a controller.Ver 1. GET_FLIGHT_DETAILS is to get the list of flight details and INITIALIZE is to initialize the assistance class _______________________________________________________________________ _ Page 43 of 51 . (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. The second important function of the assistance class is the management of dynamic texts. The instance is available to each controller of the component through the attribute WD_ASSIST. Now we can work with assistance class. 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. This could be. a call of the application layer or UI-based editing of the data. for example.

carrid TYPE s_carr_id. currency TYPE s_currcode. seatsocc TYPE s_seatsocc. TYPES: BEGIN OF ty_flight. fldate TYPE s_date. mo_context = io_context. price TYPE s_price. seatsmax TYPE s_seatsmax. _______________________________________________________________________ _ Page 44 of 51 . planetype TYPE s_planetye.Ver 1. Endmethod. Write the following code in method GET_FLIGHT_DETAILS (see below screenshot) METHOD get_flight_details. paymentsum TYPE s_sum. connid TYPE s_conn_id.0 Write the following code in method INITIALIZE with one importing parameter (see below screenshot) Method INITIALIZE.

if_wd_context_node.Ver 1. ***Raise an error message.0 END OF ty_flight. ***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. ENDIF. if there are no input given in the main scre en RETURN. if_wd_context_element. ***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( ). ELSE. TYPE ty_flight. "FLIGHT_DET TYPE REF TO if_wd_context_element. CALL METHOD lo_el_flight_input->get_static_attributes IMPORTING static_attributes = ls_flight_input. IF ls_flight_input IS NOT INITIAL. ENDMETHOD. ***get the reference of node 'FLIGHT_DETAILS' lo_nd_flight_det = mo_context->get_child_node( name = 'FLIGHT_DETAILS' ). 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. 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. _______________________________________________________________________ _ Page 45 of 51 . TYPE STANDARD TABLE OF ty_flight.

Write code as shown below at view ‘MAIN’ (see below screenshot) At component controller level. 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.0 Click on the ‘pattern’ button to read the method from interface IF_WD_CONTEXT_ELEMENT.Ver 1. 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. _______________________________________________________________________ _ Page 46 of 51 . there is a call given to the assistance class.

Ver 1. it will return all the available flights for the given filter criteria.0 When this method is executed. 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 .

Now.0 If you don’t see the below screen. Execute the WD application  Do as shown in the screenshot to test it.Ver 1. probably you can refresh or launch the WD component once again. _______________________________________________________________________ _ Page 49 of 51 .

where you will have to enter the filter criteria  click on ‘Display Flights’ button. _______________________________________________________________________ _ Page 50 of 51 .0 You can see the initial screen.Ver 1.

_______________________________________________________________________ _ Page 51 of 51 .0 Here. you can see the list of available flights for the given filter criteria.Ver 1.

Sign up to vote on this title
UsefulNot useful