You are on page 1of 10

Below are the steps for creating a simple ABAP WebDynpro which displays the message 'HelloWorld' to the

user. Step 1 Execute transaction SE80 Step 2 Create Web Dynpro component Select Web Dynpro component/application from drop down and create new Web Dynpro component. Give the window a name of your choice e.g. MAIN_WINDOW. Also depending on your version of SAP you may also have the option to enter the default view as well. Give the view a name of your choice, i will use 'VIEW1' for this example. This view will then be automatically embeded into the window. If you eneter a view here you can miss out steps 3 and 6.

Step 3 Create View This step is not required if you entered the view name during the creation of your ABAP web dynpro(step 1). Within the context menu of the WebDynpro component and choose Create->View (VIEW1)

Step 4 Within the layout tab of the view create a simple UI element of type CAPTION (VIEW1). To do this right click on the ROOTUIELEMENTCONTAINER within the UI element hierarchy (top right corner) and select Insert Element. Enter a name for the element and select type CAPTION.

Step 5 Double click on the CAPTION to maintain it properties list. Change its display text using the text property to what ever you want e.g. HELLO WORLD. Press enter to see these changes appear in the layout preview!

Step 6 Make WebDynpro view part of the WebDynpro window This step is not required if you entered the view name during the creation of your ABAP web dynpro(step 1), in which case go straight to step 7 otherwise follow instructions below. Edit the Webdynpro window and select the window tab(MAIN_WINDOW). In the window structure open the context menu for the Web Dynpro window and select Embed View.

Display list of views available to be embedded Click 'value help' button to display list of available views to add.

Choose view to add to window Now select your view from the list.

The embed view popup will now be populated with the appropriate detials

The view has now been embeded to the window

Step 7 Create web Dynpro application

Step 8 - Save and activate everything

Step 9 - Test your WebDynpro (WDp)

Step 10 - Result

ABAP Web dynpro button click / Action


Once you have created a button on your web dynpro for ABAP application it needs to be activated so that when a user clicks on it the required action is performed. Here are the simple steps required to implement this action and make your ABAP web dynpro application perform the appropriate functionality when the button is pressed. Step 1 - Insert new element of type Button Within the layout tab of your VIEW add a new element of type button and give it a name, such as find

Step 2 - Fill in the properties With the properties section of the new button fill in the properties you require such as text, imageSource etc.

Step 3 - Assign it to an Action Again within the properties section of the new button create an Action for it by clicking on the create button, and typing the name of the action into the following popup.

Step 4 - View your new action Your new action will now have been created within the actions tab of your view.

Step 5 - Add code to your action From the actions tab you can double click into your action and add your own ABAP code. For example retrieve a value from a field and then use this to populate a table within your ABAP web dynpro application. See

populate table on action

Display popup screen within ABAP Web dynpro


Displaying a web dypro pop up screen is a fairly simple process, it basically involves creating a view containing the message or fields you want to display on the wdp popup, create a window and embend the view into it. Then insert the correct ABAP code at the point where you want the screen to be displayed. Here are the simple steps required to implement you ABAP web dynpro popup screen. Step 1 - Within your created web dynpro application create a new view Create a new web dynpro view which contains the text and UI elements you want to display Step 2 - Create a new WINDOW (WND_POPUP) to embed the view into Create a new window and embed the view you have just created into it. see hello world basic web dynpro example to see how to embed a view into a window. Step 3 - Add ABAP code Insert the following ABAP code into the appropriate place. i.e. in the wdp action method of your desired button

Data: context_node type ref to if_wd_context_node. data: lr_popup type ref to if_wd_window, lr_view_controller type ref to if_wd_view_controller. data: lr_api_comp_controller type ref to if_wd_component, lr_window_manager type ref to if_wd_window_manager. lr_api_comp_controller = wd_comp_controller->wd_get_api( ). lr_window_manager = lr_api_comp_controller->get_window_manager( ). lr_popup = lr_window_manager->create_window( MODAL = ABAP_TRUE window_name = 'WND_POPUP' "Name of the window created in step 2 TITLE = 'Please enter all information' CLOSE_BUTTON = ABAP_TRUE BUTTON_KIND = if_wd_window=>CO_BUTTONS_YESNO MESSAGE_TYPE = if_wd_window=>co_msg_type_error CLOSE_IN_ANY_CASE = ABAP_TRUE *MESSAGE_DISPLAY_MODE = MESSAGE_DISPLAY_MODE ). * Adds an action to the popup screen buttons * lr_view_controller = wd_this->wd_get_api( ). * lr_popup->subscribe_to_button_event( * button = if_wd_window=>co_button_ok * button_text = 'Yes' * action_name = 'SUBMIT' * action_view = lr_view_controller ). lr_popup->open( ).
Step 4 - Popup screen options The code in step 3 will display your popup screen as an error message with two buttons saying 'YES' and 'NO', these buttons will not perform an action and will simply return the user back to the main window. If this is not what you require below is a list of options which will allow you to change this display to suit your needs (adding different buttons, change message type, add action to buttons): Options for the BUTTON_KIND parameter (which can be found by double clicking on 'co_buttons_ok' within the above ABAP code):

CO_BUTTONS_NONE - No Buttons CO_BUTTONS_ABORTRETRYIGNORE - Buttons for 'Cancel', 'Repeat', 'Ignore' CO_BUTTONS_OK - Buttons for 'O.K.' CO_BUTTONS_CLOSE - Buttons for 'Close' CO_BUTTONS_OKCANCEL - Buttons for 'O.k.', 'Cancel' CO_BUTTONS_YESNO - Buttons for 'Yes', 'No' CO_BUTTONS_YESNOCANCEL - Buttons for 'Yes', 'No', 'Close' CO_BUTTON_ABORT CO_BUTTON_RETRY CO_BUTTON_IGNORE - Button for 'Cancel' - Button for 'Repeat' - Button for 'Ignore'

CO_BUTTON_OK CO_BUTTON_CLOSE CO_BUTTON_CANCEL CO_BUTTON_YES CO_BUTTON_NO CO_MSG_TYPE_NONE CO_MSG_TYPE_WARNING CO_MSG_TYPE_INFORMATION CO_MSG_TYPE_QUESTION CO_MSG_TYPE_ERROR CO_MSG_TYPE_STOPP

- Button for 'Ok.' - Button for 'Close' - Button for 'Cancel' - Button for 'Yes' - Button for 'No' - No message type - Warning - Information - Question - Error - Cancel

Options for the MESSAGE_TYPE parameter (which can be found by double clicking on 'co_msg_type_error' within the above ABAP code):

Adding actions to popup screen buttons (Yes, OK etc) Add the following code to that found in step 3, after the method 'create_window' has been called (or simple uncomment it!!)

lr_view_controller = wd_this->wd_get_api( ). lr_popup->subscribe_to_button_event( button = if_wd_window=>co_button_ok button_text = 'Yes' action_name = 'SUBMIT' action_view = lr_view_controller ).

You might also like