Show TOC

Background documentationIntegrate Online Interactive Forms by Adobe (Optional) Locate this document in the navigation structure

 

Questions Answered

  • Which components must I install to use interactive forms in a composite application?

  • Do I have to perform any configuration steps when using forms?

  • How is the interactive form integrated at the technical level?

  • Which steps are necessary to develop an interactive form from scratch?

  • Which tools are available for laying out interactive forms?

  • Which UI elements can I integrate into an interactive form?

Introduction

SAP Interactive Forms by Adobe are used in various enterprise applications to support different online and offline data capture scenarios. This especially includes the printing & archiving use cases.

Caution Caution

Since the integration of upload and download functionality of forms is not yet implemented for the business process management layer, you cannot provide interactive forms for offline scenarios in conjunction with process components.

End of the caution.

From a development point of view, you can treat Interactive Forms by Adobe like Web Dynpro user interfaces. This is the result of the close integration of interactive forms into the Web Dynpro programming model. At design time, this integration takes place simply by embedding an interactive form UI element in the Web Dynpro view.

Integration of Interactive Forms with Web Dynpro for Java

The generic form UI element represents an interactive PDF document on the Web Dynpro user interface. This enables the UI developer to create and design an interactive form from scratch and treat it as an integral part of the Web Dynpro project. Since the form UI element is directly embedded in the Web Dynpro view, you can take advantage of the data transfer capabilities in Web Dynpro: To enable the data exchange between the interactive form and Web Dynpro, a data source property has to be defined for the form UI element. This data source property points to the Web Dynpro context node that acts as the source of data for the interactive form at runtime. Therefore, the child nodes of the data source structure should be used to define the data mapping with the UI elements on the form. The Web Dynpro Adobe runtime ensures that the data retrieved from the interactive form is populated to the context structure of the data source node. To design the layout of an interactive form, you use the Adobe LiveCycle Designer, which is embedded in the Web Dynpro design time tools. In addition to this, SAP provides a series of additional UI elements (such as for push buttons, input help), which, on the one hand makes it simpler to develop forms, and on the other hand provide input help and field checks for an SAP system (data verification).

Installation and Configuration Requirements

  • Adobe Document Services are installed and configured on the server AS Java.

    For more information concerning configuration steps required, use the configuration guide in the SAP Help portal: http://help.sap.com/saphelp_crm52/helpdata/EN/37/504b8cbc2848a494facfdc09a359b1/frameset.htm

    Note Note

    We recommend that you install the Adobe Document Services on the same AS Java server as the Web Dynpro runtime environment is deployed on. Otherwise, you must change the destination URL of the Adobe document services.

    End of the note.

  • The design time tool Adobe LiveCycle Designer is installed on your front end.

    When installing the Developer Studio, you must also choose the feature that contains the Web Dynpro toolset. Adobe LiveCycle Designer is then automatically integrated within the Web Dynpro tools.

  • Adobe Acrobat Reader is installed on your front end (we recommend using the latest available release from Adobe).

    You need Adobe Reader to preview interactive forms at design time or to display them in your Web browser.

Activities

The following sequence illustrates typical activities when developing online interactive forms as part of a Web Dynpro UI intended to be used in the BPM layer.

  1. Initialize the Web Dynpro project.

    Let us assume that you have set up a Web Dynpro project that already provides an initial set of entities, including at least one Web Dynpro component. You can then proceed by either creating a new view or reusing an existing one. In this view, the interactive form can be displayed.

    More information: Creating Views

  2. Specify the data to be used in the interactive form.

    In the next step, you must create a controller context that serves as a data storage area in Web Dynpro for the interactive form. Using this form context, you specify where the data comes from that you want to display in the form. The structure of this context should reflect the form UI elements that will be populated with data at runtime. To share data between the view controller and other controllers in your Web Dynpro project, you also need to define the relationship between the controllers using the context mapping mechanism.

  3. Add an interactive form UI element to the Web Dynpro view.

    After adding the generic form UI element to the view, you specify some general properties such as size and style properties and assign the data source for the interactive form. For the data source property, you must specify the path to the form context node providing the data.

    More information: InteractiveForm API

  4. Design the form layout with the Adobe LiveCycle Designer tool.

    You use the Adobe LiveCycle Designer to design the pages and create the layout of your PDF form. This graphical tool is automatically integrated into the Web Dynpro perspective after installation. You can start it directly from within the Web Dynpro layout editor by clicking the Interactive Forms UI element and then choosing the edit function. To provide a sophisticated layout for the interactive form, you have the option of integrating dropdown lists, date fields, radio buttons, checkboxes, submit buttons, and images using the Adobe LiveCycle Designer.

    More information: Example of the Use of an Interactive PDF Form

  5. Implement the event handler methods.

    To specify the data exchange between Web Dynpro and the form, you may have to add some source code as part of the controller implementation.

    More information: Example of the Use of an Interactive PDF Form

  6. Integrate Web Dynpro into the process layer.

    Proceed analogous to the description in previous step: Development of User Interfaces for the BPM Layer

  7. Run and test the UI component.

    More information: Running Web Dynpro Applications

Next Steps

Adapt, Simplify and Join Existing Services using CAF