Standard service - a fixed amount of work that is performed at a fixed price.  Post Service

  

Monday, 22 April 2019 14:40

SAP Adobe Form Tutorial. Part XVI. Practical Use Case of FormCalc and JavaScript

Written by 
Rate this item
(0 votes)

In this article, we would demonstrate the usage of SUM inFormCalc and then dynamically change text style using JavaScript in SAP Adobeforms.

The main advantage of using scripting

is that we can improvefunctionality and can get full control over forms at runtime dynamically.

SAP Adobe form supports 2 scripting languages:

  • FormCalc
  • JavaScript

Both scripting languages are having benefits and disadvantages so we can decide based on our requirements which scripting language to be used. In this blog, we will provide few common business scenarios from both the scripting languages.

Please note, we have already published and article on usage of JavaScript in Adobe Form. You may refer it for more clarity.

Also Read: Dynamically Hide and Display Fields using Javascript in Adobe Form Based on Conditions

Prerequisites:

  • Basic knowledge of SAP Adobe form with Tables
  • Basic understanding of JavaScript and FormCalcfunctions
  • ABAP programming skills

Business Requirements:

1. In the detailed statement sent to customers, we would like to display total amount and total units as subtotal at end of all line items.

2. In the description section of a statement, we would like to display header products of the hierarchy as Bold and in different style so that it’s easy to identify the header product in whole statement.

Solution:

We would need to create an Adobe form and Interface withglobal data. We will add some test data in these global data internal tables ininterface “code initialization”and later bind these global internal tables with UI tables in adobe formlayout.

P.S. – We could also achieve this by writing processinglogic in driver program and pass the required internal table as importparameters of adobe form. Since this blog is more on usage of scripts, we havenot considered the best approach for data processing.

Step by Step Process

  1. Create a form interface ZPB_TEST_SCRIPTS usingTCode SFP

2. Create Global Data for Details and descriptions internal table

3. Create global table types ZPB_TEST_DESCR and ZPB_TEST_DETAILS with following structures :

  • Structure for Description
  • Structure for Details

4. Go to code initialization and fill test data in internal tables as follow :

5. Go to transaction SFP and create a new form. Add interface as ZPB_TEST_SCRIPTS

Check this: Create your first OData Service

6. Drag Global data of interface from left side panel to Context of form in right side panel

7. Now Goto Layout of Adobe form and create table using these context data mapped with Global variables in interface. Please follow the below steps :

a. Go to Data View Palettes from toolbar

b. Select GT_DETAILS table as highlighted and drop on Detail page of form layout

c. You would see a table created and automatically binded with GT_DETAILS.

d. Create a Footer Row for “Subtotal”. For that, goto Hierarchy palettes, Expand GT_DETAILS Table and create a new row after DATA. Go to Object Palettes for the new row ( DATA[1] )and change the row type as “Footer”.

Please note that if we will createtable element using table assistant , Footer will be created automatically.Since i went through Data view palettes, i had to create footer manually.

Now, we will do the interesting step. Write Formcalc Script to calculate SUMfor all line item.

8. Select text field in footer under NET_UNITS and go to script editor

9. Now go to Show Events drop down and you will find all events are greyed out. WHY?

  • This is because for few UI fields, scripting is not allowed and that’s why all the eventsare in display mode only. To enable the events and write the script logic, weneed to change the type of UI element from “Text” to “text Field”.

Check the below image. When theType is Text, the Show events are grayed out.

When we changed it to Text Field, all the events gotenabled.

10. Change the UI type for NET UNITS and TOTAL ROYALTIES fields in Footer row as “Text Field”

Youcan notice that for highlighted fields above, border color has been changed to red and for other fields, it remained blue. It is an indicator to identify text UI or textField UI.

Now, repeat the step 8 and 9 for selectingappropriate event to write a scripting logic.

Do you remember our business requirement?We would like to calculate the sum of all the line items and display in footerrow as subtotal.

11. Select Calculate event from all events dropdown , lang. as Formcalc and write the below code :

12. Now, create a test driver program to generate the result pdf ( please refer the previous blogs to create a driver program for testing Adobe forms ) and generate a pdf with subtotal :

By using just a single SUM function and without any ABAP logic, we can calculate the total of line items in a table in Adobe forms and print accordingly using FormCalc scripting.

Also Explore : How to Consume Custom OData in SAPUI5 Application

There are also other functions available inFormCalc like Average, Percentage etc

Time to play around with some JS (JavaScript) coding in script editor

13. Please repeat step 7 from a-c and create another table for description using context table GT_DESCRIPTION from data view.

Remember another businessrequirement? We need to set header Product in the description field as Bold andwith different text style and items as italic based on BOLD/ITALIC settings atruntime.

14. Select DATA row of GT_DESCRIPTION table from Hierarchy and go to script editor.

15. Select “form : ready” event , language as “javascript” and write the below code :

  • 16. Run the driver program created in step 12 and check the results:

For text to be changed in Italic based on itlalic flag,repeat steps from step 15 :

17. Select “form : ready” event , language as “javascript” and write the below code :

Result from Driver program :

The idea of this article was to provide real case examples which developers can emulate in their SAP landscape. After going this tutorial, anyone can try out in their own system and make use of Java scripts and FormCalc scripting languages in Adobe forms. In case, you still face issue, please feel free to write your questions in the comments section below or contact us directly at This email address is being protected from spambots. You need JavaScript enabled to view it..

If you think our page is helpful, do not forget to share our links with your friends, colleagues and team members. Do like our facebook page and follow us at twitter and instagram. Please subscribe to our youtube channel for free end to end video courses.

Your feedback is most welcome. Please, please leave your comments below.

We have a very active Telegram (App) SAP Technical Group with more than 4630+ SAP Technical Practitioners from 6 Continents of the SAP World. Please join it using below link.
Telegram SAP Technical Discuss Group. You need to install the Telegram App first on your mobile device. Once you have it on your mobile, you can join the group and also access it from the Web on your computer and laptop.

Free Step by Step Core Data Services Exercises

Read 121 times

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.