Migrating SAP Smart Forms to Adobe Forms

(1)

Migrating SAP Smart forms to

Adobe Forms:

By Phani Diwakar, YASH Technologies

This document gives an idea about migration of a smart form to an interactive form.

Step1: Go to transaction code SMARTFORMS and select the smart form to be converted into

print adobe form.

Here the form name is ZTEST1.

Step2: Go to the next screen by clicking display button.

(2)

Step3: Output of the smart form ZTEST1 is:

Step4: Now go to Utilities-àMigration--àInteractive Form-àExport in the initial screen of the

smart form as shown below.

You will get popup.

(3)

Step6: You will get settings window as shown below.

Select the necessary check boxes.

(4)

Select ‘OK’ button. It asks for package and provides the package. Save it.

Step7: Now go adobe form initial screen. Provide the interface name as mentioned above.

Step8: Go to properties tab. You get the default interface type is ‘Smart forms-Compatible Interface’ as shown.

(5)

Activate the interface and come out to initial screen.

Step9: Now provide the form name mentioned above in the initial screen.

(6)

Delete the unnecessary empty folder from the context menu. Now,

Step11: Go to layout tab,

(7)

When you try to activate the form, it gives some error message as ‘Unknown Layout Type’. Change the layout type to Standard Layout as shown.

Activate the form and execute it

(8)

(9)

17. Demo scenario on Adobe

Interactive Forms using ABAP

WebDynpro - Part1:

By G.K.Akbar, The Washington Post

I have created a table ‘ZDEPT’ with just three fields; I will be creating an Adobe form for these three fields and will be updating this table using ABAP Web Dynpro framework.

(10)

(11)

Assign a package to the application or save as a local object

(12)

(13)

(14)

(15)

(16)

(17)

(18)

(19)

Give the name of the node as ‘ZDEPT’ and Dictionary structure as ‘ZDEPT’ and press the button ‘Add Attribute from Structure’.

(20)

(21)

(22)

(23)

(24)

You can see all the nodes that we have created; your screen should appear like the one shown below.

(25)

Go to the Layout tab of the ‘MAIN VIEW’ and create a place holder for the adobe form, Right click on the ‘ROOTUIELEMENTCONTAINER’ select ‘insert Element’ from the context window as shown below.

(26)

Enter the details in the POPUP window, give the name of the place holder as ‘ADOBE’ and type ‘InteractiveForm’ as shown below.

(27)

You can see the placeholder ‘ADOBE’ being created, check the CHEKBOX enabled in the property list, this is a required entry for an interactive form, (an activex control ‘Active Control Framework’ will be automatically downloaded on to the client from the server when the web page is first called). Increase the height to 500px and width to 500px as shown below.

(28)

Click on the button in the property list for the property ‘pdfSource’ and select the node ‘PDF_SOURCE’ from the context window.

(29)

In the property List for ‘template Source’ property give the name of the adobe form ’ZADOBE’ that we will be creating during this session and double click on it.

(30)

In the POPUP window, give the adobe form interface name ‘ZADOBE’ as shown below and press on the ‘Context button’ as shown below.

(31)

(32)

(33)

(34)

You can see the Adobe form application with our web dynpro context node ‘ZDEPT’ being mapped to the context of the Adobe form in the Data view tab.

(35)

Just Drag and Drop the ‘ZDEPT’ Node on to the form, in the subform tab of the object make the content as ‘Flowed’ as shown below

(36)

(37)

(38)

(39)

Now save and just activate the Form and the interface as shown below.

Go to the properties page of the form and double click on the interface ‘ZADOBE’ you can see the ‘XML Schema’

(40)

You can see the ‘XML Schema’ interface (You can have three types of interfaces ‘Abap dictionary interface, Smart form compatible interface and XML interface) for interactive forms using WebDynpro you have to use the XML Schema interface.

(41)

(42)

(43)

(44)

Go to the ‘Main View’ layout tab and select the node ‘ADOBE’ and in the property list Under Events click on the create button for the event ‘onsubmit’ as shown below

(45)

(46)

Go to the Actions tab of the ‘MAIN_VIEW’ you can see the Action ‘Click’, double click on the action ‘CLICK’.

(47)

You can see the Method ONACTIONCLICK. Here you can code your business logic, you can call a BAPI or a function module based on the requirement. We are going to code for inserting the values into the table zdept, the values will come from our adobe form.

Copy the below code and paste it in the method.

method ONACTIONCLICK . data:

Node_Adobe type ref to If_Wd_Context_Node, Node_Zdept type ref to If_Wd_Context_Node, Elem_Zdept type ref to If_Wd_Context_Element, Stru_Zdept type If_Main_View=>Element_Zdept .

data wa_zdept type zdept.

* navigate from <CONTEXT> to <ADOBE> via lead selection

Node_Adobe = wd_Context->get_Child_Node( Name = IF_MAIN_VIEW=>wdctx_Adobe ). * navigate from <ADOBE> to <ZDEPT> via lead selection

Node_Zdept = Node_Adobe->get_Child_Node( Name = IF_MAIN_VIEW=>wdctx_Zdept ). * get element via lead selection

Elem_Zdept = Node_Zdept->get_Element( ). * get all declared attributes

(48)

Elem_Zdept->get_Static_Attributes( importing Static_Attributes = Stru_Zdept ). wa_zdept-DEPTNO = Stru_Zdept-deptno. wa_zdept-DNAME = Stru_Zdept-dname. wa_zdept-LOC = Stru_Zdept-loc. insert into zdept values wa_zdept. endmethod.

Your Screen should look like the one shown below.

(49)

Create a Web dynpro application as shown below. Just right click on the node ‘ZADOBE’ and from the context window select createàWeb Dynpro Application.

(50)

(51)

(52)

Go to the ‘MAIN_VIEW’ Actions tab and keep a session break point in the code, to just see if our code is being executed when we submit the data from the adobe form.

(53)

Now we will test the application, right click on the node zadobe and select ‘test’ from the context window.

(54)

(55)

You can see the Adobe form that we have designed, enter the data as shown below and press the submit button. (As I said earlier an activex control will be installed on to the client machine, you can see the activex control in the internet explore go to the menu: ToolsàInternet optionsàgo to the programs tab àPress button Manage add-ons.

You can see an activex control named ‘SAP ACF’, if you don’t have this control you will not see this page: Note you need to have adobe acrobat reader 7.1 installed, I have used version 9, the activex control was not working properly so down graded my adobe reader to 7.1)

(56)

Press F8 to continue.

(57)

(58)

18. Demo scenario on Adobe Forms using ABAP WebDynpro - Part 2

By G.K.Akbar, The Washington Post

In the earlier example, we have created a WebDynpro application to populate the data into the custom table ZDEPT. In this, we would display the data from the ZDEPT using ABAP WebDynpro.

(59)

Create a table type ‘ZDEPTTBL’ for table ‘ZDEPT’

(60)

Select the Interface type as ‘ABAP Dictionary-Based Interface’, this time we are not going to use the ‘XML schema based interface’, this is to demonstrate that we can make use of any of the existing forms inside the Web Dynpro.

(61)

Create Transport for the Interface

Enter the Import parameter ‘ZDEPT’ and type ‘ZDEPTTBL’. Save and activate the interface

(62)

Create the form ‘ZDEPFRM’

Enter the Interface Name as ‘ZDEPTINF’

(63)

(64)

Drag and drop the Node ‘ZDEPT’ onto the context

Go to the Layout tab and Drag & Drop the ‘ZDEPT’ node on to the form layout, Save and Activate the form

(65)

You can also create a Report program (Print Program) and call the above mentioned form, but we are going to write the print program logic in the Web Dynpro.

(66)

Press ‘Yes’ to create the object

Enter the details as show below and press enter

(67)

Save and enter a workbench request

You can see the Component Controller, Interface controller and window being created

(68)

(69)

Give the Name of the View as ‘MAIN_VIEW’

Go to the layout tab of the ‘MAIN_VIEW’ and create a place holder for the adobe form as shown below

(70)

Give the name of the node as adobe and type Interactive form

In the properties list set the Height and width and the template source as ‘ZDEPFRM’ this is the actual name of the adobe form which we have created earlier, you can see the interface context is automatically mapped to the data source.

(71)

You can see the mapped data source in the context tab of the ‘MAIN_VIEW’

(72)

We are going to write the print program’s logic in this method, we are not going to use the standard function modules that we use normally in the Report print program such as

FP_JOB_OPEN, FP_FUNCTION_MODULE_NAME, FP_JOB_CLOSE.

(73)

method WDDOINIT . data:

Node_Zdepfrm type ref to If_Wd_Context_Node,

Elem_Zdepfrm type ref to If_Wd_Context_Element, Stru_Zdepfrm type If_Main_View=>Element_Zdepfrm ,

Item_ZDEPT like Stru_Zdepfrm-ZDEPT, i_dept type zdepttbl.

* navigate from <CONTEXT> to <ZDEPFRM> via lead selection Node_Zdepfrm = wd_Context->get_Child_Node

( Name = IF_MAIN_VIEW=>wdctx_Zdepfrm ). * @TODO handle not set lead selection

if ( Node_Zdepfrm is initial ). endif.

* get element via lead selection

Elem_Zdepfrm = Node_Zdepfrm->get_Element( ). * @TODO handle not set lead selection

if ( Elem_Zdepfrm is initial ).

Elem_Zdepfrm = Node_Zdepfrm->create_element( ). endif.

select * from zdept into table i_dept. Item_Zdept = i_dept.

* get single attribute

Elem_Zdepfrm->set_Attribute( exporting Value = Item_Zdept Name = `ZDEPT` ). Node_Zdepfrm->bind_element( Elem_Zdepfrm ). endmethod.

(74)

(75)

(76)

(77)

(78)

(79)

Logon with you credentials enter the username and password.

(80)

(81)