Skip to Content
In Part I I explained some basics of the PDF solution and the main classes of the PDF API. The second part will show you the creation of a PDF Form based on an example. h3. Scenario description You are requested to develop an application for your company to allow employees to create travel requests. The request forms should be available online and offline. The design should look like this:  image  The form is divided in two parts. In the upper part the employee master data (firstname, lastname, id and department) are displayed. This data could be retrieved from a HR backend system, depending on the authenticated user. In the lower part the employee can enter his travel data and submit the data back to the application. The application can then extract the data and create a travel request in the HR system. h3. Creating the NW Developer studio projects As mentioned in Part I the PDF API is public since CE 7.20. So the whole example is based on this release.   For simplicity reasons we will create two servlets. One called *+CreateTravelRequest+* and the other one called *+ExtractTravelData+*. The first is responsible for creating the PDF form using a template and XML data. The second one is called after the employee entered his travel data and pressed the submit button inside the form.    The steps you have to do in the Developer Studio are: Create a DC of type Enterprise Application and a DC of type Web Module. The Web Module DC must have a build-time dependency to the public part of +tc/pdf/object+ and the Enterprise Application DC must have a runtime dependency to +tc/pdf/object+. More explanations about the dependencies can be found in the SAP documentation of the component model or in one of my older blogs  (How to use external libraries in the SAP component model (PART I))0.1. Create the two mentioned servlets using the Developer Studio wizards. Having done this, the projects should look like this.image   h3. Defining the data structures and data types used inside the form To be able to bind the input fields of the PDF form to the actual data we first define a XML Schema (XSD) which is then used inside Adobe LiveCycle Designer as a data source.  XSD files can be created using various tools. The simplest way is to use the Eclipse XML Schema Editor. Choose +File -> New -> Other…+  In the next screen select +XML -> XML Schema+ to create a XSD file called *TravelRequestData.xsd. *Save it in the same place where your servlet classes were created. Information on how to use the schema editor can be found on the Eclipse website  (http://wiki.eclipse.org/index.php/Introduction_to_the_XSD_Editor). At the end your XSD file should look like the following:The above XSD defines a root element called +TravelRequest+. This root element has two children called +PersonalData+ and +TravelData+. Both child elements again have children who correspond to the UI input fields of the PDF form (Fistname, Lastname…).We now create the PDF form with the LiveCycle Designer. To be able to create the data binding of the form input fields, we need a new +Data Connection+.    Open the LiveCycle Designer and create a new form. Goto +File -> New Data Connection…+. In the following popup enter +TravelRequestData+ as the name of the connection and select +XML Schema+ as the data source and press +Next+. image In the next screen select the location of your XSD file and the root element (+TravelRequest+). You could also flag the checkbox +Embed XML Schema+ which includes the XSD into the PDF form. Doing this, the form can be distributed easily because it does not need a reference to the XSD file anymore. image Press +Finish+ and switch to the +Data View+ tab. Here you can drag and drop the data elements (e.g. Firstname, Lastname…) into the +Design View+ area of the form. This automatically creates the UI input fields and the corresponding binding to the XSD data elements.  image Having added all fields to the form you must add a button from the standad palette to the form. In the object properties of the button select the Control Type +Submit+. image Open the +Submit+ tab in the properties of your button. Here you can define the +Submit URL+. Enter the URL of your *+ExtractTravelData+* servlet. The +Submit As+ property allows you to define how the data will be sent back to the server. The easiest way to send back the data is to choose +URL-encoded Data (HTTP Post)+. In this case the servlet just accesses the POST parameters to get the travel data the user entered in the form. image Now save the PDF form as XDP file with the name *+TavelRequestForm.xdp+*. The location of this file should be the same as your servlet classes and the XSD file. You project folder should now look like this: image
To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply