I posted a blog recently about how to easily create interactive PDF forms using GrapeCity Documents for Excel templates. This post is a follow-up about some awesome enhancements in GrapeCity Documents for Excel v4 and GrapeCity Documents for PDF v4 supporting Validation Types and new input controls for PDF forms.
This post covers:
- New GrapeCity Documents for Excel Template Tags and Properties for Validation
- Lease Rental Application Form Demo
- Using GrapeCity Documents for PDF Viewer for Editing
- Trial Version and Licensing
New GrapeCity Documents for Excel Template Tags and Properties for Validation
New Validation Types are available for Excel Templates in the latest release of GrapeCity Documents for Excel v4. These new Validation Types are based on HTML5 form validation and are used with the type tag in the PDF Form Fields listed below:
| Type | Description |
| text | Free form text (this replaces the textbox type) |
| date | Date value |
| time | Time value |
| tel | Telephone number value |
| Email address value | |
| url | Uniform Resource Locator (URL) value |
| password | Password value |
| month | Month value |
| week | Week value |
| number | Number value |
| search | Search value |
For the full details about these new Validation Types, please see the help context here. The type specified determines which type of control edits the field value in the GcPdfViewer for GrapeCity Documents for PDF, which has new built-in support for all these Validation Types.
AutoComplete for PDF Form Fields
The PDF Forms Field can also specify autocomplete based on HTML5 autocomplete, which allows web developers to specify what, if any, permission the user agent has to provide automated assistance in filling out field values. Autocomplete also serves information as guidance to the browser regarding the type of information expected in the field. Note the behavior depends on the browser implementation. This greatly enhances the user experience by automating common fields that the user has already typed in other forms. The following table lists the available autocomplete types for the browser to show the appropriate autocomplete values for the PDF Form Field:
Autocomplete |
Description |
| off | Do not provide autocomplete for this PDF Form Field |
| on | Provide autocomplete but no type specified (browser inferred based on field name) |
| name | Full name of the current user |
| honorific-prefix | Name prefix or title such as "Mr.", "Mrs.", "Ms.", etc. |
| given-name | Given (or first) name |
| additional-name | Middle name |
| family-name | Last name |
| honorific-suffix | Suffix such as "Jr.", "B. Sc.", "PhD.", etc. |
| nickname | Nickname or handle |
| Email address | |
| username | User name or account name |
| new-password | Newly-generated password for creating new accounts |
| current-password | The user's current password |
| one-time-code | A one-time code used for verifying user identity |
| organization-title | A job title such as "Senior Product Manager" or "Executive Vice-President" |
| organization | Company or organization name such as "GrapeCity" or "Electronic Freedom Foundation" |
| street-address | The street address for a location, which may include multiple lines, but not including city, state, and ZIP |
| address-line1 | The first line of the street address (should only be used if street-address is not used) |
| address-line2 | A second line of the street address (should only be used if street-address is not used) |
| address-line3 | A third line of the street address (should only be used if street-address is not used) |
| address-level1 | First administrative level in the address, typically the state or province |
| address-level2 | Second administrative level in the address, typically the city, town, or village |
| address-level3 | Third administrative level in the address, for addresses which have at least three administrative levels |
| address-level4 | Fourth administrative level in the address, for addresses which have four levels |
| country | Country or territory code |
| country-name | Country or territory name |
| postal-code | The postal code (ZIP code in the US) |
| cc-name | Full name as printed on or associated with a payment instrument card (credit card) |
| cc-given-name | Given (or first) name as printed on or associated with a payment instrument card (credit card) |
| cc-additional-name | Middle name as printed on or associated with a payment instrument card (credit card) |
| cc-family-name | Last name as printed on or associated with a payment instrument card (credit card) |
| cc-number | Credit card number or other number identifying a payment method such as account number |
| cc-exp | Credit card expiration date, usually "MM/YY" or "MM/YYYY" |
| cc-exp-month | Credit card expiration month |
| cc-exp-year | Credit card expiration year |
| cc-csc | Credit card security code, usually a 3-digit verification number on the back of the card |
| cc-type | Credit card types such as "Visa" or "Mastercard" |
| transaction-currency | Currency in which a transaction is to take place |
| transaction-amount | Amount of the transaction-currency for the transaction payment |
| language | A preferred language, given as a valid BCP 47 language tag |
| bday | Birthdate as full date |
| bday-day | Day of the month of birth date |
| bday-month | The month of birth date |
| bday-year | Year of birth date |
| sex | Gender identity such as "Male", "Female", "Fa'afafine", etc. |
| tel | Full telephone number including country code |
| tel-country-code | Country code for the telephone number |
| tel-national | Full telephone number excluding country code but including country-internal prefix |
| tel-area-code | Area code including country-internal prefix |
| tel-local | Local telephone number without the country or area code. |
| tel-local-prefix | Exchange number or the first part of local telephone number, e.g., for "555-1212"this would be "555" |
| tel-local-suffix | The number within the exchange or second part of local telephone number, e.g., for "555-1212" this would be "1212" |
| tel-extension | Extension associated with tel |
| impp | URL for instant messaging protocol endpoint, e.g., "xmpp:username@example.net" |
| url | URL, such as a home page or company website address |
| photo | URL of an image representing the person, company, or contact information |
Some properties should not be included when certain others are used, as noted above. In general, it is better to use the properties for the full formatted value such as name and tel instead of dividing the value up into separate form fields, unless the form requires such a breakdown of the value into separate fields.
Other Common Validation Type Properties
The following additional new properties are available for all validation types:
Property |
Description |
| autofocus | Sets the focus to this PDF Form Field when the form shows |
| disabled | Disables this PDF Form Field (the user cannot enter a value) |
| validationmessage | Localized validation message to display to the user when the PDF Form Field get the focus |
| validateoninput | Whether to apply validation immediately during user input |
Properties for the "tel", "password", and "url" PDF Form Fields
The following properties are available for the tel, password, and url Validation Types:
Property |
Description |
| pattern | Regular expression specifying the pattern of the value, e.g. "[0-9]{3}-[0-9]{2}-[0-9]{3}" |
| placeholder | Text to display in the field initially until the user types a value, e.g., "4 to 8 characters" |
| maxlength | Maximum number of characters allowed for the value |
| minlength | Minimum number of characters allowed for the value |
Properties for the "email" PDF Form Fields
The following properties are available for the email Validation Type:
Property |
Description |
| multiple | Whether to allow more than one email address |
| pattern | Regular expression specifying the pattern of the value, e.g. "\S+@\S+\.\S+" |
| placeholder | Text to display in the field initially until the user types a value, e.g., "Email address" |
Properties for the "text" PDF Form Field**
The following properties are available for the text Validation Type:
Property |
Description |
| maxlength | Maximum number of characters allowed for the value |
| minlength | Minimum number of characters allowed for the value |
| pattern | Regular expression specifying the pattern of the value, e.g. "[0-9]{3}-[0-9]{2}-[0-9]{3}" |
| placeholder | Text to display in the field initially until the user types a value, e.g., "4 to 8 characters" |
| spellcheck | Whether the value is checked for spelling errors |
Properties for the "search" PDF Field Field
The following properties are available for the search PDF Field Field:
Property |
Description |
| maxlength | Maximum number of characters allowed for the value |
| minlength | Minimum number of characters allowed for the value |
| placeholder | Text to display in the field initially until the user types a value, e.g., "Enter search terms" |
| spellcheck | Whether the value is checked for spelling errors |
The search Validation Type is intended for PDF Form Fields where the user types search terms for a query. When using autocomplete, this field will show appropriate values for completing a web query.
Lease Rental Application Form Demo
Figure 1 Lease Rental Application Form Spreadsheet Template in SpreadJS to PDF Form in GcPdfViewer
The Lease Rental Application Form Demo easily creates a rich PDF Form with autocomplete from the XLSX spreadsheet template and uses the GcPdfViewer to view and edit the result. The spreadsheet template defines 24 form fields in a 3-page form for the condominium or apartment rental application submitted by the user. First, you can see the spreadsheet template presented in read-only mode using SpreadJS as shown in the animation above, and click the Template button to download the XLSX template for viewing locally in Excel or using Office 365. Next, you can see the form fields in the worksheet cells containing the template markup using mustache syntax, such as A58, I61, and O61, the first three form fields. There are various field validation types and autocomplete types used in this form, including name, email, telephone numbers, addresses, dates, numbers, and more. Finally, click the View PDF button to see the generated form in the GcPdfViewer, and try entering values in the form fields to see the autocomplete working and the validation messages showing invalid or empty values.
Using GrapeCity Documents for PDF Viewer for Editing
Figure 2 Lease Rental Application Form validation message and autocomplete
Scroll down in the viewer to see the form field for LinkToListing, which has the caption PLEASE, COPY & PASTE LINK TO CONDO HERE FROM THE LISTING WEBSITE, i.e. (CRAIGSLIST, ZILLOW, OR HOTPADS. COM) then click that form field to set the input focus. Note that pressing the TAB key to go to the next field will show a notification Required field is empty since this field is marked as required. Most fields in this form will show appropriate AutoComplete prompts from the web browser to help with completing the form. Once the form has been completed and there are no more required empty fields, you can download a local copy of the filled and completed PDF using the Download document tool in the toolbar at the top of the GrapeCity Javascript PDF Viewer. You can also print the document using the Print Document tool next to the Download tool.
Trial Version and Licensing
Download the free trial of GrapeCity Documents for Excel .NET or GrapeCity Documents for Excel Java, and download the free trial of GrapeCity Documents for PDF to try these new features yourself. In addition, you can request a free 30-day evaluation license key by contacting GrapeCity Sales or using the Customer Support Portal to open a ticket. These products are sold separately and the example shown above uses both GrapeCity Documents for Excel (for generating the PDF Form from the Excel template worksheet) and GrapeCity Documents for PDF (for editing and submitting the form using the Cross-Platform Javascript PDF Viewer).
Sean Lawyer