Stefan Cameron on Forms
Building intelligent forms using Adobe LiveCycle Designer

'Tutorials' Category Archive

What About the Other Field?

A common need in forms is to ask the user to choose between a set of options within a list, be it a radio button list, list box or drop down list. What’s more is that these lists often include an “other” option to let the user specify something more specific that isn’t included in the list. The trouble is, how do you ensure that the user fills-in the “other” field prior to submitting their form?

I thought it might be useful to provide a sample form which demonstrates how to build a list field which has an “other” option and clicking on the “other” option displays a field for entering the specific value and makes that field required — but only if the user chooses the “other” option. (You wouldn’t want the “other” field to be hidden and required or else the user would never be able to submit their form since Acrobat would prevent the submission on the premise that there’s an un-filled required field somewhere.)

“Other” Fields in Acrobat/Reader 8.1+

The first thing I did was create my sample form using Designer 8.1 and Acrobat 8.1. That was very easy and just as straight-forward as I expected it would be: One radio button list, one list box and one drop down list, each set to be required and with their own “other” item and script to show their respective “other” field (and make it mandatory) when their “other” item is selected and hide it (and make it optional) when their “other” item is de-selected. Add a submit button and Acrobat/Reader 8.1 automatically takes care of preventing the submission if any required field isn’t filled.

To keep things simple, each list field has script that detects when the user either selects the “other” item or an alternate item and sets the presence and mandatory properties of its “other” field to be visible/required or invisible/optional, respectively.

Download 8.1 sample [pdf]

Minimum requirements: Designer 8.1, Acrobat/Reader 8.1

“Other” Fields in Acrobat/Reader 8.0 or Earlier

Unfortunately, I didn’t have the same kind of experience getting this form to work in Acrobat/Reader 8.0 or earlier.

The first thing I did, since my 8.1 sample form doesn’t use any functionality only available as of Designer/Acrobat 8.1 (in fact, it uses XFA properties and script functions that have been available since Designer/Acrobat 7 and likely even earlier), I simply used Designer 8.1 to set my form’s Target Version to Acrobat/Reader 7.0.5 and figured I would open it in Acrobat 7.0.9 and all would be good. Well, that wasn’t the case.

Aside from Acrobat not respecting the “required” setting on the radio button list (which was expected since required radio button lists weren’t supported until Acrobat 8.0), I discovered a very strange behaviour in the list box where simply having a statement within its Change event that sets a field’s mandatory property to “error” will always result in that field being required, as far as Acrobat/Reader is concerned, even if the statement doesn’t appear ever to be executed on form initialization. The result is that selecting an item other than the “other” item in the list box and attempting to submit the form prompts Acrobat to cancel the submission because a required field isn’t filled. The problem is that the required field is the list box’s “other” field which is hidden from view because it isn’t supposed to be required. Finally, there was also another issue with list boxes that have Change event script: Their value is never committed to the Data DOM, which means that the list box always appears to have no value and that also prevents the user from being able to submit the form because the list box appears never to have been filled (even though an item is clearly selected).

So the are three problems with the 8.1 sample form when it’s running in versions of Acrobat/Reader prior to 8.1:

  1. Although properly supported in Acrobat/Reader 8.0, radio button lists can’t be set to “required”;
  2. List boxes with Change event script containing a statement which sets a field’s mandatory property to “error” results in that field always being “required” (this strange issue is resolved in Acrobat/Reader 8.1); and
  3. List boxes with Change event script don’t commit their value to the Data DOM (this is also resolved in Acrobat/Reader 8.1).

Fortunately, issues #2 and #3 can be resolved fairly easily simply by not using the Change event. The only viable alternative I found was using the Exit event instead. (Note that in the Exit event, you have to use the list’s “rawValue” property to determine its value rather than using the “xfa.event.newText” property as in the original Change event script.)

Issue #1 (required radio button lists not supported) can also be resolved although it requires a little more work. One alternative is to use the “Two Button Submit” Technique I described on a previous post on Complex Validations, which is what I implemented in my 7.x sample form.

Download 7.x sample [pdf]

Minimum requirements: Designer 7.0, Acrobat/Reader 7.0


Posted by Stefan Cameron on August 7th, 2007
Filed under Acrobat,Bugs,Events,Scripting,Tutorials

Form Fragment Video Tutorial

That’s right: I’ve officially made my video tutorial debut. Just posted to the LiveCycle Developer Center is a video I recorded with the help of my colleague Zee over at FlexLive.net and Adobe Captivate.

In this instructional video, I demonstrate how to use the new Form Fragments feature in LC Designer ES to make it easier to re-use pieces (“fragments”) of various forms. This technique should help you create forms that are more maintainable than ever before.

Let me know what you think!


Posted by Stefan Cameron on July 16th, 2007
Filed under Form Fragments,Tutorials

LC Designer ES Documentation Now Online

Adobe recently published a whole collection of documents for Designer. In particular, Designer documentation is now available online via LiveDocs.

Under the Develop Tab, you’ll find documentation on the following topics as they pertain to Designer:

  • Designer Help (LiveDocs)
  • Form Guides (“getting started” guide)
  • Scripting Basics
  • Scripting Reference
  • Target Version Reference (to know what features of XFA and Designer are supported in specific versions of Acrobat — this is what the new Target Validation feature in Designer is intended to help you manage)
  • Transformation Reference (to know what’s supported if you’re targeting HTML)
  • FormCalc Reference

Posted by Stefan Cameron on June 25th, 2007
Filed under Designer,FormCalc,Scripting,Tutorials

Connecting to a Web Service

Since I wrote my various articles on connecting forms to databases, I’ve had numerous inquiries about connecting to web services so here’s the long-overdue article on doing just that.

In Designer, you not only have the ability to create data connections to schemas (directly or based on sample XML data) and databases, you can also connect to web services. Web services are online applications that return information in response to specific requests. These requests and responses are sent and received via the SOAP protocol in various formats, as specified by the web service in an XML-based language called WSDL (you guessed it — Web Service Description Language).

Advantages of Web Services

One of the main advantages of using web services is to create an abstraction from server components such that clients ask the web service for information (via its various operations) without having to know the specifics about the server-side implementation (e.g. the web service may retrieve information from an Access database one day and later switch to a MySQL database but the client would still retrieve information in the same way, via the web service’s operations). If implemented correctly, web services can also provide better security by preventing clients from connecting directly to databases from the Internet, for example.

Supported Web Service Operation Types

To keep things simple, the WSDL basically describes the operations that are supported by the web service. To execute an operation, the client must submit a request to a web service operation and, upon receipt, the web service will execute the operation and submit a response back to the client, possibly containing data. Furthermore, these requests and responses are submitted in specific formats using specific data types which the WSDL also describes for each operation.

Document/Literal — Supported in Designer and Acrobat

The most important thing to note here is that Designer only supports executing web service operations which are specified as document/literal. This means that an operation defines XML schemas for its request and response formats. In turn, the XML data adhering to an operation’s request and response schemas can easily be gathered from a form using basic data bindings (a way, in XFA, to link a particular field’s value to a specific data node in a data connection).

RPC/Encoded — Supported in Acrobat only

Some of you more familiar with web services will note that operations may also be specified in the rpc/encoded format. Designer does not support executing such operations at this time because the data formats are more complex than straight XML schemas. The Google Search web service is an example. You may choose to connect to such operations using Acrobat’s SOAP object but beware that there is no server-side support for this object. This article will focus on doc/literal operations since they’re fully supported across all LiveCycle products.

Creating the Data Connection

Now that you have a basic understanding of web services and the document/literal operation type supported in Designer, let’s see how simple it is to execute a web service operation and receive a response.

First, you must create a new data connection to a web service. In the Data View palette’s menu, choose the "New Data Connection…" command, select "WSDL File" as the type and continue to the next step:

Choose "WSDL File" as the type.

At the second step, you’ll be asked to specify the WSDL file to connect to. For this tutorial, you’ll connect to a little web service called "Echo Employee" which simply defines 4 fields for the request and returns their data back as the response:

http://www.whitemesa.net/wsdl/r3/compound2.wsdl

Specify the source WSDL file.

When you click the "next" button, Designer will attempt to connect to the WSDL file and retrieve a list of its document/literal operations. If successful, you’ll get to the third step where you can choose the operation that will be executed by the data connection:

Specify the operation to execute.

In this case, there is only one operation. Choose "echoEmpolyee" and click on the "finish" button.

Designer will then use the data type definitions for the request and response formats of the echoEmployee operation to define a data structure in the new data connection in the Data View palette:

The new data connection in the Data View palette.

The only thing that remains is to create 2 sets of fields (one which will be used to submit the data for the request and another to receive the response) and a button to execute the operation. This can be done very easily simply by dragging and dropping the "DataConnection" node (or whatever you named your data connection earlier when you created it) onto your form. This will automatically generate all the necessary fields and bindings as well as the execute button:

New bindings after drag & drop.

Notice, in the Data View palette, that the icons pertaining to the various request/response fields are different than the usual binding icons: The request field icons have a single red arrow pointing to the left (indicating that their data is outgoing) and the response field icons have a single green arrow pointing to the right (indicating that their data is incoming).

You should now have the following object block on your form (from the earlier drag and drop operation) with fields of types matching the data which they will contain (text, numeric, etc.):

New fields and button after drag & drop.

That’s it! All that remains is to preview your form using Acrobat Standard or Pro (since connecting to a web service implies importing data which is only possible using Acrobat Standard/Pro or an extended PDF, via LC Reader Extensions, in Reader).

In the preview window, fill-in the top 4 fields and click on the "Echo Employee Btn".

Top 4 fields filled-in in preview.

If you correctly configured your data connection and created the necessary fields and bindings, Acrobat should connect to the web service, submit the data you entered as the request to the "echoEmployee" operation which will, in turn, respond with the same data to Acrobat, at which point the response data will be pushed into the response fields (directly below the 4 top fields):

Bttom 4 fields filled-in after response in preview.

Note that the fact that the same data is returned is only specific to this web service and its "echoEmployee" operation. Other web service operations may return different data (e.g. you submit a record ID and the response contains all the information for an individual) or not data at all (if the operation is simply meant to add a new record in a back-end system, for example).

Update (May 24, 2007): Zee, a colleague at flexlive.net, has posted a video tutorial on connecting a form to a web service. If you’re looking for something with more context, you might want to try that since you get to see the actual steps in Designer which I’m attempting to describe.

Update (Sep 2, 2010): faith pointed-out that the “Echo Employee” web service I had based this tutorial’s sample on no longer works. In fact, it doesn’t seem to exist anymore. I have kept the original sample since the tutorial is based on it and I have provided a new sample PDF based on a different web service (see below).

Sample Form

In case you have trouble following these steps, you may download the "solution" file here:

Download (original) [pdf]

Download (updated Sep 2, 2010) [pdf]

Minimum Sample Requirements: Designer 7.x, Acrobat 7.x.

Sep 2, 2010 — Add new sample PDF based on different web service since original sample PDF’s web service is no longer available online.


Posted by Stefan Cameron on May 21st, 2007
Filed under Acrobat,Data Binding,Tutorials

It's almost here: A book on Designer!

I’ve lost count of how many times, over the past year, I’ve been asked if there was a good book on designing forms using LiveCycle Designer. Until now, the answer was always an unfortunate “no”.

Well, I’m very happy to announce that J.P. Terry from SmartDoc Technologies has been hard at work over the past few months on a book titled, Creating Dynamic Forms with Adobe LiveCycle Designer.

Based on some of the chapters I’ve reviewed so far, this is going to be an excellent resource for those of you who might not know where to start or perhaps would like a few pointers on good form design. I, for one, am really excited about this since it’s the first (of hopefully many more to come) book about the product and technologies I work on every day. It’s almost like a milestone — Designer’s first book.

No word yet on a specific release date but I’ll keep you all posted as I get more details over the coming months.

So how about you? Are you looking forward to a book on Designer and dynamic forms?


Posted by Stefan Cameron on May 18th, 2007
Filed under Books,Designer,Instance Manager,Scripting,Tables,Tutorials