04_2_Exercise_UI_BAPI

1

UI Elements & BAPI Call

Exercise

UI Elements & BAPI Call

Exercise

Chapter: UI Elements

Theme:

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

1

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. 2 Result

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

And a second one for the table display.

Exercise without optional part:

Template Solution:

Web Dynpro Component: WD_04S_UI_BAPI

Application: WD_04S_UI_BAPI

Group number: ## stands for the two-digit group number

3 Developing

3-1Create a new Web Dynpro Component called Z WD_##_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 t he view’s Context tab.

3-4 Map nodes DATE_RANGE, DESTINATION_FROM and

DESTINATION_TO to the view context.

3-5 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)

2

UI Elements & BAPI Call

Exercise

3-6 Create a second view called DISPLAY_VIEW and navigate to the view’s Context tab.

3-7 Map node FLIGHT_LIST to the view context.

3-8 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-9 Go to the Inbound Plug tab and create an inbound plug.

3-10 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.

3-11 Navigate to the component controller context and change the cardinality of node DATE_RANGE to 1..n.

3-12Set in the component controller the default values to the following attributes:

DATE_RANGE.SIGN = I

DATE_RANGE.OPTION = BT

3-13 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-14 Create the Web Dynpro application Z WD_##_UI_BAPI.

3-15 Start the application and enter a date for the fields date from and date to.

3

UI Elements & BAPI Call

Exercise