UI Elements & BAPI Call Exercise

Chapter: Theme: UI Elements UI Elements & BAPI Call

At the end of this Exercise, you are able to: Define container and standard UI elements Use the Web Dynpro Wizard to create a BAPI call

Development Objectives

Create a UI for the BAPI BAPI_FLIGHT_GETLIST. Create a view for the input of the parameters and a second view for the display of the table with the flights.

Result In this exercise, you will a view for the input parameters

And a second one for the table display.

1 UI Elements & BAPI Call Exercise

Exercise without optional part: Template Solution: Web Dynpro Component: Application: Group number: WD_04S_UI_BAPI WD_04S_UI_BAPI ## stands for the two-digit group number

Developing
3-1 Create a new Web Dynpro Component called ZWD_##_UI_BAPI.

Change the proposed window name to MAIN. 3-2 Start the Web Dynpro Wizard through menu option create -> service call from context menu of the Web Dynpro component. In the Wizard: - Use existing component controller - Use Function module: BAPI_FLIGHT_GETLIST - Select all parameters, except EXTENSION_IN and EXTENSION_OUT - Specify method name: EXECUTE_BAPI_FLIGHT_GETLIST 3-3 Create a view called INPUT_VIEW and navigate to the views Context tab. Map nodes DATE_RANGE, DESTINATION_FROM and DESTINATION_TO to the view context. Go on the Layout tab. - Create a group - Create labels and inputfields and bind the inputfields to the following context attributes: - DESTINATION_FROM.CITY - DESTINATION_FROM.COUNTR - DESTINATION_TO.CITY - DESTINATION_TO.COUNTR - DATE_RANGE.LOW - DATE_RANGE.HIGH Create a Search button, which triggers a action to fire a outbound plug. (Create also the action and the plug)

3-4

3-5

2 UI Elements & BAPI Call Exercise

3-6

Create a second view called DISPLAY_VIEW and navigate to the views Context tab. Map node FLIGHT_LIST to the view context. Go on the Layout tab and create a table UI element for displaying the flight list. Hint: Use the table template from the Web Dynpro Code Wizard.

3-7 3-8

3-9 3-10

Go to the Inbound Plug tab and create an inbound plug. Navigate to the Window tab of the window MAIN and embed the two views. Create a navigation link from the outbound plug of the INPUT_VIEW to the inbound plug of the DISPLAY_VIEW. Set INPUT_VIEW as default. Navigate to the component controller context and change the cardinality of node DATE_RANGE to 1..n. Set in the component controller the default values to the following attributes: DATE_RANGE.SIGN = I DATE_RANGE.OPTION = BT Invoke method BAPI_FLIGHT_GETLIST Navigate to method WDDOINIT of the DISPLAY_VIEW and invoke method BAPI_FLIGHT_GETLIST. Hint: Use the Web Dynpro Code Wizard

3-11

3.12

3-13

3-14 3-15

Create the Web Dynpro application ZWD_##_UI_BAPI. Start the application and enter a date for the fields date from and date to.

3 UI Elements & BAPI Call Exercise