You are on page 1of 26

ZBC481_99_U3_D2_WD_WIN_VIEWS p82

Business Example: Create UI elements for the user to enter values and call a FM for data
retrieval and display on the second view. Bind parameters to the controller context for
data retrieval.
Model solution:
BC400_WDS_B (Web Dynpro)
Task 1:

Copy the Web Dynpro template (BC400_WDS_A) TO (ZBC400_##_B)
or continue with your previous exercise program (ZBC400_##_A)

Task 2:

Create a service call to the FM (BC400_DDS_CONNECTION_GET) that
will read the data for the individual flight connection. During generation,
a Method that encapsulates the FM will be created

TXN: SE80
Right click on the Web Dynpro (ZBC400_##_B) and follow the path:
Create->Service Call

Press Continue on the first screen of the wizard

1

ZBC481_99_U3_D2_WD_WIN_VIEWS p82
Select the Use Existing Controller radio button
Choose the F4 dropdown on the Controller Line

Choose the Controler
Result

Press continue

2

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Choose the Function Module radio button Press Continue Enter the name of the FM: BC400_DDS_CONNECTION_GET Press Continue 3 .

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Change the Object Type for the following Parameters to Context (Node/Attribute): IV_CARRID IV_CONNID ES_CONNECTION Press Continue A Method will be generated (the name can be modified. if necessary) Press Continue Result Press Complete 4 .

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Result Press Save 5 .

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Task 3: Copy the Component Controller IMPORTING node to the Input View. define the context mapping and create a group with input fields for the Airline ID and Flight number and link the Input fields to the context of the Input view TXN: SE80 Double click on the INPUT_VIEW Press The Context tab Result Drag the IMPORTING folder from the COMPONENTCONTROLLER (Right Side) and drop it on top of the INPUT_VIEW CONTEXT (Left Side) Result Press Save Click on the IMPORTING node 6 .

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Choose the layout tab Press the Wizard Button Double click on FORM Press Enter Press the Context button Double click on the IMPORTING node Result Press Enter 7 .

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Result Right click on the ROOTUILEMENTCONTAINER Choose: Insert Element Enter Name: GROUP1 In the dropdown choose: Group Press Enter Press Save 8 .

IV_CARRID 3. IV_CONNID_LBL 4.ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Drag the following elements ON TOP OF the group Node in this order: 1. IV_CONNID Result Drag the BUTTON_GO node on top of the GROUP1 Node Result 9 . IV_CARRID_LBL 2.

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Drag the BUTTON_GO node on the ROOTUIELEMENT CONTAINER node Result Right click on the TRANSPARENT_CONTAINER node Choose Remove element Press Save Result 10 .

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Click on the GROUP1 node In the property area. Choose the MatrixLayout on the Layout line Press Save Click on the CAPTION (Header) node in the hierarchy tree In the property area. Place the cursor on the Text line Enter the following text: Flight Connection Press Save Click on the IV_CARRID_LBL node Ensure the Layout Data line is set to MatrixHeadData Press Enter Click on the IV_CARRID node Ensure the Layout Data line is set to MatrixData Press Enter 11 .

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Click on the IV_CONNID_LBL node Ensure the Layout Data line is set to MatrixHeadData Press Enter Click on the IV_CARRID node Ensure the Layout Data line is set to MatrixData Press Save Result Task 4: Copy the ES_CONNECTION node in the COMPONENTCONTROLLER to the Output View and define the context mapping TXN: SE80 Double click on the OUTPUT_VIEW Press The Context tab Result 12 .

drag the ES_CONNECTION node on top of the OUTPUT_VIEW CONTEXT (Left Side) Result Press Save Click on the ES_CONNECTION node Result Choose the layout tab Press the Wizard Button Double click on FORM Press Enter 13 .ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Inside the EXPORTING folder in the COMPONENTCONTROLLER (Right Side).

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Press the Context button Double click on the ES_CONNECTION node 14 .

AIRPTO & FLTIME Result Press Enter Result 15 .ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Remove the Binding Flags for the fields below: AIRPFROM.

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Right click on the ROOTUILEMENTCONTAINER Choose: Insert Element Enter Name: GROUP2 In the dropdown choose: Group Press Enter Press Save Result 16 .

ARRTIME Press Save Result 17 . CITYTO 9. DEPTIME 11. CITYTO_LBL 8. DEPTIME_LBL 10. CARRID 3. CARRID_LBL 2. CONNID_LBL 4.ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Drag the following elements ON TOP OF the GROUP2 Node in this order: 1. CONNID 5. ARRTIME_LBL 12. CITYFROM 7. CITYFROM_LBL 6.

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Drag the BUTTON_BACK node on top of the GROUP2 node Result Drag the BUTTON_BACK node on top of the ROOTUIELEMENT CONTAINER node 18 .

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Right click on the TRANSPARENT_CONTAINER node Choose Remove element Result Click on the GROUP2 node In the property area. Choose the MatrixLayout on the Layout line Press Save 19 .

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Click on the CAPTION (Header) node In the property area. Place the cursor on the Text line Enter the following text: Flight Details Press Save Click on each of the following Nodes (one at a time) CARRID_LBL CONNID_LBL CITYFROM_LBL CITYTO_LBL DEPTIME_LBL ARRTIME_LBL Ensure the Layout Data line is set to MatrixHeadData (one example is below) Press Enter Result 20 .

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Click on each of the following Nodes (one at a time) CARRID CONNID CITYFROM CITYTO DEPTIME ARRTIME Ensure the Layout Data line is set to MatrixData (one example is below) Press Enter Result 21 .

Insert the call into the action handler method of the INPUT view before the navigation plug is fired. Double click on the INPUT_VIEW node in the hierarchy navigation tree Choose the Methods tab Doubleclick on the Method: ONACTIONGO Result 22 .ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Task 5: Use the Wizard to implement the call of the service method (EXECUTE…) before the navigation from the INPUT view to the DISPLAY view.

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Place the cursor above the code already proposed Choose Wizard button Choose the Method Call in Used Controller radio button Select the F4 dropdown on the Component Name line Result Choose Component ZBC400_##_A Press the F4 dropdown on the Method Name line Result 23 .

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Choose the Method: EXECUTE_BC400_DDS_CONNECTION_G Result Press Enter Press Save Activate the Web Dynpro 24 .

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Right click on the Web Dynpro and Activate it Right click on the Web Dynpro Component ZBC400_##_A and Create a Web Dynpro Application if you need to otherwise use the previously created Application Right click on the Web Dynpro Application ZBC400_##_A and choose test Result 25 .

ZBC481_99_U3_D2_WD_WIN_VIEWS p82 Enter Values Press Continue Result Press the Continue button Result Press The Back button & Result 26 .