SAP Tech Pro

SAP Technical Blog
Topprice Price Comparison

How to Integrate Adobe Interactive Forms in Web Dynpro with static and dynamic programming

How to Integrate Adobe Interactive Forms in Web Dynpro with static and dynamic programming

Adobe Document Service (ADS) is the software developed by Adobe, written in Java and C++, embedded in SAP development environment to create forms. The communications between the ABAP stack and Java stack is realised via a Web Service. By using the SM59 transaction, we can see the ADS – HTTP connection to an external server – j2ee engine (Fig).

ADS – HTTP connection to an external server

ADS – HTTP connection to an external server

To ensure that ADS is correctly configured,we can execute the program FP_PDF_TEST_00 by using the transactions SE38.In case the configuration is correct,we receive,as output, the version number of the ADS we have installed (Fig).

Checking if the ADS is correctly configured

ADS – HTTP connection to an external server

To be able to create forms, we have to locally install the Adobe LifeCycle Designer.

Firstly,we create an example where we use a non-interactive PDF form in a WD component.The WD component structure has the structure presented in Fig.

WD component structure

How to Integrate Adobe Interactive Forms in Web Dynpro with static and dynamic programming

In the view layout,we add an InteractiveForm UI element. After this,we have to bind its properties pdfSource and dataSource to the context.The pdfSource shall be bound to an attribute of XSTRING type,in order to be used to store the generated PDF document.

The dataSource property has to be bound to the context node that provides the data for our PDF form. This node can have the cardinality 0. . .1 or 1...1.Under this node,we create other context nodes. In our case, we have only a node named PERSON,cardinality 1...n that has, as dictionary structure,our database table YPERSON defined in the ABAP Dictionary (populate via supply function).The context structure and the view layout are presented in Fig.

Data binding

How to Integrate Adobe Interactive Forms in Web Dynpro with static and dynamic programming

Through the property template Source,we specify the unique name of the Adobe Form we use.We enter the name of the Form and then,by double-clicking,we realise a forward navigation,because this Form does not exist yet. This action will open a pop-up window,where we have to enter the interface name (Fig.)he generated form will use a XML Schema – Based Interface.

Specifying the form interface

How to Integrate Adobe Interactive Forms in Web Dynpro with static and dynamic programming

By using the CONTEXT button,we can use our context node DATASOURCE to create the interface.The structure of this context node is displayed in the tab Data View of Adobe LifeCycle Designer(Fig).

The form builder

The form builder

The context elements can be simply dragged and dropped onto the form layout, or we can use the Table Assistant to design the look of our table(Fig).

Creating form layout

The form builder

Because our node has the cardinality 1...n,the table Header is automatically created. We can manually design the layout of the table by using the tools located in the right side of the Form Builder.

Because our node has the cardinality 1...n, the table Header is automatically created.We can manually design the layout of the table by using the tools located in the right side of the Form Builder.

We can obtain more information about using LiveCycle Designer in the SAP environment by using the Adobe LiveCycle Designer help (through F1) or the menu Help ! Adobe LifeCycle Designer Help. We set a Standard layout type; we activate the Form,the Interface and our WDComponent. Then, we can run the application (Fig).

Runtime

The form builder

For the interactive forms, we must set TRUE the “enabled” property of the InteractiveForm UI element,and FALSE the “read only” property of the same InteractiveForm UI element.Then,we haveto attach an action to its onSubmit event,because the Framework triggers the attached event handler method when the user presses a special Submit button included in the Adobe Designer

We create a very simple example required to show how we can use an interactive PDF form into a view,and how we can import a PDF template into the Adobe Designer. We create a WD Component that has the view context presented in Fig.

View Context structure

clip_image020

The properties of the InteractiveForm UI element are presented in Fig. As we can see,we have an onSubmit event named“Save”,the enabled property is set TRUE and the readOnly property is set FALSE. Because we don’t want to use an activeX control,we left the displayType property as native (default).

InteractiveForm UI element properties

InteractiveForm UI element properties

When the user presses the Submit button,the Framework triggers the event handler method onactionsave from our View Methods tab (Listing).

The onactionsave event handler method


METHOD onactionsave.

DATA: lr_node TYPE REF TO if_wd_context_node,

lr_subnode TYPE REF TO if_wd_context_node,

ls_subnode TYPE wd_this->element_candidate.

DATA: lv_firstname LIKE ls_subnode-firstname,

lv_lastname LIKE ls_subnode-lastname,

lv_telephone LIKE ls_subnode-telephone.

lr_node = wd_context->get_child_node('DATASOURCE').

lr_subnode = lr_node->get_child_node('CANDIDATE').

lr_subnode->get_static_attributes(IMPORTING

static_attributes = ls_subnode).

lv_firstname = ls_subnode-firstname.

lv_lastname = ls_subnode-lastname.

lv_telephone = ls_subnode-telephone.

IF lv_telephone IS INITIAL OR lv_firstname IS INITIAL

OR lv_lastname IS INITIAL.

wd_this->atr_mm->

report_message(message_text ='All the fields are mandatory!'

message_type = 2).

ELSE.

wd_this->atr_mm->report_message(message_text ='Data successfully saved!'

message_type = 0).

ENDIF.

ENDMETHOD.

 

When the end user presses the Submit button,we check if he has entered the required values:first name,last name and his telephone number.In case the required values are correctly entered,we show an information message; otherwise, we inform him that all the fields are mandatory. In this case.we have created our own attribute in the Attribute tab (Fig).

User defined attribute

User defined attribute

To have access to the attribute created by us, we have to use the wd_this self reference.By using the wdDoInit Hook method, we pass the reference to the Message Manager in the ATR_MM attribute:


DATA lr_current_controller TYPE REF TO if_wd_controller.
lr_current_controller ?¼ wd_this->wd_get_api( ).
wd_this->atr_mm ¼ lr_current_controller!get_message_manager( ).

By using the same wdDoInit Hook method, we have set the value of the DATA attribute:sy-datum. In this way, we show the current data into the Form. After this,we use the forward navigation to create our form objects: the YINTERACTIVE form and the YINTERACTIVE interface.Then,we import a PDF template file into our new generated form.

The template file has been created in PowerPoint (one slide) and converted into Adobe PDF (Fig).Through the menu Tools Import, we can perform the importing operation (Fig).

As a result, the PDF template is inserted into our Form (Fig). We simply drag and drop the context elements onto the form layout.After this,we insert a Reset button from the Standard library,and we use the Web Dynpro Native library to insert a Submit button required to submit the data. For the native version (interactive scenario),we have used a Zero Client Installation (ZCI) Layout type and we have inserted a ZCI script by using the menu: Utilities!Insert Web Dynpro Script (or through the FP_ZCI_UPDATE report).

In case we want to use an ActiveX control,we have to set the displayType property as ActiveX,to use the Web Dynpro ActiveX library and a proper Layout type. In this way,the form is displayed via Active Components Framework (ACF).

Structure of PDFTEMPLATE file

Structure of PDFTEMPLATE file

Importing an Adobe PDF File

Importing an Adobe PDF File

We activate the Form,the Interface and our WD Component.Then, we can run the application.

Layout Form

Layout Form

Dynamic Programming

RUNTIME CLASS: CL_WD_INTERACTIVE_FORM

Hereunder,we present a table showing the correspondence between the view designer name and the runtime name,with the proper types,in case of dynamic programming of an InteractiveForm UI element (Table).

CL_WD_INTERACTIVE_FORM

The implementation of a dynamic InteractiveForm UI element (non – interactive) contains the following statements (Listing):

Dynamic creation of an InteractiveForm UI element


DATA lr_interactive_form TYPE REF TO cl_wd_interactive_form. 

lr_interactive_form = cl_wd_interactive_form=> new_interactive_form( 

id ='IFO_NON_INTERACTIVE' 

view = view 

bind_data_source ='DATASOURCE' 

bind_pdf_source ='PDFSOURCE' 

template_source ='YADOBE' 

display_type = cl_wd_interactive_form=>e_display_type-native 

enabled = abap_false 

width ='400px' 

height ='500px' 

). 
 

Add comment

Before Buying, Compare Prices at Topprice.in

Topprice.in