Interactive Forms(Using webdynpro ABAP)

Types of Interactive forms• Online

The user is logged on to the SAP system when he or she fills out the form.

• OfflineThe user is not logged on to the SAP system when he or she fills out the form. Once the form has been filled out, the user sends it to the issuer of the form, for example by e-mail. The SAP system of the issuer then extracts the data from the form.

Webdynpro Overview• Webdynpro is based on MVC (Model – View – Controller) architecture.

• This is to ensure a clear division between the definition of the user interface and the implementation of the application logic

• Model - Retrieves the application data from the back-end system

• View - Describes the layout and behavior of a rectangular area of a user interface

• Controller - Contains a context, events, and methods which holds the application logic.

• The Web Dynpro Explorer has been fully integrated into the ABAP Workbench (SE80) and does not have a separate transaction code. It can be created through SE80.

• Webdynpro acts as a container for the interactive form

Steps for Creation

• Goto SE80 to create Webdynpro component.

• This will create a window & view by default.

• If view is not created right click on Views & create a view.

• Goto to Context tab:

– create a attribute “pdfsource” of type Xstring

– Create a node “form_data” without any dictionary structure. Now create data in this node as given below:

• Create a node “ztable” with dictionary structure as ztable & change the cardinality to “0…n”

• Create attributes for each field in the ztable.

• Goto View tab:

– Drag and drop an interactive form element from “Integration”

– Check the enabled property to make form interactive

– Bind the PDF source property with “pdfsource” attribute from context.

– Give form name in Template source and double click to create form.

– Pop-up is displayed, give interface name & click on context, select “form_data” node which will become the context of the form.

– Now you will be navigated to the SFP transaction for form designing.

– Go to Properties tab and select layout type as “ZCI Layout”

– Now switch to layout tab, go to Utilities menu & click on “Insert Webdynpro Script”. “Variables” node will be added in the “Hierarchy” tab.

Example

Scenario : Creating entries in database table (ztable) with values filled on the form.

• Go to transaction SE80 & select “Web Dynpro Comp. / Intf” from the drop down.

• Create a webdynpro component as shown in screen shots.

• Goto “Context” tab & create the structure as shown below:– Right click and create an attribute “PDF Source”. This will hold the entire form

structure & data in XML format. This can be used to email or fax the form.– Right click & create a node “Form”. This is the parent node below which we will

create all the nodes that will form the context of the form.• Create child node “Z15848_TEST_02”. Give the dictionary struture as

“Z15848_TEST_02” which is a ztable. Select all the fields by clicking on “Add attributes from structure”. Set the cardinality for this node as “0…n”. This will act as a table.

• Create three attributes “user, first_name & last_name”. These will hold the data which needs to be added in the ztable.

• Create an attributes “msg”, this will hold the error messages to be displayed on form.

Right click on context and create an attribute “PDF Source”. This will hold the entire form structure & data in XML format. This can be used to email or fax the form.

Right click on context & create a node “Form”. This is the parent node below which we will create all the nodes that will form the context of the form.

1. Right click on “Form” node & create child node “Z15848_TEST_02”.

2. Give the dictionary struture as “Z15848_TEST_02” which is a ztable.

3. Select all the fields by clicking on “Add attributes from structure”.

4. Set the cardinality for this node as “0…n”. This will act as a table.

5. Create three attributes “user, first_name & last_name”. These will hold the data which needs to be added in the ztable.

6. Create an attributes “msg”, this will hold the error messages to be displayed on form.

• Switch to layout tab of webdynpro & create components as shown below

1. Right click on “ROOTUIELEMENTCONTAINER” and choose create element.

2. Give ID & type as shown below.

3. Enter the form name in “template source” property & double click. Now a pop up is displayed for interface name. Give the interface name 7 click on the context button. This will navigate to the View context. Select the “Form” node.

4. Set the rest of the properties as shown in below screen shot.

Form Layout1. You will be navigated to SFP Form builder.

2. Note the Data View tab will show the context of the webdynpro, which is now form context.

3. Switch to the “Properties” tab 7 select the layout type as ZCI. ZCI – Zero Client Installation. This layout type ensures that client machine doesn’t have to install any Active-X controls for showing the interactive form in the browser.

4. Now switch to the Layout tab. For ZCI type of form, we need to insert a special script in the form. This is done through the path Utilities Insert Web Dynpro Script. The system inserts scripting into the form layout in Adobe LiveCycle Designer. You can see the scripting in the node (Variables)->ContainerFoundation_JS under Hierarchy in Adobe LiveCycle Designer.Note: If you want to use Web Dynpro-specific objects in the design of your form layout, use the Adobe Designer library Web Dynpro Native.

5. Now create three text fields and bind them to User, First_Name & Last_Name fields of context.

6. Drag & Drop “Submit” button from Webdynpro Native tab of library.

7. Drag & drop table Z15848_test_02 on the form.

ONACTIONSUBMIT WDOINIT

Webdynpro Application