Scribd
Upload
218 views18 pages

Interactive Forms: (Using Webdynpro ABAP)

This document describes how to create interactive forms using Webdynpro ABAP. It discusses types of interactive forms including online and offline forms. It provides an overview of Webdynpro, which is based on the MVC architecture. It outlines the steps to create a Webdynpro component in SE80 including creating attributes and nodes in the context, and designing the form layout in SFP. An example is given of creating a form to capture data and add entries to a database table.

Uploaded by

Yogendra Dubey
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
218 views18 pages

Interactive Forms: (Using Webdynpro ABAP)

This document describes how to create interactive forms using Webdynpro ABAP. It discusses types of interactive forms including online and offline forms. It provides an overview of Webdynpro, which is based on the MVC architecture. It outlines the steps to create a Webdynpro component in SE80 including creating attributes and nodes in the context, and designing the form layout in SFP. An example is given of creating a form to capture data and add entries to a database table.

Uploaded by

Yogendra Dubey
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 18

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.

• Offline
The 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 Layout
1. 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

You might also like