Page 1
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 1/51
http://careerabap.blogspot.in/2011/02/demo-on-adobe-
interactive-forms-using.html
Demo on Adobe interactive forms using WebDynpro for ABAP
Part 1Email ThisBlogThis! Share to Twitter Share to Facebook
I have created a table ‘ZDEPT’ with just three fields; I will be creating an Adobe form for these three fields
and will be updating this table using ABAP Web Dynpro framework.
Go to transaction SE80 and create a web dynpro component ZADOBE’.
Page 2
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 2/51
Enter the details in the popup window as shown below
Page 3
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 3/51
Assign a package to the application or save as a local object
You can see Component controller, Interface controller and window being created
Page 4
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 4/51
Create a View as shown below
Page 5
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 5/51
Give the view name as ‘MAIN_VIEW’ as show below
Page 6
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 6/51
You can see the main view being created.
Page 7
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 7/51
Go to the context tab of the “MAIN_VIEW’ and create a empty node.
Page 8
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 8/51
Give the name of the Node as ‘Adobe’ and press enter as shown below.
Page 9
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 9/51
You can see the node ‘Adobe’ being created below.
Page 10
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 10/51
Create another node under the node adobe as shown below.
Page 11
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 11/51
Give the name of the node as ‘ZDEPT’ and Dictionary structure as ‘ZDEPT’ and press the button ‘Add
Attribute from Structure’.
Page 12
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 12/51
Select the Fields as shown below and press enter.
Page 13
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 13/51
You can see the node ‘ZDEPT’ with three fields being created under the node ‘ADOBE’.
Page 14
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 14/51
Now create an attribute ‘PDF_SOURCE’ under the root node ‘CONTEXT’ as shown below
Page 15
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 15/51
Give the Attribute Name as ‘PDF_SOURCE’ and the type ‘XSTRING’ as shown below
Page 16
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 16/51
You can see all the nodes that we have created; your screen should appear like the one shown below.
Page 17
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 17/51
Go to the Layout tab of the ‘MAIN VIEW’ and create a place holder for the adobe form, Right click on the
‘ROOTUIELEMENTCONTAINER’ select ‘insert Element’ from the context window as shown below.
Page 18
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 18/51
Enter the details in the POPUP window, give the name of the place holder as ‘ADOBE’ and type
‘InteractiveForm’ as shown below.
Page 19
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 19/51
You can see the placeholder ‘ADOBE’ being created, check the CHEKBOX enabled in the property list,
this is a required entry for an interactive form, (an activex control ‘Active Control Framework’ will be
automatically downloaded on to the client from the server when the web page is first called). Increase the
height to 500px and width to 500px as shown below.
Page 20
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 20/51
Click on the button in the property list for the property ‘pdfSource’ and select the node ‘PDF_SOURCE’
from the context window.
Page 21
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 21/51
In the property List for ‘template Source’ property give the name of the adobe form ’ZADOBE’ that we will
be creating during this session and double click on it.
Page 22
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 22/51
In the POPUP window, give the adobe form interface name ‘ZADOBE’ as shown below and press on the
‘Context button’ as shown below.
Page 23
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 23/51
Select the Node ‘Adobe’ from the context window as shown below.
Page 24
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 24/51
Save the application as local object.
Page 25
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 25/51
Press
the button ‘Save’ to save the main view.
Page 26
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 26/51
You can see the Adobe form application with our web dynpro context node ‘ZDEPT’ being mapped to the
context of the Adobe form in the Data view tab.
Page 27
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 27/51
Just Drag and Drop the ‘ZDEPT’ Node on to the form, in the subform tab of the object make the content
as ‘Flowed’ as shown below
Page 28
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 28/51
Drag and Drop ‘Text’ from the Library pallet and enter the text as you wish
Page 29
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 29/51
Drag and Drop the Submit button on the form as shown below
Page 30
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 30/51
Just select the event click* and language JavaScript and run at client (No coding is required)
Now save and just activate the Form and the interface as shown below.
Page 31
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 31/51
Go to the properties page of the form and double click on the interface ‘ZADOBE’ you can see the ‘XML
Schema’
Page 32
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 32/51
You can see the ‘XML Schema’ interface (You can have three types of interfaces ‘Abap dictionary
interface, Smart form compatible interface and XML interface) for interactive forms using WebDynpro you
have to use the XML Schema interface.
Press the back button to go back to our web dynpro application.
Page 33
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 33/51
Now we are back to our web dynpro application.
Page 34
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 34/51
Select the window ‘ZADOBE’ as shown below
Page 35
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 35/51
Drag and Drop the “MAIN_VIEW’ on to the window
Page 36
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 36/51
Go to the ‘Main View’ layout tab and select the node ‘ADOBE’ and in the property list Under Events click
on the create button for the event ‘onsubmit’ as shown below
Page 37
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 37/51
Give the name of the action as ‘CLICK’ and press enter.
Page 38
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 38/51
Go to the Actions tab of the ‘MAIN_VIEW’ you can see the Action ‘Click’, double click on the action
‘CLICK’.
Page 39
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 39/51
You can see the Method ONACTIONCLICK. Here you can code your business logic, you can call a BAPI
or a function module based on the requirement. We are going to code for inserting the values into the
table zdept, the values will come from our adobe form.
Copy the below code and paste it in the method.
method ONACTIONCLICK .
data:
Node_Adobe type ref to If_Wd_Context_Node,
Node_Zdept type ref to If_Wd_Context_Node,
Elem_Zdept type ref to If_Wd_Context_Element,
Stru_Zdept type If_Main_View=>Element_Zdept .
data wa_zdept type zdept.
* navigate from to via lead selection
Page 40
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 40/51
Node_Adobe = wd_Context->get_Child_Node( Name = IF_MAIN_VIEW=>wdctx_Adobe ).
* navigate from to via lead selection
Node_Zdept = Node_Adobe->get_Child_Node( Name = IF_MAIN_VIEW=>wdctx_Zdept ).
* get element via lead selection
Elem_Zdept = Node_Zdept->get_Element( ).
* get all declared attributes
Elem_Zdept->get_Static_Attributes(
importing
Static_Attributes = Stru_Zdept ).
wa_zdept-DEPTNO = Stru_Zdept-deptno.
wa_zdept-DNAME = Stru_Zdept-dname.
wa_zdept-LOC = Stru_Zdept-loc.
insert into zdept values wa_zdept.
endmethod.
Your Screen should look like the one shown below.
Page 41
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 41/51
Now Save and Activate the Webdynpro.
Page 42
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 42/51
Create a Web dynpro application as shown below. Just right click on the node ‘ZADOBE’ and from the
context window select createWeb Dynpro Application.
Page 43
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 43/51
Enter the Application name as ‘zadobe’ as shown below.
Page 44
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 44/51
Save the Web dynpro application as local object
Page 45
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 45/51
Go to the ‘MAIN_VIEW’ Actions tab and keep a session break point in the code, to just see if our code is
being executed when we submit the data from the adobe form.
Page 46
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 46/51
Now we will test the application, right click on the node zadobe and select ‘test’ from the context window.
Page 47
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 47/51
Logon with your credentials; give your username and password
Page 48
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 48/51
You can see the Adobe form that we have designed, enter the data as shown below and press the submit
button. (As I said earlier an activex control will be installed on to the client machine, you can see the
activex control in the internet explore go to the menu: ToolsInternet optionsgo to the programs
tabPress button Manage add-ons.
You can see an activex control named ‘SAP ACF’, if you don’t have this control you will not see this page:
Note you need to have adobe acrobat reader 7.1 installed, I have used version 9, the activex control was
not working properly so down graded my adobe reader to 7.1)
Page 49
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 49/51
Press F8 to continue.
Page 50
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 50/51
You can see the entry in the table ZDEPT being updated.
Page 51
7/30/2019 Demo on Adobe Interactive Forms Using WebDynpro for ABAP Part 1
http://slidepdf.com/reader/full/demo-on-adobe-interactive-forms-using-webdynpro-for-abap-part-1 51/51