SAP Adobe Interactive Form Tutorial. Part IV

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
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, played with static and dynamic tables. We also made our hands dirty dealing with Date, Time and Floating Fields. at SAPYard always believe in presenting the small tweaks and tips which are useful in real project scenarios. 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.
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.

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!!

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

Check, Save and Activate.

Adobe Form example with Javascript

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.

&———————————————————————
======================================================================

• 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 * 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’
EXCEPTIONS
usage_error = 1
system_error = 2
internal_error = 3
OTHERS = 4.
IF sy-subrc <> 0.

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

YOU MAY LIKE THIS

SAP ABAP Checkpoint Group – Chase the Mysterious SAP Issues with a Smile

Best Practices for SAP ABAP Development: A Comprehensive Guide

4 Useful Tips on ABAP and ABAP on HANA