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

  

Saturday, 04 May 2019 14:59

Interactive Adobe. Part 17. How to Execute URL Dynamically by Button Click Event?

Written by  https://sapyard.com/interactive-adobe-part-17-how-to-execute-url-dynamically-by-button-click-event/
Rate this item
(0 votes)

Many a times, we have some business requirements where we would like to have editable form or buttons/check boxes in the adobe form which user can click and

desired action should be executed. Sometimes we also would like to interact with SAP using actions performed by interactive forms.

These kinds of business requirements can be fulfilled using IFBA (SAP Interactive Forms By Adobe). Or simply Interactive Form By Adobe.

IFBA can be usedin 2 scenarios:

  • Offline
  • Online

Online scenarios are majorly used in Web Dynpro Applications where IFBA can be integrated as UI element of web dynpro component.

Offline scenarios can be understood as IFBA using email attachment sent to a customer, customer opens the pdf attachment, fill up the data in the form and submit it.

Prerequisites:

  1. Most important prerequisite is to enable interactive features on ADS. By default, printed Adobe forms can be created and worked upon but for IFBA, Adobe reader rights credentials should be configured on ADS. These reader rights would be provided in “.pfx” file by SAP itself. Please go through the following SAP Notes and request your Basis team for this configuration:

750784, 944221

https://wiki.scn.sap.com/wiki/display/SI/How+to+require+a+Adobe+Credential+for+SAP+Interactive+Forms

How to test configuration of SAP ADS?

You can always check if Adobe reader rights credentials are configured correctly by executing a test report provided by SAP: FP_TEST_IA_01.

If adobe form displays after executing above report, you can edit the form and save then your SAP Adobe ADS configuration is working absolutely fine.

2. Knowledge of creating Adobe forms and scripting.

3. Basic knowledge of ABAP.

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

Business requirement:

In Invoice Form, a button for payment link page should be available so that customers with valid email addresses can get the invoice on their mailbox and can pay the due amount using that button.

Solution:

We will create a simple Adobe Form with some text fields and a button. In form interface, we will create an import parameter IV_URL. From driver program, we can provide the URL information and using JavaScript, we can read this URL in Form and bind to Button click action.

Step 1 – Create an Adobe Form and the corresponding Interface

Create an Adobe form ZPB_DISPLAY_DYNAMIC_URL and interface with import parameter IV_URL as follow:

Step 2 – Design your form as per the requirement

For our case, we are creating a simple text for instructions and a button for payment as follow:

Now, we need to provide the URL whichshould be executed as soon as payment button is clicked.

If we have a static URL (e.g. company website), we don’t need to pass it from driver program/form interface. We can directly handle it in the Adobe Form itself. Just change the “Control Type” attribute of Button object to “Submit” and provide the URL there.

Step 3 – Choose the Button Control Type as Submit

Select button “btn_payment” from Hierarchy. Go to toolbar, select Palettes and select Object -> Control Type -> Submit.

Also Check this: Create your first OData Service

Step 4 – Assign the URL to Button

Select “Submit” tab in Object palates and provide the static URL:

Step 5 – Test the Button with URL Hyperlink

To test the functionality, go to “Preview PDF” and click on Payment Button:

You can see the result as below:

That’s quite easy without any ABAP code and Java Script code. But life is not that easy in real projects. Remember our business requirement?

We have to pass this URL dynamically from driver program. URL for every other customer would be different and has to be determined at run-time. In other words, the payment link URL would be generated differently for each order. So it’s a tricky part and yes, Java Scripts can help us to achieve it.

JavaScripts Saves the Day for an ABAPer

Step 6 – Go to Script Editor of Adobe

Select button and go to script editor (I think with my previous blog, you must know how to access script editor in Adobe forms. If not, please refer that for better understanding about scripting in Adobe forms )

Step 7 – Write JavaScripts code on Click Event

We have to write our script on “Click” event of button. Select “Click” event from available events drop down:

Didyou notice? “Click” event is disabled and can’t be selected for thispayment button.

Reason:Since we selected Control Type of button as “Submit”, system would expect the action statically and that’s why “click” event is disabled.

To enable it, we need to change the Control Type of button as “Regular“.

Also Explore : How to Consume Custom OData in SAPUI5 Application

Step 8 – Change the Button Control Type to Regular

Go to object palates of payment button and select control type “Regular”.

Repeat step 7 and try to select “edit” event, it will be available this time.

Step 9 – Insert the JavaScript code

Select “click” event for button “btn_payment”, language as formcalc and run at client.

Write the below JavaScript code in scripteditor:

1
2
3
<code>varvalueUrl=xfa.resolveNode("$record.IV_URL").value;
xfa.host.gotoURL(valueUrl);</code>

We are done with Form development. Now, another tricky partis passing control parameters for interactive forms.

Step 10 – Call Adobe Form from Driver Program

Create a driver program and call all the Form processing FMs with required control parameters and generate the output.

If you see closely, there is NO interactive feature enabled on button and it would not allow clicking on button. What would be the issue then? We already checked ADS configuration in prerequisites section and its working fine.

Reason:

Thereis a flag in form parameters structure SFPDOCPARAMScalled FILLABLE.

Bydefault it’s blank so adobe forms are displayed as a print form by default.

Ifwe want form to have interactive features, this flag should be set.

Step 11 – Set the FILLABLE Form Parameter to ‘X’

Set the form parameter before calling Form Function Module as follow :

1
2
3
4
5
6
7
8
9
10
11
12
13
<code>fp_docparams-fillable='X'.
CALL FUNCTIONi_funcname
EXPORTING
/1bcdwb/docparams=fp_docparams
iv_url=gv_url
IMPORTING
/1bcdwb/formoutput=fp_formoutput
EXCEPTIONS
usage_error=1
system_error=2
internal_error=3.</code>

Step 12 – Re-test the driver program

Now execute the driver program again and check the output.

If you check the highlighted section on button, you can see a cursor and button is enabled to be clicked. Here we go and get the access to URL which was passed from driver program:

This is an actual real project development. I have used this option in my project where we are sending invoices with due amount to our digital customers. For each invoice, payment landing page URL is generated dynamically so that when customers will click on payment button, they just need to enter their Credit Card details and payment will be captured against that invoice.

A sample of the invoice with payment button sent to customers is as follow:

In my next blog, I will share a business scenario in interactive Adobe forms where end users can fill up details in an editable form and submit it to SAP data base tables. In other words, you are performing a CRUD operation in SAP from an Adobe Form. So, please stay tuned.

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 ourYoutube 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 4730+ 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 Course on Interactive Adobe Forms

Read 28 times

Leave a comment

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