Before we start let me tell you some advantage of the Adobe forms :
- It overcomes the drawbacks of paper based forms like it prone to errors, quickly outdated and as it requires manual data entry that leads to inaccurate data.
- Forms can be filled in advance automatically with specific data from SAP applications and then sent to the correct recipients using secure methods
- Automatic consistency checks for forms
- Activate enhanced functions such as comments
- Digital signatures and form certification.
These points are enough to make your customer ready to implement Adobe forms in his SAP Systems or Migrate all the SAP Scripts and smart Forms into Adobe Forms (I know many of the Developer will not likes this who are Genius in SAP Script / Smart Forms ).
This article will cover the small tutorial about how to make a WebDynpro for ABAP Application with interactive adobe forms.
Step1 :
Go to Transaction SE80 and create a Webdynpro for ABAP Application.
Name it as ZT_RAJ_INTERACTIVE ( Note : Better you use your Girl Friend/ Boy Friend’s name to impress !!!! )
Step 2 :
Double click on the COMPONENTCONTROLLER and go to the Context of it.
Right click on the CONTEXT and create a Node.
Give the name as ADOBE_DATA, As shown in the below screen Shot.
Step 3:
Right click on the Node ADOBE_DATA and create an attribute named INPUT_NO which is of type NUMC10.
Same way create one more attribute in the same node ADOBE_DATA as OUTPUT_NO of type NUMC10.
Step 4:
Go to the MAIN view (Double click on the MAIN view ). Drag the ADOBE_DATA from the COMPONENTCONTROLLER to the CONTEXT of your MAIN View.
(Note : it is good programming habit to declare the DATA ( NODE ) in component controller and drag it to the respective VIEW. This will help to pass that data through different views)
Step 5:
Go to Layout and Right click on the ROOTUIELEMENTCONTAINER and add an element TRAY_FORM of type tray.
Double click on the CAPTION and give some Sweet Text like “Interactive Forms “ which you want to Display as a header on Tray.
Step 6:
Right click on the Tray you have created and Insert an Element Called INTERACTIVEFORM.
Give a name as INTERACTIVE_FORM.
Step 7 :
Right click on the ROOTUIELEMENTCONTAINER and Inert Element named Display_no which is of type INPUTFIELD.
Step 8:
This DISPLAY_NO will be used to display the Number which you enter inside the Form.
To do this we need to bind this with OUTPUT_NO of our MAIN view’s context.
Double click on the DISPLAY_NO UI element and click on the Binding Property of it.
Select the OUTPUT_NO and click ENTER.
Step 9:
Double click on the INTERACTIVE_FORM.
Select the Property “DATA Source” and click it’s right side button to give the data source for our form.
Select the ADOBE_DATA Node and select ENTER Button.
Also Check the enabled check Box for it. It requires to make the ADOBE Forms interactive.
Step 10 :
Select it’s Property template Source and Enter any name for your ADOBE FORM.
Here we have use name as ZT_RAJ_INTERACTIVE_FORM. Press ENTER.
It will ask you the INTERFACE name for it. Give name as ZT_RAJ_INTERACTIVE_INTERFACE and click on the button CONTEXT.
(Note: you can create your own data for the interface but it is good to create it from our WEBDYNPRO CONTEXT as it will make your work easy)
Select your ADOBE_DATA node and press ENTER.
STEP 11 :
It will direct you to FORM Builder .(if it does not start just double click on the INTERACTIVE_FORM in your layout).
Here you can see the DATA View on the left side with your CONTEXT automatically. Drag the INPUT_NO and drop it in the Design View. Change the Description of the field according to your wish i.e. Enter Order.
As per the requirement we also need one SUBMIT Button. Here we will be using native type of Form so go to the Object Library and SELECT SUBMIT Button.
Step 12:
This step is very important:
Go to the Property tab of your Form and select the layout as ZCI Layout.
Go to UTILITES->Insert Web Dynpro Script.
This is necessary to make your INTERACTIVE FORM Visible on your Screen.
Step 13 :
The Button which you have created in your FORM can be linked with EVENT in Webdynpro for ABAP.
To do this Double click on the INTERACTIVE_FORM and click on the Create ICON which is just beside the OnSubmit Property.
IT will ask you the ACTION name .Give the name as SUBMIT.IT will intern create a method called ONACTIONSUBMIT.
Step 14 :
Go to the Methods tab of your MAIN View and Select the method ONACTIONSUBMIT.
Put the below code inside it.
(Note: As we have already mapped the INPUT_NO with the Forms field the number is already reached till the INPUT_NO of our MAIN view’s CONTEXT. Now we need to READ this ATTRIBUTE and put that DATA to OUTPUT_NO ATTRIBUTE . The below code is serving that purpose.)
data : node_data type ref to if_wd_context_node.data : in_no(10) type n.
node_data = wd_context->get_child_node( name = ‘ADOBE_DATA’ ).
node_data->get_attribute( EXPORTING name = ‘INPUT_NO’ IMPORTING value = in_no ).
node_data->set_attribute( exporting name = ‘OUTPUT_NO’ value = in_no ).
Step 15:
Right click on your Webdynpro Component and create application named ZT_RAJ_INTERACTIVE.
Step 16 :
In this step you need to pray that you can see your interactive formJ.
Any way Execute your application ZT_RAJ_INTERACTIVE .Enter the value in the form “Enter Order “field and click on the Submit button. Check the below screen shot.
In case you need to put more that two buttons let say
SUBMIT which will submit the form and
CLEAR which will clear the the input field.
The problem here is you can map only one action with the interactive form element which you have declared in your MAIN View layout.
So how you will achieve this requirement ???
Don’t worry there are many ways to achieve this.
Follow these steps:
- Create one more element in your context node adobe_data of main view name it as BUTTON. so your adobe_data will have three elements input_no , output_no and BUTTON.
- Go to your adobe form (SFP) and drag the button element into layout as text field and make it invisible
- Create one more button as CLEAR just like a SUBMIT button (You can copy paste the SUBMIT button to make it easy)
- Now click on the SUBMIT button and open script editor.
- Write a code in mouseEnter event in formcalc language (You can also use javascript but syntax will be different). ADOBE_DATA.BUTTON = “SUBMIT”
- Same way for the CLEAR button write it as ADOBE_DATA.BUTTON = “CLEAR”
- Now in your submit method (method of the action which is link with interactive forms on submit property) you can read ADOBE_DATA node’s BUTTON element which will tell you which button is clicked.
- See the below image for reference.
malarmukilan
the tutorial was very good, please send me all the tutorial for abap
prabhakar reddy
i want to know how to do interactive forms by offline
Raj
Hi Prabhakar,
You can try script for this, Even we are preparing Article for this shortly.
thanks
Ravichandra
Are there any ABAP Certification Dumps ? please
Raj
Hi ,
Kindly check the Below Article
http://sapignite.com/my-journey-to-abap-certification/
Regards,
Krishna
Hi,
This sample helped me a lot.
Regards,
Krishna
arun
Hi Raj,
Excellent Blog, Im having one doubt. If we have a single button on the Interactive form we will be writing the code in onsubmit button of the interactive form UI element, But if we have more than one button and want to have more actions to be done for example clear fields button or Cancel buttons where i have to write the codes.
Regards
Arun.P
Raj
Hi Arun,
One way you can do this is by creating a context attribute “buttonId” type integer. Pass this to the adobe form and bind it to a field and make that field invisible. All 3 buttons can be submit buttons but in each of them on their onClick event you can use java script to specify different values for this field (e.g. 1 – Approve , 2 – reject, 3 – discard). Then in the onSubmit event of the form in webdynpro just read this context attribute value and after just have an If..else or case… clause to do different processing.
Thanks…
Raj
SAP Ignite
Arun.P
Hi Raj
I tried with your logic what you told but still im not able to achieve it. It will be good to have a Tutorial with 2 or 3 buttons in AIF and trigger actions based on it.
waiting for your wonderful reply.
Regards
Arun.P
Raj
Hi Arun,
Check the updated article and get back if i am not clear
Thanks.
SAP Ignite
Arun.P
Hi Raj,
Thank you for the updated post it will be really useful for all the developers using the AIF.
One small doubt why we have to drag the Button attribute inside the form and make it as invisible. and the button data type can be of type string or some specific data type?
Regards
Arun.P
Raj
Hi Arun,
why we have to drag the Button attribute inside the form and make it as invisible
We are using java script / formacalc here to receive the event when user clicks on the button.
Now you can directly access the interface elements so what we need to do is to drag the button element and
put it into layout.(As it is of no business use i mark it as invisble)
and the button data type can be of type string or some specific data type?
you can create anytype . integer is also fine.
thanks.
SAP Ignite
Wayne
Hi Raj:
I followed your turoiral and created the application. Everything is ok, but when I enter value in the input field, and press the button, The whole form will refresh and the value would be initialized. Also no value is passed to the output field. I don’t know why.
Thanks
Wayne
Raj
Hi Wayne,
check the Step 14.
Put a break point inside the Submit function and check whether value is coming from the context.(make sure name is in capital letters and check the binding of the fields).
In case value is not coming from the context delete your from and create it again.make sure you use the context of your main view for creating the interface.
Get back if i am not clear or it is not working out.
Thanks,
SAP Ignite.
Rathi
Hi Raj,
I created IF and WD by following your steps.But I see that no data is passed from IF to WD but if I pass data from WD to IF its getting correctly(passed in init event).I am using SAP BASIS 700 version.So installed note 1322323.Version of js container is 800.20070708051308.406522.403406 – ContainerFoundation_JS
.But also now problem exist.I am using adobe reader 10.0.Some sites say its necessary to use adobe reader 7.1.Is that the problem ? Your reply will be more helpful.
Thank you
Rathi
Rathi
Hi Raj,
I resolved.I deleted the form and created again.
Now its working perfectly.
I didnot understand why it didnot work before.One difference is js container
version number is 800.20090205121016.525164.508401.
Before it was 800.20070708051308.406522.403406 .
Please could you tell from where this version is taken and does this version resolved my problem ? Thank you very much for posting such detailed examples.
reg
Rathi
Raj
hi Rathi,
To solve this issue SAP says that SP up gradation required to SP20
So as a solution which you have already done is apply the composite snote 1322323.
Now the composite OSS note touches the JS container.bcoz of that it finds the version difference as per my understanding.As ur application was already created though u have implement the OSS note it was not working.
But when u create a new one it works.So i think this is the issue.
Thanks.
sandeep
Hi raj,
I followed the steps mentioned above,i did upto step no 15 after that when i test my webdynpro application am getting an error,can u please tell me the solution for this
Error when processing your request
What has happened?
The URL http://sapecc6.sap.com:8000/sap/bc/webdynpro/sap/zdemo_interactive_aform/ was not called due to an error.
Note
The following error text was processed in the system DEV : Function module does not exist
The error occurred on the application server sapecc6_DEV_00 and in the work process 0 .
The termination type was: ERROR_MESSAGE_STATE
The ABAP call stack was:
Module: %_HTTP_START of program SAPMHTTP
What can I do?
If the termination type was RABAX_STATE, then you can find more information on the cause of the termination in the system DEV in transaction ST22.
If the termination type was ABORT_MESSAGE_STATE, then you can find more information on the cause of the termination on the application server sapecc6_DEV_00 in transaction SM21.
If the termination type was ERROR_MESSAGE_STATE, then you can search for more information in the trace file for the work process 0 in transaction ST11 on the application server sapecc6_DEV_00 . In some situations, you may also need to analyze the trace files of other work processes.
If you do not yet have a user ID, contact your system administrator.
Error code: ICF-IE-http -c: 800 -u: SAPUSER -l: E -s: DEV -i: sapecc6_DEV_00 -w: 0 -d: 20100825 -t: 122723 -v: ERROR_MESSAGE_STATE -e: Function module does not exist
HTTP 500 – Internal Server Error
Your SAP Internet Communication Framework Team
Raj
Hi ,
I think interface of the Adobe form is not activated .
Check your inactive object list and try to activate all the components.
Get back if it does not work .
Thanks
Raj
SAP Ignite.
sandeep
i have activated the interface of adobe form , but the result is stil the same.
Divakar Mamidi
Hi Raj,
All the objects are active like form, Interface, Webdyanpro application. I think this due to basis issue. few of the services are not started.Could you please put this across a basis guy and confirm us the solution for this.Thanks in advance.
Regards,
Divakar Mamidi
vasavi
i want to include digital signature in adobe forms …can anyone suggest me how to do it
Raj
Hi ,
Try to use the signature field from the adobe library.But before that you need to get the third party application to generate the digital signature.
Scripting can be used to invoke it.
check out the link :
http://help.sap.com/saphelp_nw2004s/helpdata/en/18/ecb69017ad4765855425b97f666470/frameset.htm
Get back if you need more info.
Thanks & Regards,
Raj
SAP IGnite
vasavi
I want to create birth certificate for a citizen….can any one suggest me whether it is good to use in adobe form r some other ui elemnets…
Tushar
Hi Raj, Whenever I use utilities->insert webdynpro script, I get the error “Error when inserting Web Dynpro script
Message no. FPUIFB094″also I have only BUTTON AND I NEED TO SPECIFY THE CONTROL TYPE IN OBJECT PALLATE AS 1) REGULAR 2)SUBMIT 3)EXECUTE. When i select SUBMIT I get a warning symboll it says “the submit button is incomplete, return information is required, use the object pallate to specify a return URL”.Waiting for your reply…Amicably yours,Tushar..
st
Hi Raj,
I did but it just won’t interactive in web. Is there any system prerequisite to be done?
I am the first one in this system to do webdynpro, not sure if system has problems.
Thanks.
Raj
Hi ,
If you can able to open the SFP form layout , it should work fine for you
make sure are selecting proper layout for the FORM
and step NO.9 is properly executed
Thanks
SAP IGnite
Raj
st
Raj, I am still not quite clear why you needed to use the tray_form? Can it be interactive without tray_form?
Additionally, the display_no is not been used, what purpose of creating it without using it?
Thanks if you can clear this puzzle up…
Raj
Hello St,
Tray is used to make you guys familiar with the UI elements ( you can very well create the interactive form with out it.
Regarding display_no element: its look like you don’t like that Red suit Girl
check the step-16.When user click on the button entered number should be populated in the display_no field.
Thanks
SAP IGnite
Raj
st
Thanks Raj.
In SFP the form was displayed correctly, except not interactive.
Additionally, you created node display_no at UI root level but it has never been assigned to anywhere. This node is at outside of tray_form.
In my case, this display_no is at outside of tray_form and is indeed editable. However the button Submit is not triggering event…
jonty
Thanks for this post it helped me to clear my doubts regarding the Interactive adobe forms.
Jonty
N
Hi Raj,
Thanks for the tutorial. I have a question – if I have a form sitting in a dyn, passing information into SAP, is it also possible to have those same fields set up to receive/import form information through, for example, an xml file?
Thanks,
N
Pras
Hi Raj,
Brilliant document. Well done.
Really helpful.
Kind Regards.
Pras (UK)
prashanth
good
Manu
Can we migrate SAP scripts to adobe forms, i know we can migrate smartforms but not sure of scripts. Please let me know.
Raj
Hello Manu,
It is possible to do that.. like you can do it from SAP script to smart form.
And Again smart form to ADOBE form.
Disadvantages : You need to work again for the Form layout part as it will not be organised.
In Case if you need to change something for the customer requirement in the adobe forms
i feel it will be very difficult as it will require too much effort as the code will be messy.
I suggest better to develop the FORM again , its little difficult to put the same logic in the ADOBE form
as the flow is totally different.
SO estimate your project keeping all these things into account.
Thanks & Regards,
Raj
SAP IGnite.
Siva Reddy
Hi Raj,
Thank you very much for the tutorial and for the IDES access. I am using miniSAP and trying to create ADOBE form as per the tutorial. I did everything correctly but while activating the adobe form, its asking for the user ID and password for AdobeDocumentServices/Config. Kindly help me on how to get this. I couldn’t activate the adobe form until I provide the user and passwd.
BTW I installed adobe live cycle designer 7.1 on my local machine. Please help.
Raj
Hello siva,
Are you using online free IDES system or you installed the free ABAP development minisap from SDN ?
Incase of the first option i dont think it will be possible.
for the second one you need to install ADOBE life cycle designer too.
thanks
Raj
SAP IGnite
Siva Reddy
Hi Raj,
I am using the free miniSAP system, however I am using it by adding the miniSAP system in the SAP logon. I also installed ADOBE live cycle designer 7.1 in my system. I developed a small adobe form as well as per your demo, however while activating the adobe form, the system is asking for userid/password for the resource-AdobeDocumentServices/Config. Please can you help me where do I setup this user name and password.
Thank you
CCarey
Hi Raj,
First of all, thank you for a very informative and useful tutorial!
I have done a few tutorials and I have followed yours very closely but everytime I test the application, it’s taking 20-30 minutes just to display the form from your example!!
Then, once I had entered in a number, the form hung again and then went blank (well grey really).
Any thoughts as to why this could be happening?
I have looked up SCN/SDN, Notes and ran the various tests but ADS seems to work fine (we also make use of non-interactice Adobe forms which render without any problem).
I am on LiveCycle 9.0 and Netweaver 7.02 and forced to use IE7.
I am utterly baffled so any advice would be greatly appreciated. My suspicion still lies with a problem in the setup.
Thanks!
CCarey.
Pranjali
Hi Raaj,
I have 3 years of experience in SAP ABAP. Now I want to learn SAP Web Dynpro ABAP. So should I go for SAP Web Dynpro Certification? I read somewhere about SAP Teched also. I would appreciate your guidance on this.
Regards,
Pranjali
Raj
Hello Pranjali,
I dont think so we have certification available for Webdynpro for abap.
We do have training course like NET313 etc..
Check out the list of all the certification/courses here : https://training.sap.com/us/en/training-options/certification
Regarding SAP Teched : its in Nov-2012 in Bangalore.
You can do certification there ( It’s direct certification so for associate level you need minimum 1 year Exp )
My suggestion : If you have 3+ exp. in ABAP ,ITs good to learn Webdynpro for ABAP or PI if you want to stuck to technical stuff.
Else you can try for functional certification or courses too.
Thanks
~raj
SAP IGnite.
Rajesh
Hello Raj,
At step 12. after assign Layout type as ZCI Layout, I finished this step. After this step utilities insert web dynpro script is showing me disable. Can i know the reason, where i done a mistake.
Rajesh
I solved this issue.
mahidhar
Hi Raj,
Its a very good article. I tried to work out this article. But when i press submit button, i am getting error saying “Reference error: Containerfoundation_js not defined”. I have checked in hierarchy structure, it doesnt have containerfoundation_js. So i have tried utilities->add webdynpro script. It has added, but when i activate it, i couldnt see this in my heirarchy struc. Please suggest.
Regards,
Mahidhar.
mahidhars
Hi Raj,
I resolved this issue on my own. I have used the Tcode SFP_ZCI_UPDATE to update the template.
sneha
Hi Raj,
The submit button is not clickable when i test the web dynpro component.
I have the ZCI type layout. What am i missing?
Raj
HI sneha,
Is the Button active ?
Thanks & Regards,
Raj
SAP IGnite
Sneha
Hi Raj,whenever I add new attribute to the context node created for form and double click on form template in view layout, it should ask me to update the interface of the form.But, I don’t get an pop up nor it updates new attribute in data view of formIs there any other way to update interface?
Raj
Hi Sneha,
Can you Try from SFP ,updating the interface, i think it should work.
thanks
~Raj
shree
super…………..
Sneha
Hi raj, Thanks for your inputs.But, now we are facing strange issue. I don’t know if this right thread to put the question.Scenario: We use Adobe forms in Netweaver portal to create material master data. User fills all the field s of form and sneds submits the request. in backend, these requests are handled through webdynpro and workflow. Issue: Recently, we added new field to Adobe form layout which resulted into data loss of old requests.Is there any solution for this? We can’t suggest users to process all the existing requests, then only we can proceed to add new field.