Exercise Unit: Using ALV in Web Dynpro Component.

Estimated Time: 45 minutes

NOTES: If you wish to find out more about any field, first select that field and then hit F1. Logon to the !" system and start !#!" $or%bench & E'(). Logon data is *ro+ided by your instructor. a+e all your ob,ects as local ob,ects &*ac%age name -T.").

PURPOSE: !t the end of this Tutorial you will be able to /nderstand how larger $eb 0yn*ro *ro,ects can be structured with se+eral $eb 0yn*ro com*onents #e able to include a reusable $eb 0yn*ro com*onent into another $eb 0yn*ro com*onent 1now how methods of an used $eb 0yn*ro2s Interface 3ontroller is called

PREREQUISITES: Logon to the !" system and start !#!" $or%bench & E'(). Logon data is *ro+ided by your instructor.

PROCEDURE:

1. Create the Web Dynpro Component ZZ_00_ALV

STEPS: 1. tart the !#!" $or%bench &se80) and create the new $eb 0yn*ro com*onent 445((5!L6

. Create context e!ements in component Contro!!er "or storing the search criteria
1. 3reate node NODE_FLIGHT based on dictionary structure SFLIGHT in the conte7t of the com*onent controller. 3lic% on button Add Attribute from Structure and choose fields CARRID and CONNID.

. Create a context e!ement in component Contro!!er "or storing the "!ight !ist
1. 3reate node NODE_FLIGHTTAB based on dictionary structure SFLIGHT in the conte7t of the com*onent controller. 8. et the cardinality to (..9.

:. 3lic% on button Add Attribute from Structure and choose fields CARRID CONNID FLDATE !RICE C"RRENC# !LANET#!E SEATS$A% SEATSOCC and !A#$ENTS"$.

4. !n !L6 table always dis*lays all fields that are a+ailable in the dictionary, if the conte7t node has a dictionary reference. To only dis*lay the selected fields inside the !L6 table clear the dictionary reference in *ro*erty DICTIONAR# STR"CT"RE in node NODE_FLIGHTTAB.

#. Create a metho$ "or "i!!ing the "!ight !ist

1. 3reate method FILL5FLIGHTTAB in the com*onent controller to fill node NODE5FLIGHTTAB. *fill context node "node_flighttab" DATA: node_node_flight TYPE REF TO if_wd_context_node, node_node_flighttab TYPE REF to if_wd_context_node, elem_node_flight TYPE REF TO if_wd_context_element, str _node_flight TYPE if_com!onentcontroller"#element_node_flight, ls_where$%&' TYPE c, lt_where ()*E TA+(E OF ls_where, lt_flights TYPE TA+(E OF sflight, *navigate from <CONTEXT> to <NODE_F !"#T> via lead $election node_node_flight " wd_context-#get_child_node$ name " ./ODE_F()01T. ', *get element via lead $election elem_node_flight " node_node_flight-#get_element$ ',

*get all declared attrib%te$ elem_node_flight-#get_static_attrib tes$ )2PORT)/0 static_attrib tes " str _node_flight ', *create &here condition )F /OT str _node_flight-carrid E3 44, 5O/5ATE/ATE 45ARR)D " 444 str _node_flight-carrid 4444 )/TO ls_where, APPE/D ls_where TO lt_where, E/D)F, )F /OT str _node_flight-connid E3 466664, 5O/5ATE/ATE 45O//)D " 444 str _node_flight-connid 4444 )/TO ls_where, )F str _node_flight-carrid /E 44, 5O/5ATE/ATE 4A/D4 ls_where )/TO ls_where se!arated b7 space, E/D)F, APPE/D ls_where TO lt_where, E/D)F, *read data select 8 from sflight into table lt_flights 91ERE $lt_where', *navigate from <CONTEXT> to <NODE_F !"#T> via lead $election node_node_flighttab " wd_context-#get_child_node$ name " ./ODE_F()01TTA+. ', *fill context node node_node_flighttab-#bind_table$ lt_flights ',

. Create a %earch Vie&

The +iew SEARCH&IE' will be used to enter the search criteria for the database selection that fills conte7t node NODE5FLIGHTTAB. The search criteria will be stored inside conte7t node NODE5FLIGHT. Steps : 1. 3reate +iew E!;3<6IE$. 8. 3o*y and ma* conte7t node NODE5FLIGHT from the com*onent controller2s conte7t to the conte7t of +iew SEARCH&IE'.

'. Create %earch Vie& Layo(t

In the layout of +iew SEARCH&IE' create a grou* called IN!"TGRO"!. Enter = elect the Flights> in the TE%T *ro*erty of CA!TION5( of grou* IN!"TGRO"!. Inside IN!"TGRO"! create labels and in*ut fields for the two attributes CARRID and CONNID of conte7t node NODE_FLIGHT. <int: /se function Cre)te Co*t)i*er Form out of the conte7t menu of IN!"TGRO"!. 3reate button SEARCH inside grou* IN!"TGRO"!. Enter = earch> as te7t. 3reate action SEARCH and in+o%e com*onent controller method FILL_FLIGHTTAB+, in the corres*onding method ONACTIONSEARCH.

method O/A5T)O/:EAR51 , wd_5om!_5ontroller-#Fill_Flighttab$ ', endmethod,

). Create Layo(t Vie&

To dis*lay more than one +iew at the same time inside a window, we need a +iew for creating the layout. Steps : 1. 3reate +iew L!?@/T6IE$ and na+igate to the layout tab. 3hange the L)-out *ro*erty of the the ;@@T/IELE.E9T3@9T!I9E; to .atri7Layout. 8. 3reate two new elements, 6IE$53@9T!I9E;5/IEELE.E9T, each as a child of the ;@@T/IELE.E9T3@9T!I9E;. 9ame them E!;3< and T!#LE.

:. 3hange the L)-out D)t) *ro*erty of both +iew container /I elements to $)tri.He)dD)t).

). Assign LA*+U,V-EW an$ %E.AC/V-EW to Win$o&

It2s not *ossible to dis*lay a +iew directly inside a browser, but a window. Therefore the +iews ,ust created ha+e to be assigned to the window $AIN. 1. @*en the window .!I9 and na+igate to the window tab. @*en the conte7t menu of the root element $AIN and choose Embed &ie/0 First embed +iew L!?@/T6IE$:

8. !fter +iew L!?@/T6IE$ has been embedded into window .!I9, o*en the conte7t menu of the +iew container E!;3< and choose Embed 6iew.

Embed +iew E!;3<6IE$:

#. Using the Component ALV ,ab!e in the component contro!!er

$hen you search for s*ecial flights by entering a carrier and a connection, you want to see the result in an !L6 table.

0. De"ine Component Usage

If you want to see the data within a $eb 0yn*ro !L6, you ha+e to define the $eb 0yn*ro com*onent for !L6 SALV_WD_TABLE as a usage com*onent of your $eb 0yn*ro com*onent. 0oubleAclic% on your com*onent and define the com*onent usage of !L65$05T!#LE as follows:

1. %et Data to ALV $oe $isp!ay 23ia re3erse context mapping4

The selected flights are inside conte7t node NODE_FLIGHTTAB. To dis*lay them in the !L6 it is necessary to ma* the conte7t node NODE_FLIGHTTAB to the conte7t node DATA of the !L6 interface controller. @*en your $eb 0yn*ro com*onent2s INTERFACECONTROLLER_"SAGE. Hint: node Com1o*e*t "s)2es AB AL& AB

If the node Component Usage is not disp !"ed in the o#$e%t t&ee' s!(e "o)& %o*ponent !nd &ef&esh the t&ee disp !"

3lic% on the 3ontroller /sage button. The com*onent controller of your $eb 0yn*ro com*onent a**ears on the right side of the screen. .a* conte7t node 9@0E_FLIGHTTAB of your $eb 0yn*ro com*onent to conte7t DATA of the interface controller of the !L6 com*onent.

!fter you ha+e done the ma**ing, the conte7t node DATA has a doubleAarrow inside the folder icon.

5. Embe$ 3ie& ,A6LE o" component %ALV_WD_,A6LE into LA*+U,V-EW

To embed the !L6 T!#LE into the LA#O"T&IE', go to the window $AIN and switch to tab *age /i*do/0 Embed the !L6 +iew TABLE to +iew container TABLE by choosing the conte7t menu entry embed 3ie/0 ! *o*u* a**ears. /se the F4 hel* and select the following entry.

!cti+ate your $eb 0yn*ro 3om*onent.

7. Create an$ ,est Web Dynpro app!ication

Each $eb 0yn*ro com*onent needs a $eb 0yn*ro a**lication to be e7ecuted.

Steps :
3reate a $eb 0yn*ro a**lication for your $eb 0yn*ro com*onent:

Test your $eb 0yn*ro a**lication. The result will loo% li%e the following: