Demo Scenario on Adobe Interactive Forms Using ABAP WebDynpro - Part2

8/12/2019 Demo Scenario on Adobe Interactive Forms Using ABAP WebDynpro - Part2

1/49

I have created a table ZDEPT with just three fields; I will be creating an Adobe form for thesethree fields and will be u dating this table using A!AP "eb D#n ro framewor$%

&o to transaction 'E() and create a web d#n ro com onent ZAD*!E%


2/49

Enter the details in the o u window as shown below

Assign a ac$age to the a lication or save as a local object


3/49

+ou can see ,om onent controller- Interface controller and window being created

,reate a .iew as shown below


4/49

&ive the view name as /AI01.IE" as show below


5/49

+ou can see the main view being created%


6/49

&o to the context tab of the 2/AI01.IE" and create a em t# node%


7/49

&ive the name of the 0ode as Adobe and ress enter as shown below%


8/49

+ou can see the node Adobe being created below%


9/49

,reate another node under the node adobe as shown below%


10/49

&ive the name of the node as ZDEPT and Dictionar# structure as ZDEPT and ress the buttonAdd Attribute from 'tructure%


11/49

'elect the 3ields as shown below and ress enter%


12/49

+ou can see the node ZDEPT with three fields being created under the node AD*!E%


13/49

0ow create an attribute PD31'*45,E under the root node ,*0TE6T as shown below


14/49


15/49

+ou can see all the nodes that we have created; #our screen should a ear li$e the one shownbelow%


16/49

&o to the 7a#out tab of the /AI0 .IE" and create a lace holder for the adobe form- 5ight clic$on the 5**T4IE7E/E0T,*0TAI0E5 select insert Element from the conte8t window asshown below%


17/49

Enter the details in the P*P4P window- give the name of the lace holder as AD*!E and t# e

Interactive3orm as shown below%


18/49

+ou can see the laceholder AD*!E being created- chec$ the ,9E:!*6 enabled in thero ert# list- this is a re uired entr# for an interactive form- )) 8 and width to >)) 8 as shown below%


19/49

,lic$ on the button in the ro ert# list for the ro ert# df'ource and select the node

PD31'*45,E from the conte8t window%


20/49

In the ro ert# 7ist for tem late 'ource ro ert# give the name of the adobe form ZAD*!E thatwe will be creating during this session and double clic$ on it%


21/49

In the P*P4P window- give the adobe form interface name ZAD*!E as shown below andress on the ,onte8t button as shown below%


22/49

'elect the 0ode Adobe from the conte8t window as shown below%


23/49

'ave the a lication as local object%


24/49

Press the button 'ave to save the main view%


25/49

+ou can see the Adobe form a lication with our web d#n ro conte8t node ZDEPT beingma ed to the conte8t of the Adobe form in the Data view tab%


26/49

?ust Drag and Dro the ZDEPT 0ode on to the form- in the subform tab of the object ma$e thecontent as 3lowed as shown below


27/49

Drag and Dro Te8t from the 7ibrar# allet and enter the te8t as #ou wish


28/49

Drag and Dro the 'ubmit button on the form as shown below


29/49

?ust select the event clic$@ and language ?ava'cri t and run at client


30/49

&o to the ro erties age of the form and double clic$ on the interface ZAD*!E #ou can see the6/7 'chema


31/49

+ou can see the 6/7 'chema interface


32/49

0ow we are bac$ to our web d#n ro a lication%


33/49

'elect the window ZAD*!E as shown below


34/49

Drag and Dro the 2/AI01.IE" on to the window


35/49

&o to the /ain .iew la#out tab and select the node AD*!E and in the ro ert# list 4nder Events clic$ on the create button for the event onsubmit as shown below


36/49

&ive the name of the action as ,7I,: and ress enter%


37/49

&o to the Actions tab of the /AI01.IE" #ou can see the Action ,lic$- double clic$ on theaction ,7I,:%


38/49

+ou can see the /ethod *0A,TI*0,7I,:% 9ere #ou can code #our business logic- #ou can calla !API or a function module based on the re uirement% "e are going to code for inserting thevalues into the table de t- the values will come from our adobe form%

Copy the below code and paste it in the method.

method *0A,TI*0,7I,: %

dataB 0ode1Adobe t# e ref to If1"d1,onte8t10ode- 0ode1Zde t t# e ref to If1"d1,onte8t10ode- Elem1Zde t t# e ref to If1"d1,onte8t1Element- 'tru1Zde t t# e If1/ain1.iewC Element1Zde t %

data wa1 de t t# e de t% @ navigate from ,*0TE6T to AD*!E via lead selection 0ode1Adobe C wd1,onte8tF get1,hild10ode< 0ame C I31/AI01.IE"C wdct81Adobe =%

@ navigate from AD*!E to ZDEPT via lead selection 0ode1Zde t C 0ode1AdobeF get1,hild10ode< 0ame C I31/AI01.IE"C wdct81Zde t =%

@ get element via lead selection Elem1Zde t C 0ode1Zde tF get1Element< =%

@ get all declared attributes


39/49

Elem1Zde tF get1'tatic1Attributes< im orting 'tatic1Attributes C 'tru1Zde t =%

wa1 de tFDEPT0* C 'tru1Zde tFde tno% wa1 de tFD0A/E C 'tru1Zde tFdname% wa1 de tF7*, C 'tru1Zde tFloc%

insert into de t values wa1 de t%

endmethod%

+our 'creen should loo$ li$e the one shown below%

0ow 'ave and Activate the "ebd#n ro%


40/49

,reate a "eb d#n ro a lication as shown below% ?ust right clic$ on the node ZAD*!E andfrom the conte8t window select create "eb D#n ro A lication%


41/49

Enter the A lication name as adobe as shown below%


42/49

'ave the "eb d#n ro a lication as local object


43/49

&o to the /AI01.IE" Actions tab and $ee a session brea$ oint in the code- to just see if our code is being e8ecuted when we submit the data from the adobeform%


44/49

0ow we will test the a lication- right clic$ on the node adobe and select test fromthe conte8t window%


45/49

7ogon with #our credentials; give #our username and assword


46/49

+ou can see the Adobe form that we have designed- enter the data as shown belowand ress the submit button%


47/49

Press 3( to continue%


48/49

+ou can see the entr# in the table ZDEPT being u dated%


49/49

Documents

Demo Scenario on Adobe Interactive Forms Using ABAP WebDynpro - Part2