SAP Adobe Interactive Form Tutorial. Part IV. Dynamically Hide and Display Fields using Javascript in Adobe Form Based on Conditions

SAP ABAP SAPUI5 SAP HANA SAP FIORI
Share on Facebook24Share on LinkedIn10Tweet about this on TwitterShare on Google+1
Please Share!!

Contributed by: Ram Daruru, Cibersites India Pvt Ltd., Bengaluru, India

As of now, we have learned the basics of SAP Adobe Forms. We learned how to create our first Adobe layout and trigger it from the Driver program. We played with static and dynamic tables. We also made our hands dirty dealing with Date, Time and Floating Fields. We at SAPYard always believe in presenting the small tweaks and tips which are useful in real project scenarios. We do know try to throw theoretical ‘Gyan’ (Sanskrit word which roughly translated to Sermons/Preachings) to our readers. In the same line of our thought process, let us start another really useful feature of Adobe forms which every Adobe Programmer should know.

Conditions (IF-ENDIF, CASEs, WHILE etc) are an integral part of our programs and in fact any programming language. After all, everything is not in black and white. There would be exceptions and developers would be asked to handle those exceptions. For example, all employees of your client have to print the time zone as GMT – 6 in the form signature they print from their office. So, 98% of your clients would use GMT – 6 hours as their time but there would be 2 % users who live in another state and they use time as GMT – 7 hours. So for those particular users, you need to put special logic so that their signature would show GMT – 7. Here you have to handle the conditions and print the values according to the conditions.

For demonstration purpose:
Say, in your driver program you have identified the employee’s time zone and you have set the flag v_regular_employee = ‘X’ or blank depending where they work from.

So our Adobe form would dynamically print ‘GMT – 6’ or ‘GMT – 7’ depending on the condition value. And the beauty is, we will write a small Javascript and not the ABAP code as shown above. Doesn’t it sound interesting? ABAPers writing javascript. Welcome back to the curly braces coding. 🙂

PS: There might be many ways to achieve the above scenario. We have kept it simple for the sake of clarity.

I think, we have provided enough teaser for our today’s tutorial. Let’s watch the full movie now.

We assume that you have been following our series step by step. That is the reason we have specified the Part number in each tutorial title so that you can study and learn systematically, part by part. If you are a novice in the field of Adobe forms and you have not checked our earlier series, we would suggest you pause here. Go back to our earlier tutorials and refresh your Adobe skills. At least know the t-codes and Form, Interface, Context and Driver program concepts.

But, if you already now those concepts or you are really interested to know about hiding/displaying fields dynamically, please go ahead with this article. This article is no way linked to previous posts. 🙂 . The suggestion and warning above were just because we wanted the beginners to study sequentially so that they can benefit more.

Transaction Code: SFP.

Enter the Interface name and Create (Interface is mandatory for Adobe form).

Adobe Forms

Enter the short description and Save.

sap adobe form for beginners

Enter the Package name and Save.

Step by Step tutorial on SAP Adobe Form

Let us add our own custom Parameter Name. Select the Import option under Form Interface (left side) and press the Create button (right side) to add an Importing Parameter.

Tutorial on SAP Adobe Form

IV_NAME is of type NAME1 (Data Element). IV_FLAG is of type CHAR1. Save, Check and Activate the Interface.

Go to back SFP Transaction main screen. Create the form.

Adobe Forms for Beginners

Press on create button
Provide the short description and Interface name which you have created earlier.

Step by step to Adobe Form

Enter the Package name and Save.

Drag IV_NAME and IV_FLAG from Interface which we created earlier and drop them to the Context area.

drag from interface to layout

Go to Layout

Go to Data View and Drag and drop the field IV_NAME.

Select the field IV_NAME and go to Palettes->Script Editor.

You will see below screen.

Javascript in SAP Adobe Form

Go to Show option and select form: ready from the drop down list.

Javascript in SAP ABAP

Here you will get a chance to write Javascript or Form Calc Code.

We will go with Javascript for now. Lucky ABAPer!!

Adobe Form example with Javascript

Check, Save and Activate.

Let us Test our product now: 🙂

Case 1 : When IV_FLAG = ‘X’.

Execute the Form or Press F8 which is at the top of your screen. Enter values against IV_NAME and IV_FLAG.

stand alone test of Adobe Form

Press F8. Press on Print Preview button.

How to use Javascript in Adobe Form
Since the script to hide the elements did not get triggered as we passed IV_FLAG = X. Therefore the elements are not hidden in the output.

Case 2 : When IV_FLAG = ‘ ’.
Press F8. Enter values against IV_NAME and pass blank value to IV_FLAG.

Press F8. Press on Print Preview button. This time the Javascript code gets triggered to hide the element. So the Output is a blank page this time.


You can call the above Form from driver program and get the same output. Please check the below-working code.

Selection Screen of the Program:

Output would be same as stand alone test, depending on what you pass on the selection screen . So thought of not consuming more memory of this page. 😛

Try this short hands on Adobe Form and Driver program in your system and have fun.

I am sure, you would need this trick in your kitty for every Adobe Form project. Let your client ask for any exceptions, you are not scared any more. You know how to handle it. Afterall Programmers are the Wizzards. And we are Programmers!! 🙂

Do you have anything to add to this article? Have you faced any issue understanding and working on Adobe Form? Do you want to share any real project requirement or solutions? Please do not hold back. Please leave your thoughts in the comment section.

Thank you very much for your time!!

Useful Tutorials in SAPYard

1. ABAP for SAP HANA Tutorials
2. ABAP Web Dynpro Tutorials
3. GOS Tutorial
4. OOPs ABAP Tutorial
5. HANA Tutorial
6. SAP Netweaver and OData Tutorial
7. SAP Adobe Form Tutorial
8. SAP Fiori Tutorial
9. SAPUI5 Tutorial

Call for Guest Authors and Contributors to write SAP Articles on our page and get noticed and also receive cool Gifts.

Do you have any tips or tricks to share? Do you want to write some articles at SAPYard? Please REGISTER and start posting and sharing your knowledge to the SAP world and get connected to your readers. Please check our simple guidelines for contributing your articles and receiving the gifts.

About the author: Ram Daruru
Ram is a senior SAP Technical Consultant. He has more than 6 years of experience in SAP ABAP. He is also trained in SAP PI. Ram provides training in the area of SAP ABAP in various institutes in Bangalore and also takes Online sessions.

In his leisure, Ram likes to play billiards, play and follow cricket. He is also a vivid reader.

Find more about Ram Daruru at LinkedIn.

If you GENUINELY like our articles then it would be a HUGE help if you subscribed and liked us on facebook. It might seem insignificant, but it helps more than you might think.

Share on Facebook24Share on LinkedIn10Tweet about this on TwitterShare on Google+1
Please Share!!