Execute URL dynamically by a Button click event using Interactive features of Adobe Forms

Many a times, we have some business requirements where we would like to have editable form or buttons/check boxes in the 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)

IFBA can be used in 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:

◈ 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

How to test configuration?

You can always check if Adobe reader rights credentials are configured correctly by executing a test report given by SAP

FP_TEST_IA_01

If adobe form displays as result of above report and you can edit the form and save, your configuration is working absolutely fine.

◈ Knowledge of creating Adobe forms and scripting.
◈ Basic knowledge of ABAP.

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 ZPB_DISPLAY_DYNAMIC_URL and interface with import parameter IV_URL as follow:

Step 2: Create simple text for instructions and a button for payment as follow:

Now, we need to provide the url which should 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 but we can change the “Control type” attribute of Button object to “Submit” and provide the URL there.

Step 3: Select button “btn_payment” from Hierarchy , go to toolbar, select Palettes and select Object:

Step 4: Select “submit” tab in Object palates and provide the static URL:

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

That’s quite easy without any ABAP code and Java Script code but if we remember our business requirement, we have to pass this URL dynamically from driver program as 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.

Step 6: 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: We have to write our script on “Click” event of button so select “Click” event from available events drop down:

Did you notice? “Click” event is disabled and can’t be selected for this payment 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”.

Step 8: Go to object palates of payment button and select control type “Regular”

Step 9: Now, again if you repeat step 7 and try to select “edit” event, it will be available now.

Step 10: Select “click” event for button “btn_payment” , language as Java script and run at client.

Write the below JavaScript code in script editor:

 data.#subform[0].sbf_content.btn_payment::click - (JavaScript, client)

 var valueUrl = xfa.resolveNode("$record.IV_URL").value;

 xfa.host.gotoURL(valueUrl);

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

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

DATA: gt_details TYPE zpb_test_details,

      gs_details LIKE LINE OF gt_details.

DATA: ie_outputparams TYPE sfpoutputparams,

      i_funcname TYPE funcname.

DATA: fp_docparams    TYPE sfpdocparams.

DATA: fp_formoutput   TYPE fpformoutput.

DATA ls_result TYPE sfpjoboutput.

SELECTION-SCREEN BEGIN OF BLOCK b1 WITH FRAME TITLE TEXT-001.

PARAMETERS: p_form TYPE fpname.

SELECTION-SCREEN END OF BLOCK b1.

SELECTION-SCREEN BEGIN OF BLOCK b2 WITH FRAME TITLE TEXT-002.

PARAMETERS: p_url   TYPE string.

SELECTION-SCREEN END OF BLOCK b2.

CALL FUNCTION 'FP_JOB_OPEN'

  CHANGING

    ie_outputparams = ie_outputparams.

TRY.

    CALL FUNCTION 'FP_FUNCTION_MODULE_NAME'

      EXPORTING

        i_name     = p_form

      IMPORTING

        e_funcname = i_funcname.

  CATCH cx_fp_api_repository.

  CATCH cx_fp_api_usage.

  CATCH cx_fp_api_internal.

ENDTRY.

CALL FUNCTION i_funcname

  EXPORTING

    /1bcdwb/docparams  = fp_docparams

    iv_url             = p_url

  IMPORTING

    /1bcdwb/formoutput = fp_formoutput

  EXCEPTIONS

    usage_error        = 1

    system_error       = 2

    internal_error     = 3.

CALL FUNCTION 'FP_JOB_CLOSE'

  IMPORTING

    e_result       = ls_result

  EXCEPTIONS

    usage_error    = 1

    system_error   = 2

    internal_error = 3

    OTHERS         = 4.

IF sy-subrc <> 0.

* Implement suitable error handling here

ENDIF.

Step 12:

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:

There is a flag in form parameters structure SFPDOCPARAMS called FILLABLE. By default it’s blank so adobe forms are displayed as a print form by default. If we want form to have interactive features, this flag should be set.

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

fp_docparams-fillable = 'X'.

CALL FUNCTION i_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.

Step 14: Now execute the driver program again and check the result:

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