7/29/2019 webdynpro bapi

1/3

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

1UI Elements & BAPI Call

Exercise

7/29/2019 webdynpro bapi

2/3

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

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

3-4 Map nodes DATE_RANGE, DESTINATION_FROM and

DESTINATION_TO to the view context.

3-5 Go on theLayouttab.

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

2UI Elements & BAPI Call

Exercise

7/29/2019 webdynpro bapi

3/3

3-6 Create a second view called DISPLAY_VIEW and navigate to the

views Contexttab.

3-7 Map node FLIGHT_LIST to the view context.

3-8 Go on theLayouttab and create a table UI element for displaying theflight list.

Hint: Use the table template from the Web Dynpro Code Wizard.

3-9 Go to theInbound Plugtab 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.12 Set 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_GETLISTNavigate 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 ZWD_##_UI_BAPI.

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

to.

3UI Elements & BAPI Call

Exercise