WebDynpro Tutorials in PDFs

Tutorial 1 - Create a Simple Web Dynpro Application

This step-by-step tutorial illustrates creating a  simple Web Dynpro component, which  consists of one view. Furthermore, it  demonstrates a Web Dynpro application for  this simple Web Dynpro component, which  can  then be run in the browser. 

Tutorial 2 - BAPI

This tutorial demonstrates the usage of BAPIs  and how to implement a view with input fields  and a result table using Web Dynpro for ABAP.

Tutorial 3 - Navigation

This tutorial demonstrates how easy it is to navigate between different views of the same Web Dynpro application.

Tutorial 4 - Display bookings for selected filghts

In this tutorial, the BAPINAV component introduced in Tutorial 3 is further enhanced to display a list of bookings for a selected flight. The context that contains the flight information is enhanced with a subnode for the corresponding bookings. It also shows how the booking information is retrieved in a supply function and the context node is bound to a new table UI element in the Main View.

Tutorial 5 - Component and Application Configuration

The fifth tutorial in the series describes component usage, personalization and configuration and offers an alternative solution to that presented in the Tutorial 3.

Tutorial 6 - Component Usage

This tutorial demonstrates how to develop an example for component usage in Web Dynpro ABAP and further build on tutorial 4 to display customer data of a particular booking using his customer_id as a foreign key.

Tutorial 7 - How to Integrate WDA in Portal and Capture Logon User Name

This Article helps how to create iViews for Web Dynpro ABAP Application in SAP Netweaver Portal and helps how to capture portal Logon User Name in Our Web Dynpro Application.

Tutorial 8 - Supply Function Method Usage in Web Dynpro ABAP Application

In this tutorial, learn how to use Supply Function method in Web Dynpro Application with one simple application. Basically, Supply Function is used to fill context nodes at runtime,which can be defined by assigning a method name to the node property Supply Function in the controller at design time.

Tutorial 9 - Mandatory Field Check in Web Dynpro- ABAP

This tutorial demonstrates an efficient way to Apply Mandatory/Obligatory field Check on Input fields in a Webdynpro ABAP View.

Tutorial 10 - Creating ALV in 7 Steps

This tutorial is written to support those ABAP consultants who want to develop their first ALV in Web Dynpro ABAP.

ref:http://webdynpro-tutorials.blogspot.com/p/web-dynpro-abap-tutorials-for-beginners.html

Create Search Help in ABAP for Web Dynpro Component

This ABAP tutorial shows how to create search help and use it in Web Dynpro component for a context node attribute. First developers create Search Help in ABAP Data Dictionary using SE80 then assign Search Help to context node attribute using Input Help Mode and Dictionary Search Help properties in SAP Web Dynpro component.

This ABAP tutorial is formed of two sub-headings. First part in this tutorial shows how ABAP developers can create a search help in ABAP DATA Dictionary. The second section of the tutorial is dealing with how Web Dynpro developers can use this search help for a context node attribute.

Create Search Help in Data Dictionary

Call transaction SE80 Object Navigator. In Transport Organizer tab select Package from drop down list. Find your target package where you want to create your search help data dictionary object.

Right click on Dictionary Objects Context menu Create > Search Help

Type Search Help name. Leave Elementary search help as selected option.

Search Help create screen to define a new one

Type a short description. On Definition tab, type the master lookup table name at Selection method input textbox. Click on the first empty parameter line Search help parameter cell. Press F4 for possible entries or click on the F4 icon displayed when you click on the cell.

Double click on the field name you want to export to input text which is dislaying this search help. Mark the search help parameter as export.

Add all other desired fields but mark this time as import parameters

Enter the position number you want to see the field values in hit list using the LPos entery field. If you try to activate Search Help without hit list, you will get an error preventing the successfull activation of Search Help data dictionary object. Position in the hit list of an elementary search help Position of the parameter in the hit list.

Save and activate

Use Search Help in Web Dynpro Component for a Context Field

If you are going to use this Search Help on a Web Dynpro component, open component controller. Go to Context tab. Drill down the context node until you find the target field. Open properties of the attribute. There is a dropdown box at Input Help Mode property. You will see Dictionary Search Help. Change it from Automatic which is default to Dictionary Search Help.

Then enter the name of the Search Help data dictionary object which we have created in previous steps into the "Dictionary Search Help" property.

Save and activate your web dynpro component.

Here is the Search Help in action on a Web Dynpro web page.

Debugging Web Dynpro ABAP Applications

The ABAP runtime environment contains various tools that you can use for analysis purposes, such as for debugging source code. All source code written for Web Dynpro applications in ABAP can normally be tested using the debugger.

To allow it to test other Web Dynpro-specific program entities too, the debugger has been equipped with a special enhancement. In the phase model in the active application, you can typically see the following information at various points in time:

• The structure of the content of the current controller,
• The properties of the UI elements in the layout of the current view
• The currently instantiated component usages

Starting the Debugger

The functions to debug Web Dynpro units are embedded in the New Debugger. Therefore you must have selected the new Debugger in your workbench settings.

Selecting the New Debugger

1. In the menu, choose Utilities -> Settings... (return).
2. Choose the parent tab page ABAP Editor.
   The settings for ABAP Editor open with the content of the child tab page Editor.
3. Under Editor, select the option Front-End Editor (new).
4. Switch to the Debugging tab page.
5. Under ABAP Debugger, select the option New Debugger.
6. Save your entries.

Starting the Debugging Process

1. To run an application in debugging mode, you first need to set an external breakpoint in display mode in one of the methods in the component:
   (Setting an external breakpoint)
   Note

   Note that this is an external breakpoint.

   End of the note.
   The method in which you set the breakpoint depends on the purpose of the test run. To debug a view, for example, it is best to set the breakpoint in method WDDOMODIFYVIEW. Provided that the context of the view controller is not filled using a supply method, the view is fully instantiated in the phase model at this point in time.
2. Now start a test run of the application from ABAP Workbench as usual.

Selecting the Web Dynpro Tool in the New Debugger

When you start the application, another session opens automatically for the debugger. If you have not yet saved any personal settings with regard to the layout of the debugger, the Editor tool will now appear on the left, with the Display Variables tool on the right.

1. Select one of the three desktops in order to reconfigure it for debugging the Web Dynpro application (refer to Designing Work Areas).
2. The right-hand edge of the debugger window has a bar of function symbols. Choose the Replace Tools symbol:
   (Replace tools)
3. In the New Tool window, open the lowest node (Special Tools) and choose Web Dynpro.
4. Save your entries.

On the right of the debugger desktop, you will see that the previous tool has now been replaced by the Web Dynpro debugger. You can save this setting for future debugging activities. To do this, choose Save Layout in the debugger’s general toolbar:

(Save layout (Ctrl+Shift+F3))

Ref: http://help.sap.com/saphelp_nw70ehp1/helpdata/en/48/74d50bd1431b5ae10000000a42189c/content.htm