Tutorial
Creating a simple PDF form
Paul Jasper
TABLE OF CONTENTS
1 Defining a simple schema for the task list
2 Making a blank form
2 Looking at the document hierarchy
4 Adding the task list
5 Testing the form design
6 Next time
To get started, I’ll build a simple PDF form that can become the basis for a task
tracking application. Imagine you’re a developer that has to report weekly to your
manager on the status of the tasks you’re currently working on. (Yes, this sounds
familiar to me, too!) I’ll create an XML schema to describe the data and build
a form for entering my list of tasks. Each week, I can open the form in Adobe®
Reader®, fill in the status of my tasks, and submit the status reports to my manager.
In future episodes, I’ll embellish the form, add a button to email the data to my
manager, and look at ways in which my manager can work with task reports from a
whole team of developers.
Defining a simple schema for the task list
Before I can build the form, I need to work out the structure of the data that I
want to send my manager. I’ll define it using an XML schema stored in a file
called tasks.xsd. The file is attached to this tutorial. If you’re not familiar with XML
schema, you can find out more at www.w3.org/TR/xmlschema-0. You can also find
several good tutorials on the web.
My data consists of a list of named tasks, each with a description and a status code.
<?xml version=”1.0” encoding=”UTF-8”?>
<xs:schema xmlns:xs=http://www.w3.org/2001/XMLSchema
elementFormDefault=”qualified”
attributeFormDefault=”unqualified”>
<xs:element name=”tasks”>
<xs:complexType>
<xs:sequence>
<xs:element name=”task” type=”taskType”
maxOccurs=”unbounded”/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:complexType name=”taskType”>
<xs:sequence>
<xs:element name=”name”/>
<xs:element name=”description”/>
</xs:sequence>
<xs:attribute name=”status” type=”statusType”
use=”required”/>
</xs:complexType>
<xs:simpleType name=”statusType”>
<xs:restriction base=”xs:string”>
<xs:enumeration value=”assigned”/>
<xs:enumeration value=”working”/>
<xs:enumeration value=”completed”/>
</xs:restriction>
</xs:simpleType>
</xs:schema>
Making a blank form
Now I launch Adobe® LiveCycle™ Designer to create my form design. When the Welcome screen
appears, I click the New Form button to launch the New Form Assistant, which will lead me
through the four steps to creating a blank form design.
On the Getting Started page, I leave New Blank Form selected and click the Next button. At the
Setup step, I also keep the default settings before clicking the Next button.
When I get to the Return Method page, I select Print and then click the Next button. This
will give me a completely blank form. I could have selected Fill then Submit to place a button
automatically on the form for sending the data to my manager, but I want to add that later and
look at it in more detail in my next column.
Finally, I click the Finish button and my blank form design appears in the Layout Editor in the
center of the window.
Now I click the Save button in the toolbar (or Save on the File menu), name it tasks.pdf, and in
the Save as type list, select Dynamic PDF Form File. If I save it as a static PDF form, it won’t be
able to display dynamic content like multiple rows of tasks.
Figure 1: A blank form displayed in the Layout Editor
Looking at the document hierarchy
To the left of the Layout Editor, I see the Hierarchy palette, which shows me the structure of my
form. The Master Pages let me set headers and footers, which are especially useful when forms
flow over several pages. However, I won’t be worrying about those today.
Tip: If the Hierarchy palette isn’t visible, you can go to the Window menu and select Hierarchy.
Creating a simple PDF form
Figure 2: The Hierarchy palette shows the structure of my form
In the middle of the hierarchy, I see a subform labeled (untitled Subform) (page 1). This
represents the body pages, where I’m going to lay out my form design. I’ll start by giving it a
proper name, because we’ll need something to call it later. I can do this by right clicking the
subform in the hierarchy and selecting Rename Object. Alternatively, I can go to the Object
palette to the right of the Layout Editor, click the Binding tab, and type in the Name field. I’ll
call it page1.
Subforms are important in laying out a dynamic PDF form. They act as containers for the
various objects you place on the form design, including text, fields, and other subforms. They
help to position the objects relative to each other. There are two ways to lay out objects within
a subform. Position Content lets you place the objects according to their x and y coordinates,
whereas Flow Content automatically places objects next to each other. I want the top level of
my form to lay out automatically, so it can expand as more data becomes visible. In the Object
palette, I click the Subform tab and select Flow Content in the Type list, leaving the Flow
Direction as Top to Bottom and Allow Page Breaks within Content selected.
Figure 3: The Object palette shows the properties of my page1 subform
Creating a simple PDF form
Adding the task list
Now I’ll add a table of repeating task items to my form design. I’ll base this on the XML schema
that I defined earlier. I start by selecting New Data Connection… from the File menu, which takes
me through the steps to connect my form design to the schema. I call the new data connection
Tasks, select XML Schema, and click Next. To enter the XML schema file, I click the browse
button to the right of the file name field, and find where I stored my tasks.xsd file. I now see tasks
as my root element. I leave all the other buttons deselected, and I click Finish. The Data View
palette now opens to the left of the Layout Editor, showing the structure of my tasks data.
Figure 4: The Data View palette shows the structure of my tasks data
Adding the task list fields to the form design is as simple as dragging the task item from the
Data View onto the Layout Editor. The status, name, and description fields appear on the form
design. When I switch to the Hierarchy palette, I see the fields listed in the document structure
and clicking each field shows me in the Object palette how they are bound to the XML schema.
To position them correctly in the document, I need to drag the new task subform up onto page1
in the Hierarchy.
Figure 5: The Hierarchy palette now shows the task subform nested within page1 in the document structure
Creating a simple PDF form
When I select task in the Hierarchy palette and look at the Subform tab of the Object palette, I
see the Type is already Position Content, which lays out the status, name, and description fields
in a row. On the Binding tab, the Default Binding is $record.task[*] which allows it to repeat in
accordance with the schema. Repeat Subform for Each Data Item is selected and Min. Count is
1, letting the form expand to show as many rows as needed.
To see my completed form, open the tasks.pdf file that is attached to this tutorial.
Testing the form design
To see how my empty form design looks, I click the PDF Preview tab above the Layout Editor.
After a few moments, I see the three blank fields horizontally across the top of the form.
Tip: When I try to select the status or type in the text fields, a dialog box appears to remind me
that I cannot save the form information. This can quickly become tiresome when you’re testing
a form design, so you’ll want to select the Don’t show again box.
I can also check the form design by importing some sample data. I can save the following
sample XML data to a file called sample.xml:
<?xml version=”1.0” encoding=”UTF-8”?>
<tasks xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance
xsi:noNamespaceSchemaLocation=”tasks.xsd”>
<task status=”assigned”>
<name>Script</name>
<description>Develop the JavaScript to automate the form
</description>
</task>
<task status=”working”>
<name>Form</name>
<description>Construct the form for the project</description>
</task>
<task status=”completed”>
<name>Schema</name>
<description>Design schema for project</description>
</task>
</tasks>
To import the sample data into the form design, I select Form Properties… from the File menu.
In the Preview section of the Defaults tab, I browse to find my sample.xml file. I also change
the Preview Type to Interactive Form. Now when I switch to the PDF Preview, I see three
populated rows on my form.
Figure 6: The preview of my form showing the sample data
Creating a simple PDF form
Next time
In the next episode, I’ll use some simple JavaScript to make the form more
interactive. I’ll add a button to insert new rows into the task list. I’ll also look at how
to email the completed data to my manager. Finally, I’ll tidy up the form to make it
look more presentable.
Better by Adobe.™
Adobe Systems Incorporated
345 Park Avenue, San Jose, CA 95110-2704 USA
www.adobe.com
Adobe, the Adobe logo, Acrobat, the Adobe PDF logo, Reader, and
LiveCycle are either registered trademarks or trademarks of Adobe
Systems Incorporated in the United States and/or other countries.
All other trademarks are the property of their respective owners.
© 2005 Adobe Systems Incorporated. All rights reserved.
11/05
About the author
Paul Jasper is a technology
consultant and freelance
writer based in San Francisco.