16:28, 18/11/2022 SAP Adobe Interactive Form Tutorial. Part IV.

Part IV. Dynamically Hide and Display Fields using Javascript in Adobe Form Based on Co…

SAP Adobe Interactive Form Tutorial. Part IV.

Dynamically Hide and Display Fields using
Javascript in Adobe Form Based on Conditions
By Ram Daruru - January 15, 2017

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.

IF v_regular_employee = abap_true.
v_time_sign = 'GMT - 6'.
ELSEIF v_regular_employee = abap_false.

https://sapyard.com/sap-adobe-interactive-form-tutorial-part-iv-dynamically-hide-and-display-fields-using-javascript-in-adobe-form-based-on-conditions/ 1/12
16:28, 18/11/2022 SAP Adobe Interactive Form Tutorial. Part IV. Dynamically Hide and Display Fields using Javascript in Adobe Form Based on Co…

v_time_sign = 'GMT - 7'.

ENDIF.

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).

Enter the short description and Save.

https://sapyard.com/sap-adobe-interactive-form-tutorial-part-iv-dynamically-hide-and-display-fields-using-javascript-in-adobe-form-based-on-conditions/ 2/12
16:28, 18/11/2022 SAP Adobe Interactive Form Tutorial. Part IV. Dynamically Hide and Display Fields using Javascript in Adobe Form Based on Co…

Enter the Package name and Save.

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.

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.

https://sapyard.com/sap-adobe-interactive-form-tutorial-part-iv-dynamically-hide-and-display-fields-using-javascript-in-adobe-form-based-on-conditions/ 3/12
16:28, 18/11/2022 SAP Adobe Interactive Form Tutorial. Part IV. Dynamically Hide and Display Fields using Javascript in Adobe Form Based on Co…

Press on create button

Provide the short description and Interface name which you have created earlier.

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.

Go to Layout

https://sapyard.com/sap-adobe-interactive-form-tutorial-part-iv-dynamically-hide-and-display-fields-using-javascript-in-adobe-form-based-on-conditions/ 4/12
16:28, 18/11/2022 SAP Adobe Interactive Form Tutorial. Part IV. Dynamically Hide and Display Fields using Javascript in Adobe Form Based on Co…

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.

https://sapyard.com/sap-adobe-interactive-form-tutorial-part-iv-dynamically-hide-and-display-fields-using-javascript-in-adobe-form-based-on-conditions/ 5/12
16:28, 18/11/2022 SAP Adobe Interactive Form Tutorial. Part IV. Dynamically Hide and Display Fields using Javascript in Adobe Form Based on Co…

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

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

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

if($record.IV_FLAG.value != "X")
{
this.presence = "hidden";
}

https://sapyard.com/sap-adobe-interactive-form-tutorial-part-iv-dynamically-hide-and-display-fields-using-javascript-in-adobe-form-based-on-conditions/ 6/12
16:28, 18/11/2022 SAP Adobe Interactive Form Tutorial. Part IV. Dynamically Hide and Display Fields using Javascript in Adobe Form Based on Co…

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.

Press F8. Press on Print Preview button.

https://sapyard.com/sap-adobe-interactive-form-tutorial-part-iv-dynamically-hide-and-display-fields-using-javascript-in-adobe-form-based-on-conditions/ 7/12
16:28, 18/11/2022 SAP Adobe Interactive Form Tutorial. Part IV. Dynamically Hide and Display Fields using Javascript in Adobe Form Based on Co…

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.

https://sapyard.com/sap-adobe-interactive-form-tutorial-part-iv-dynamically-hide-and-display-fields-using-javascript-in-adobe-form-based-on-conditions/ 8/12
16:28, 18/11/2022 SAP Adobe Interactive Form Tutorial. Part IV. Dynamically Hide and Display Fields using Javascript in Adobe Form Based on Co…

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.

*&---------------------------------------------------------------------*
*======================================================================*
* YRAM_ADOBE_FORM_PROGRAM4 *
*======================================================================*
* Project : SAP Adobe Forms Tutorial *
* Author : Ramanjula Naidu DARURU (www.SAPYard.com) *
* Description : Dynamically Hiding & Displaying a field on the Adobe Form
* Layout based on Condition *
*======================================================================*
REPORT yram_adobe_form_program4.

*======================================================================*
* Selection Screen
*======================================================================*
PARAMETERS: p_name TYPE name1,
p_flag TYPE char1.

**&&~~ Data Objects

DATA: gv_fm_name TYPE rs38l_fnam, " FM Name
gs_fp_docparams TYPE sfpdocparams,
gs_fp_outputparams TYPE sfpoutputparams.

CONSTANTS : gv_form_name TYPE fpname VALUE 'YRAM_ADOBE_FORM4'.

*======================================================================*
* START of Calling the Form
*======================================================================*
*&---------------------------------------------------------------------*
**&&~~ Form Processing: Call Form - Open

https://sapyard.com/sap-adobe-interactive-form-tutorial-part-iv-dynamically-hide-and-display-fields-using-javascript-in-adobe-form-based-on-conditions/ 9/12
16:28, 18/11/2022 SAP Adobe Interactive Form Tutorial. Part IV. Dynamically Hide and Display Fields using Javascript in Adobe Form Based on Co…

*
CALL FUNCTION 'FP_JOB_OPEN'
CHANGING
ie_outputparams = gs_fp_outputparams
EXCEPTIONS
cancel = 1
usage_error = 2
system_error = 3
internal_error = 4
OTHERS = 5.
IF sy-subrc <> 0.
" Suitable Error Handling
ENDIF.
*&---------------------------------------------------------------------*
**&&~~ Get the Function module name based on Form Name
*
CALL FUNCTION 'FP_FUNCTION_MODULE_NAME'
EXPORTING
i_name = gv_form_name
IMPORTING
e_funcname = gv_fm_name.
IF sy-subrc <> 0.
" Suitable Error Handling
ENDIF.
*&---------------------------------------------------------------------*
**&&~~ Take the FM name by execuing the form - by using Pattern-
**&&~~ call that FM and replace the FM Name by gv_fm_name
**&&~~ Call the Generated FM
CALL FUNCTION gv_fm_name
EXPORTING
/1bcdwb/docparams = gs_fp_docparams
iv_name = p_name
iv_flag = p_flag
EXCEPTIONS
usage_error = 1
system_error = 2
internal_error = 3
OTHERS = 4.
IF sy-subrc <> 0.
* Implement suitable error handling here
ENDIF.
*&---------------------------------------------------------------------*

*&---------------------------------------------------------------------*
*&---- Close the spool job
CALL FUNCTION 'FP_JOB_CLOSE'

https://sapyard.com/sap-adobe-interactive-form-tutorial-part-iv-dynamically-hide-and-display-fields-using-javascript-in-adobe-form-based-on-conditio… 10/12
16:28, 18/11/2022 SAP Adobe Interactive Form Tutorial. Part IV. Dynamically Hide and Display Fields using Javascript in Adobe Form Based on Co…

EXCEPTIONS
usage_error = 1
system_error = 2
internal_error = 3
OTHERS = 4.
IF sy-subrc <> 0.
* <error handling>
ENDIF.

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.

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.

https://sapyard.com/sap-adobe-interactive-form-tutorial-part-iv-dynamically-hide-and-display-fields-using-javascript-in-adobe-form-based-on-conditio… 11/12
16:28, 18/11/2022 SAP Adobe Interactive Form Tutorial. Part IV. Dynamically Hide and Display Fields using Javascript in Adobe Form Based on Co…

Ram Daruru
https://sapyard.com/

Ram is a senior SAP Technical Consultant. He has more than 7 years of experience in SAP ABAP. He is also
trained in SAP HANA and Odata. 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 him on LinkedIn.

https://sapyard.com/sap-adobe-interactive-form-tutorial-part-iv-dynamically-hide-and-display-fields-using-javascript-in-adobe-form-based-on-conditio… 12/12