Note about studying ABAP WebDnypro

Source Tutorial URL:Web Dynpro for ABAP

Prepare:
Question:
Can not open view design preview
Solution: Active necessary service use transaction SCIF, NOTES: 1008689

Tutorial 1- Create a simple Web Dynpro Application
1. create Component
2. create View
3. embed View in the Main window
4. create View Context Node, name is FLIGHT_NODE, structure is SFLIGHT

Cardinality setting is 0..n,and select all fields in the structure
4. create table component in view, data binding to View Context Node: SFLIGHT_NODE
5. hand write code in WDDOINIT Method:

select data from table SFLIGHT, and store in internal table IT_SFLIGHT

get node FLIGHT_NODE and call it’s method: bind_table.
6. create Application, Active all related object, right click application and choose Test menu item.

Tutorial 2 – BAPI Usage
1. create Component
2. create View and embed View in the Main window
3. start wizard: Service Call
4. create at COMPONENTCONROLLER

select function module call BAPI_FLIGHT_GETLIST

select component context: DESTINATION_FROM, DESTINATION_TO, FLIGHT_LIST

adopt default method name: COMPONENTCONROLLER – EXCUTE_BAPI_FLIGHT_GETLIST
5. create view context node: DESTINATION_FROM, DESTINATION_TO, FLIGHT_LIST and mapping to component context

just drag in component context and drop in view context
6. create input field: menu->Create Container Form, and mapping to correspond view context node

create search button
7. create button’s action
8. in action’s code editor,

start dynpro code wizard:

choose method call: COMPONENTCONROLLER – EXCUTE_BAPI_FLIGHT_GETLIST
9. create result table component, and create binding to view context FLIGHT_LIST
10. create Application, Active all related object, right click application and choose Test menu item.

Tutorial 3 – Navigation
1. create a new component by copy final component in tutorial 2

rename window name to component name
2. create view: NOFLIGHTSVIEW

create ui element: a text_view, a button and change default layout setting: cellDesign:lPad, vGutter:medium
3. create view context DESTINATION_FROM, DESTINATION_TO from component context by drag and drop

create view context attribute manually: name TEXT, type STRING

create data bind for ui text_view, to view context TEXT
4. define plugs

FLIGHTSVIEW:

inbound: ENTER_SEARCH,

outbound: NO_FLIGHTS_FOUND

NOFILGHTSVIEW: inbound: NO_FLIGHTS_FOUND
outbound: BACK_TO_SEARCH
5. change source code of ONACTIONGET_FLIGHTS in view FLIGHTSVIEW

get the value of view context node: NODE_FLIGHT_LIST, using code wizard: Read Context

in the second @TODO block, fire outbound plug, using code wizard: Start Navigation
6. input the source code of outbound plug NO_FLIGHTS_FOUND in view NOFILGHTSVIEW

get the value of view context node: DESTINATION_FROM-CITY, using code wizard: Read Context

get the value of view context node: DESTINATION_TO-CITY, using code wizard: Read Context

generate the response message, and set to view context node TEXT: wd_context->set_attribute
7. create a action for button in view NOFLIGHTSVIEW, specify outbound plug at the same time
8. embed view NOFLIGHTSVIEW in window

create navigation link:

BACK_TO_SEARCH of NOFLIGHTSVIEW -> ENTER_SEARCH of FLIGHTSVIEW

NO_FLIGHTS_FOUND of FLIGHTSVIEW -> NO_FLIGHTS_FOUND of NOFLIGHTSVIEW
9. create Application, Active all related object, right click application and choose Test menu item.

Tutorial 4 – Display Bookings of Selected Flight
1. create a new component by copy final component in tutorial 3

rename window name to component name
2. create a new node under controller context FLIGHT_LIST, name: BOOKINGS, structure: SBOOK, cardinality: 0..n

select some fields in the structure
3. define supply function for node BOOKINGS
4. implementation for supply function

get value of parent element

NOTICE: CL_WDABAP_FLIGHT_MODEL class may not exist, just replace it with a sql statement.

get bookings in table sbook for the condition, parent element’s carrid, connid, fldate

bind data to node, node->bind_table
5. update view context node FLIGHT_LIST
6. add ui element in bottom of view FLIGHTSVIEW

create data binding to view context node FLIGHT_LIST-BOOKINGS
7. create Application, Active all related object, right click application and choose Test menu item.

Tutorial 5 – Component and Application Configuration
1. create a new component by copy final component in tutorial 3

rename window name to component name
2. create a custom controller and set it as config controller
3. create controller context node NAV_PARAMS and attribute NAVTO_NOFLIGHTSVIEW
4. mapping controller context to view context

click Controller Usage button to add the new created controller to right window
5. change source code of method ONACTIONGET_FLIGHTS

get node NAV_PARAMS

get value of attribute NAVTO_NOFLIGHTSVIEW

add b_navto_noflights = abap_true as a condition to switch to view NOFLIGHTSVIEW
6. create application configuration

set value of attribute NAVTO_NOFLIGHTSVIEW to true by checked the left check box
7. refresh on abap workbench and test application with configuration

Comments are closed.