SAP Adobe Interactive Form Tutorial - Parte 4

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
7
Share on Facebook
Tweet on Twitter
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.
1
2 IF v_regular_employee = abap_true.
3 v_time_sign = 'GMT - 6'.
4 ELSEIF v_regular_employee = abap_false.
5 v_time_sign = 'GMT - 7'.
6 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.
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.
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
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.
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!!
1
2 if($record.IV_FLAG.value != "X")
3 {
4 this.presence = "hidden";
5 }
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.
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.
1
2 *&---------------------------------------------------------------------*
3 *=======================================================
4 ===============*
5 * YRAM_ADOBE_FORM_PROGRAM4 *
6 *=======================================================
7 ===============*
8 * Project : SAP Adobe Forms Tutorial *
9 * Author : Ramanjula Naidu DARURU (www.SAPYard.com) *
1 * Description : Dynamically Hiding & Displaying a field on the Adobe Form
0 * Layout based on Condition *
1 *=======================================================
1 ===============*
1 REPORT yram_adobe_form_program4.
2
1 *=======================================================
3 ===============*
1 * Selection Screen
4 *=======================================================
1 ===============*
5 PARAMETERS: p_name TYPE name1,
1 p_flag TYPE char1.
6
1 **&&~~ Data Objects
7 DATA: gv_fm_name TYPE rs38l_fnam, " FM Name
1 gs_fp_docparams TYPE sfpdocparams,
8 gs_fp_outputparams TYPE sfpoutputparams.
1
9 CONSTANTS : gv_form_name TYPE fpname VALUE 'YRAM_ADOBE_FORM4'.
2
0 *=======================================================
2 ===============*
1 * START of Calling the Form
2 *=======================================================
2 ===============*
2 *&---------------------------------------------------------------------*
3 **&&~~ Form Processing: Call Form - Open
2 *
4 CALL FUNCTION 'FP_JOB_OPEN'
2 CHANGING
5 ie_outputparams = gs_fp_outputparams
2 EXCEPTIONS
6 cancel = 1
2 usage_error = 2
7 system_error = 3
2 internal_error = 4
8 OTHERS = 5.
2 IF sy-subrc <> 0.
9 " Suitable Error Handling
3 ENDIF.
0 *&---------------------------------------------------------------------*
3 **&&~~ Get the Function module name based on Form Name
1 *
3 CALL FUNCTION 'FP_FUNCTION_MODULE_NAME'
2 EXPORTING
3 i_name = gv_form_name
3 IMPORTING
3 e_funcname = gv_fm_name.
4 IF sy-subrc <> 0.
3 " Suitable Error Handling
5 ENDIF.
3 *&---------------------------------------------------------------------*
6 **&&~~ Take the FM name by execuing the form - by using Pattern-
3 **&&~~ call that FM and replace the FM Name by gv_fm_name
7 **&&~~ Call the Generated FM
3 CALL FUNCTION gv_fm_name
8 EXPORTING
3 /1bcdwb/docparams = gs_fp_docparams
9 iv_name = p_name
4 iv_flag = p_flag
0 EXCEPTIONS
4 usage_error = 1
1 system_error = 2
2 OTHERS = 4.
4 IF sy-subrc <> 0.
3 * Implement suitable error handling here
4 ENDIF.
4 *&---------------------------------------------------------------------*
4
5 *&---------------------------------------------------------------------*
4 *&---- Close the spool job
6 CALL FUNCTION 'FP_JOB_CLOSE'
4 EXCEPTIONS
7 usage_error = 1
4 system_error = 2
4 OTHERS = 4.
9 IF sy-subrc <> 0.
5 * <error handling>
0 ENDIF.
5
1
5
2
5
3
5
4
5
5
5
6
5
7
5
8
5
9
6
0
6
1
6
2
6
3
6
4
6
5
6
6
6
7
6
8
6
9
7
0
7
1
7
2
7
3
7
4
7
5
7
6
7
7
7
8
7
9
8
0
8
1
8
2
8
3
8
4
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!!

SAP Adobe Interactive Form Tutorial - Parte 4

Uploaded by

Copyright:

Available Formats

SAP Adobe Interactive Form Tutorial - Parte 4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SAP Adobe Interactive Form Tutorial - Parte 4

Uploaded by

Copyright:

Available Formats

SAP Adobe Interactive Form Tutorial.

Part IV. Dynamically Hide and Display

As of now, we have learned the basics of SAP Adobe Forms. We learned

Conditions (IF-ENDIF, CASEs, WHILE etc) are an integral part of our

For demonstration purpose:

So our Adobe form would dynamically print ‘GMT – 6’ or ‘GMT – 7’

article. This article is no way linked to previous posts. . The suggestion

Transaction Code: SFP.

Enter the Package name and Save.

IV_NAME is of type NAME1 (Data Element). IV_FLAG is of type

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

Press on create button

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

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

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

Case 2 : When IV_FLAG = ‘ ’.

Selection Screen of the Program:

And we are Programmers!!

Thank you very much for your time!!

You might also like