Show TOC

Creating Web Dynpro Applications Using FormsLocate this document in the navigation structure

Use

You can create a new form, including the form interface, directly from the Web Dynpro Explorer of the Development Workbench. You can also add an existing form to your Web Dynpro application.

You can essentially integrate a form in every view of any component. However, it is often beneficial to create a separate view to integrate the form. Note that only one interactive form can be displayed in each browser window.

The process for creating and using both interactive and print forms is the same.

Procedure

To create a new form

  1. Create a view in the Web Dynpro Explorer or select a view in which you would like to embed a form.

  2. In the view context, create the node with attributes that is to contain the form data.

  3. Insert an InteractiveForm UI element into your view.

  4. Assign the templateSource property a name that has not already been assigned to an existing form in the system.

    The dialog box Formular-Schnittstelle spezifizieren appears.

  5. Enter the name of a form interface that does not already exist in the system, and select Context.

    A dialog box for the selection of the context nodes to be bound to the dataSource property appears.

  6. Choose the context node created in step 2.

    A new form interface and a new form are generated based on the Web Dynpro context that you selected.

  7. The Form Builder is opened and you can create your new form.

    • On the Properties tab of the Form Builder, choose the ZCI Layout option as the Layout Type, and press Enter to confirm the message shown in the status bar.

      Layout Type ZCI Layout

    • On the Layout tab in the Form Builder, you can insert the ZCI script by choosing Start of the navigation path Utilities Next navigation step Insert Web Dynpro Script End of the navigation path.

      Afterwards you can see the entry ContainerFoundation_JS in the Hierarchy View in the Form Builder.

      Note

      If you are using the EhP1 Adobe Document Services, you do not have to insert the script manually. Adobe Document Services inserts the script into the PDF document automatically as of this release.

    • Compile your form using the UI controls from the Web Dynpro Native library:

      Web Dynpro Native Library

  8. Save and activate your form.

  9. Once you have finished designing the form, switch to the editing screen for the Web Dynpro View.

    The dataSource property of the InteractiveForm UI element has now been set according to your specifications.

  10. Specify whether the form is a print form or an interactive form.

    • If it is a print form, deactivate the enabled property of the InteractiveForm UI element.

    • If it is an interactive form, activate the enabled property of the InteractiveForm UI element.

To Use a Form that Already Exists in the System

You can also integrate a form that already exists in the system into your Web Dynpro application. Based on the interface of the selected form, a context node with attributes can be created automatically for the UI element InteractiveForm. The dataSource property of the UI element is automatically bound to this context node.

  1. Create a view in the Web Dynpro Explorer or select a view in which you would like to embed a form.

  2. Insert an InteractiveForm UI element into your view.

  3. For the templateSource property, enter the name of the form that already exists in the system.

    A dialog box appears and informs you that a context node that matches the form interface can be generated and bound to the dataSource property.

  4. Confirm the prompt in the dialog box.

  5. Specify whether the form is a print form or an interactive form.

    • If it is a print form, deactivate the enabled property of the InteractiveForm UI element.

    • If it is an interactive form, activate the enabled property of the InteractiveForm UI element.

  6. You may have to update the template used.

    The procedure is described in SAP Note 956074 Information published on SAP site.

Editing the Web Dynpro Context or the Form Interface at a Later Stage

If you determine during the development of your form that more data or less data is required in the form, then you should adjust the context bound to the dataSource property accordingly. The form interface can then be regenerated: You adjust the form interface by selecting the Generate XML Schema function.

You can also regenerate the form interface by navigating forward to the templateSource property of the InteractiveForm UI element.

Note

Note however, that the form interface may also be used for other forms and that you should check potential dependencies before changing the interface.

The context bound to the dataSource property can also be created afterwards using the Generate Context function of the form interface.

Additional Functions

Result

The PDF document is displayed in your Web Dynpro application in an Adobe Reader Browser Plugin. The usual Adobe functions are available using the corresponding buttons, for example print and save as a copy.

If you want to further process the PDF document that was created by the system from the form (templateSource) and the relevant data (dataSource) in your application (for example to save it to the database and archive it), you have to bind the pdfSource property to a context attribute of type XSTRING. Note the performance considerations for interactive forms.

Note

When designing the form layout, note the translation link for forms.

Alternatively, forms can also be edited independently of Web Dynpro applications using the Form Builder (transaction SFP).