step by step creating a simple abap webdynpro

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.

Upload: asiahazhar

Post on 12-Sep-2014

126 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Step by Step Creating a Simple ABAP WebDynpro

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.

Page 2: Step by Step Creating a Simple ABAP WebDynpro

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 windowThis 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’.

Page 3: Step by Step Creating a Simple ABAP WebDynpro

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

Choose view to add to windowNow 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

Page 4: Step by Step Creating a Simple ABAP WebDynpro

Step 7 – Create web Dynpro application

Step 8 - Save and activate everything

Page 5: Step by Step Creating a Simple ABAP WebDynpro

Step 9 - Test your WebDynpro (WDp)

Step 10 - Result

Page 6: Step by Step Creating a Simple ABAP WebDynpro

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 propertiesWith the properties section of the new button fill in the properties you require such as text, imageSource etc.

Step 3 - Assign it to an ActionAgain 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.

Page 7: Step by Step Creating a Simple ABAP WebDynpro

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

Step 5 - Add code to your actionFrom 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

Page 8: Step by Step Creating a Simple ABAP WebDynpro

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 viewCreate 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 intoCreate 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.

Page 9: Step by Step Creating a Simple ABAP WebDynpro

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 ButtonsCO_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 - Button for 'Cancel'CO_BUTTON_RETRY - Button for 'Repeat'CO_BUTTON_IGNORE - Button for 'Ignore'CO_BUTTON_OK - Button for 'Ok.'CO_BUTTON_CLOSE - Button for 'Close'CO_BUTTON_CANCEL - Button for 'Cancel'CO_BUTTON_YES - Button for 'Yes'CO_BUTTON_NO - Button for 'No'

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

CO_MSG_TYPE_NONE - No message typeCO_MSG_TYPE_WARNING - Warning

CO_MSG_TYPE_INFORMATION - InformationCO_MSG_TYPE_QUESTION - QuestionCO_MSG_TYPE_ERROR - ErrorCO_MSG_TYPE_STOPP - Cancel

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