Step By Step Process For Creating Adobe Interactive Forms Using Web Dynpro With Web Services & No User Authentication

[former_member182329]

Step By Step Process For Creating Adobe

Interactive Forms Using Web Dynpro With Web

Services & No User Authentication

                                          Adobe Interactive Forms using Webdynpro Application and using web service for connecting the Adobe Forms with SAP. My scenario was to create an Adobe Interactive Form in which the client will fill an complaint registration notification Adobe Form and upon clicking Submit Button on the form it should pick the values from the form and and create a new notification in the transaction QM01 in the SAP side. The customer doesn't have a password nor a portal to access the SAP server, so a web service was needed for this case and that too without password Authentication.

Prerequisites

i) ALD (Adobe LiveCycle Development Tool)

ii) ADS (For Adobe Interactive Forms)

iii) Create Service User for web service for the purpose of No Authentication while connecting to

SAP system (Check with Basis Team).

STEP 1.

a) Create a new Webdynpro Application (I am not going in depth on how to create Web Dynpro

Application such as context, views creation etc)

b)In the Main View insert a new element INTERACTIVE_FORM name it ADOBE or any name

you wish.

Unlike normal scenarios you don't need to add the PDFSource in your Interactive Form Container unless there is some coding needed to be done in the Webdynpro part. For the sake of that scenario i am showing how to do that also.

c) In the context node under the context tab of the Webdynpro we will import the structure of the

necessary fields that we are going to retrieve the value from the Adobe Form for Processing.

d) In addition to that structure create one more Attribute Named "PDF_SOURCE" with type Xstring.

Go back to Layout and click on the interactive form in the layout editor and click on the data

source property of the element.

f) Click on the node ADOBE to import the data fields required to handle the incoming ADOBE

interactive form values

g) Do the same step for binding the PDF_SOURCE.

Steps from c to g are not required for my scenario. as I am using Webdynpro application just to create a portal link if needed in future as well as creating the Adobe Forms within the Webdynpro application itself to generate an Automatic XML code for the ADOBE Form's interface.

h) Now click on the template Source of the Interactive form and make the enabled check box checked and give the height and width parameters.

I) give a name ZQM_REG_TMPL and double click on the name and click on the context button on the popup which comes after double clicking it and assign the data ADOBE which we have imported in the context node (this is required only if you need to handle the data in Webdynpro else skip the clicking on the context button part just click the Use button and that will take you to the Adobe LiveCycle Designer Tool.

STEP 2 Create a RFC Function Module and Generate a web service with No User Authentication

a) Create an RFC Function module with the same fields that you need as input in your adobe forms and all other necessary import export parameters for your RFC for your particular logic.

b) Now go to Utilities->More Utilities->Create Web Service->From the Function Module

c) Now give a name for the webservice

d) Check the Map Name check box

e) Here normally we select the profile LOW but this will result in a pop up for username and password while connecting to the link via the portal. Which was not allowed in my scenario, also if LOW is selected we will not get the option to assign the service user we created for this scenario. So check the No Authentication option

f) Either create as local object or give the package name and click continue and click finish

g) Activate the service definition and then execute the transaction SOAMANAGER from your SAP window it will load the soamanager in a browser window

h) Now click on the Web Service Configuration Link

i) Now give the name of the web service which you created using the wizard, from the list below click on the the web service and click on Apply Selection Button

j) Now click on the Configurations Tab and click on the create button, a pop up will come asking for the name, click on apply settings.

k) Now click on the Edit button and scroll down and check the check box No Authentication

l) Now give the service user name and password in the field and scroll up and click save.

m) Go to the Overview tab and select the binding from the drop down list and click on Open  WSDL document for selected binding or service link.

n) Now the xml code will be opened in a web browser click on save as and save the file with the extension ".wsdl".

STEP 3 Design the Adobe Interface.

a) On the ALD tool window click on the Properties Tab and select the Z ZCI Layout

b) Now go back to Layout tab. Click on the Utilities->InsertWebDynpro Script

c)Now go the layout editor and click on the icon next to Data View tab and select New Data

Connection(This is the part where will import the wsdl file we saved by creating a webservice,it

will import all the fields from your RFC function module into your layout editor window.)

d)From the pop up select the wsdl radio button and click next.

e)Browse to the path of WSDL file and import it and click next.

f)select the wsdl file name and click next

g)Do not check any of the check boxes as we do not need the authentication pop up while

running the adobe form. Click finish

h) now on the left side we can c the new data connection. If you expand it we will get the import

and export parameters of the corresponding RFC function module. You can drag and drop the

necessary fields into the layout designer, Also one button will be automatically generated on the

left side panel along with the data connection. That button upon clicking will call the RFC

function module in runtime, drag and drop the button and rename it as Submit.

i) Now go to the properties tab of the Adobe Form and double click on the interface name, and

select X XML Schema-Based Interface if it is not selected and activate the interface.

STEP 4 JavaScripts In Adobe Forms

In order to completely avoid Webdynpro side abap coding while running the Adobe Form we

need to rely on RFC Function Module and call the function module via JavaScript from the

Adobe Form. As previously mentioned a button will be automatically imported into the screen on

the left pane, and upon clicking the button it will automatically call the webservice.But for my

scenario I need to dynamically fetch customer details and fill two fields upon entering the invoice

number in one field and hitting enter button.

For this scenario I have designed my RFC with all the fields except the customer details fields

as import and customer detail fields as export. The idea is when I hit the enter button i will

trigger a JavaScript to press the submit button which is already present in the design and also i

will set a flag field which I have kept as one of my import fields in the RFC, but the flag field is

invisible in the adobe form layout, so the user can't see the field getting populated.

Inside my RFC I checks for the Flag field value so that I can differentiate the calls triggered from

the adobe form.ie if flag is set then it means it's a call triggered when the user hit the enter

button on the invoice number field and if the flag value is not set then it means that the user has

pressed the submit button with all fields filled and so I can execute the notification Tcode via

BAPI.

a) Click on the Invoice Number Field and press CTRl+SHIFT+F5 to bring up the java script

editor.

Select the event exit from the drop down list next to the "Show" text and select the language

drop down list and chose JavaScript.

The exit even triggers when u hit enter for move the focus from the field after entering the value

using tab button. Here I am setting the flag value first as "x".then i will trigger the submit button

call. After executing the RFC call i will reset the flag value so that when u press the actual

submit button the code inside the RFC will detect it as submit button press since the flag value

is null.

b) Now click on the Flag field that is being dropped into the layout. And select the initialize event

and set the font colour to white.

d) Now set the visibility of the flag field to invisible

f)If you want to trigger the On Submit event in the web Dynpro and do the coding in Webdynpro

side instead of handling via RFC. Drag and drop the submit button from the library Web Dynpro

Native. Upon pressing this button it will automatically call the On Submit event in the

Webdynpro part.

g) The import and export parameter fields can be drag and dropped into the layout according

the logic from the left pane. In this scenario customer name, material number and po number

are export parameters of the RFC , on receiving the Invoice number upon calling the RFC ,it will

return the customer name ,material number and po number back to the adobe form and the

fields will be automatically populated on the screen.

h) Finally save and activate the adobe form, go back to the web Dynpro screen and generate

and Webdynpro application and run it.

Update:Now most of the java script i have explained in this article can be achieved by Action Builder tool.It is available in the newer versions on Adobe Live cycle Designer