Exercise # 5

Exercise # 5: Objectives: Develop web dynpro application displaying the data in the table on a view by creating a service call to call a function module and bind the parameters to the controller context. Tasks required to be performed for development:

1. Creation of package : 

Refer exercise # 1 for creation of package.

2. Creation of Web Dynpro component with a window: 

Refer previous exercises for creation of Web dynpro Component and window.

3. Creation of Web Dynpro views: 

Refer previous exercises for creation of Web dynpro Views.

4. Create inbound and outbound plugs: 

Refer previous exercises for creation of inbound and outbound plugs for both the views.

5. Embed them into the main window: 

Create a navigation link between the plugs of both the views.

6. create a service call of function module: 

Use web dynpro code wizard to create a service call of function module ‘BAPI_FLIGHT_GETLIST’ in the controller context. This will create a method encapsulating the BAPI call. In addition, the BAPI’s interface parameters will be bound to the component controller context. •

Create a service call in the existing component controller for the function module ‘BAPI_FLIGHT_GETLIST’.

•

When asked for the parameters to be stored in the controller’s context, select DESTINATION_FROM, DESTINATION_TO, AND FLIGHTLIST.

•

When asked for the name of the service method, accept the default name (EXECUTE_BAPI_FLIGHT_GETLIST).



Open the context menu for the web dynpro component in the navigation area of the ABAP workbench (left-hand side) and choose CreateàService Call

       

Choose Continue to confirm the first window of the wizard. Select Use Existing Controller, enter the component controller of your component, and choose Continue. Select function module and choose Continue. On the next screen, enter the name of the function module in the function module field and choose Continue. Check the parameters to be stored in the controller’s context and choose Continue. Enter the name of the service method and a description and choose continue. In the controller context the following nodes and attributes gets automatically created.



7. Placing the UI elements and define the context mapping: 

  

On the input layout, create a group with input fields for departure city and destination city. In order to bind the input fields to view context attributes, copy the relevant nodes of the component context to the context of the input view and define the mapping between the context nodes of different controllers. • On the view layout use the web Dynpro code wizard to create a form, providing an input field corresponding to attributes CITY of context node DESTINATION_FROM. Repeat the last step for the attribute CITY of context node DESTINATION_TO. Move all the fields into a single group and delete the other group. Adjust the properties of the UI elements to make sure that the input fields are displayed one below the other. • Set the layout property of the ROOTUIELEMENTCONTAINER to Matrixlayout • Set the layout data property of UI element group to MatrixHeadData • Set the layout data property of CITY_LABEL to MatrixHeadData • Set the layout data property of CITY_LABEL_1 to MatrixHeadData

 



8.

Copy the relevant nodes of the component context to the context of the DISPLAY view and map the context nodes of different controllers. Use the WebDynpro wizard to create a table display with binding to the context node FLIGHTLIST. • Place the cursor on the ROOTUIELEMENTCONTAINER, press the WebDynpro code wizard button and choose StandardàTable • Choose context and double click context node FLIGHTLIST. • Accept the default and choose (standard cell editor text view and binding for all the fields). Provide a button on each view and implement navigation between them. • Create actions related to these buttons and make sure the respective outbound plug is fired.

Implementing a call of the service method: 

Use the WebDynpro code wizard to implement a call of the service method EXECUTE_BAPI_FLIGHT_GETLIST in the event handler for the inbound plug of the display view. • Open the method in the editor, choose WebDynpro code wizard and select method call in used controller. • Select the component controller and the method to be called, from the input help and choose the TICK mark. •

9. Activate the component and create an Application and test the same. 

The output appears as follows:





When clicked on ‘Show Flight Info’ button…





Congratulations!!!!! You have successfully developed a Web Dynpro Application displaying the data in the table .