Code Example of the Use of an Interactive PDF form (SAP Library

Code Example of the Use of an Interactive PDF form

Use

The following example demonstrates the use of an interactive PDF form. It also explains the view structure, the required context structure, and the data binding of the UI element properties to the context structure defined at design time for the PDF form layout. In addition, it contains a procedure for creating and designing an interactive PDF form using the Adobe Designer. For information about the use of Adobe Designer, refer to the online help of this tool.

This example uses a simple PDF document containing two field objects of the type Text Fieldthat display the name and first name of a person. The PDF document retrieves the required data from the view context. The document is saved as example.pdfon the local hard disk using the Submit button. The source code for the storage is contained in the onActionSubmit method of the controller implementation. For more information, refer to the section: Controller Implementation.

For a description of the individual UI element properties, refer to Structure link Web Dynpro InteractiveForm API.

Prerequisites

You have created a Web Dypro application and a view (in this example, it is called TestInteractivePDFForm) within the Web Dynpro component into which you want to insert the InteractiveForm UI element. For a detailed description of the procedure for creating Web Dynpro projects, Web Dynpro components, the context structure as well as the layout of the view, see Creating Your First Web Dynpro Application.

You must install Acrobat Reader 6.0 or a full version of Adobe Acrobat 6.0 if you want to use the InteractiveForm UI element. In addition, the required Adobe component in the SAP NetWeaver Developer Studio must be installed. This component for the use of interactive PDF forms is not installed by default. However, it is very easy to install it.

Procedure

Creating the view layout in which you want to display the PDF document

...

1. Insert the InteractiveForm UI element with the ID InteractiveForm2 into the view.
Choose Insert Child in the context menu of the RootUIElementContainer (right mouse button). Select the value InteractiveForm in the dropdown list box. The TextView UI element with the ID DefaultTextView is used to label the PDF document and is automatically generated during view creation. In this example, the value Show interactive form is assigned to the text property of this UI element.

This graphic is explained in the accompanying text

Creating the Context Structure

2. Create the context node AdressNode.

3. Create the context attributes FirstName and Name.

4. Create the context attribute pdfSource as a root node element. It contains the PDF document at runtime. This context attribute must be of the type binary.

5. Create the supply function fillNode.

Context structure
Properties of the value node AdressNode
Properties of the value attribute FirstName
Properties of the value attribute Name
Properties of the root node attribute pdfSource

Note

If you define the context structure first after creating the view, you can bind the UI element properties to the corresponding context elements directly after you have inserted the UI element into the view.

Creating the Actions check and submit

This graphic is explained in the accompanying text

Caution

Note that binding the events check and submit is required for the availabilty of the corresponding pushbuttons in the Web Dynpro tab of the Adobe Designer library. For more details, refer to the screenshot in the section Designing the PDF Template.

Data Binding

6. Define data binding of the UI element properties (see the following screenshot).

7. Bind of the actions

This graphic is explained in the accompanying text

Controller Implementation

The following source code only contains the most important parts of the controller implementation:

//Implementation of the supply function fillNode. The coding is called up when the view is initialized.

public void fillNode(IPrivateTestViewInteractivePDFForm.IAddressNodeNode node, IPrivateTestViewInteractivePDFForm.IContextElement parentElement)

{

//@@begin fillNode(IWDNode,IWDNodeElement)

IPrivateTestViewInteractivePDFForm.IAddressNodeElement element = wdContext.nodeAddressNode().createAddressNodeElement();

element.setFirstName("John");

element.setName("Smith");

wdContext.nodeAddressNode().bind(element);

//@@end

}

//Implementation of the event submit

public void onActionsubmit(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

{

//@@begin onActionsubmit(ServerEvent)

IPrivateTestViewInteractivePDFForm.IContextElement contextElement = wdContext.currentContextElement();

byte[] bytes = contextElement.getPdfSource();

try

{

File file = new File("C:\\temp\\example.pdf");

FileOutputStream os = new FileOutputStream(file);

os.write(bytes);

os.close();

}

catch (IOException e)

{

// do something

e.printStackTrace();

}

wdThis.wdGetAPI().getComponent().getMessageManager().reportSuccess("You have pressed Submit! FirstName is: " + wdContext.currentAddressNodeElement().getFirstName());

//@@end

}

As soon as data binding is completed, you can design the PDF document. Call the Adobe Designer to design and edit the InteractiveForm UI element by choosing Edit in the context menu of this UI element. The Adobe Designer is started in the SAP NetWeaver Developer Studio. The template for the PDF document is provided within the body page. Here, you can insert standard objects like a text field using the tab Library and the drag and drop function. The Data View of the Adobe Designer provides the context node AddressNode to which you have bound the dataSource property of the InteractiveForm UI element.

This graphic is explained in the accompanying text

Designing the PDF Template

8. For this example, insert two field objects of the type Text Field into the PDF document.

a. Use the drag and drop function to insert text field 1 in which the last name is to be displayed

b. Use the drag and drop function to insert text field 2 in which the first name is to be displayed

9. Drag and drop the corresponding context attributes FirstName and Name under the context node AddressNode into the two field objects of the type Text Field. If the context attribute or the context node is bound to the standard object, they are marked by the icon This graphic is explained in the accompanying text .

10. As is the case in this example, you can use the binding of the actions check and submit, which are SAP pushbuttons in the Web Dynpro tab, to store the PDF document on your local hard disk. Choose Submit to SAP, then drag and drop this selection to the template (body pages). When this pushbutton is selected, the action that you defined in the onActionsubmit method of the controller implementation is executed. See Controller Implementation.
This graphic is explained in the accompanying text

11. Save the metadata by choosing Save all metadata This graphic is explained in the accompanying text in the context menu of the pushbutton File in the toolbar.

Result

Before you can call the Web Dynpro application, you must build the Web Dynpro project and install the Web Dynpro application on the SAP J2EE Engine. For detailed instructions on how to build and deploy a project, refer to Building, Deploying, and Running the Project.

You start the Web Dynpro applications by choosing Deploy new archive and run in the context menu of the example application ExampleInteractiveFormApplication.

The Web Dynpro application is called in the browser from a Web address. As a result, a simple, interactive PDF document is displayed containing the name and first name of the person John Smith (see the following screenshot). Since the PDF document is interactive, you can edit these text fields. The current data is saved in the view context.

If you choose the Submit button, the PDF document is stored as example.pdf in the directory C:\temp\ of the server (see source code of the onActionsubmit method in the controller implementation).

This graphic is explained in the accompanying text