Stefan Cameron on Forms
Building intelligent forms using Adobe LiveCycle Designer

'Tutorials' Category Archive

HTTP Submit

In the past, I’ve written a lot of articles on submitting data to databases and web services but there’s another way to submit form data: via HTTP POST. In this scenario, you use a regular button object configured to submit to a web page via HTTP or you just use the HTTP submit button object and set the URL appropriately.

Steve, a colleague of mine who works on LiveCycle Designer ES, wrote two posts about this technique a while back. I’ve frequently referred to it in my replies to your comments on various posts so I thought I would include the links in a more prominent place so they’re easier to find:

  1. The original HTTP Submit post.
  2. An important update to the original post.

One use of this could be to make submitting data to a database more secure* than exposing the database on the Internet (which is seldom a good idea). For example, you could have your form’s data posted to a PHP page which could then relay it into a MySQL database running behind the scenes. Another popular combination is ASP and Microsoft Access databases.

* Please note that I cannot speak to the level of security of said suggestion/solution. I’m merely suggesting it could be more secure.


Posted by Stefan Cameron on September 15th, 2008
Filed under Bugs,Data Binding,Designer,Tutorials

CM Letter Building Tutorial

For those of you interested in Adobe’s new Correspondence Management Solution Accelerator, I just posted a Letter Building Tutorial, complete with document and training videos, on the LiveCycle Product Blog.


Posted by Stefan Cameron on September 4th, 2008
Filed under CM,Tutorials

Submitting Form Data by Email

A frequently-asked question is, "how do I modify the email in an email submit button?" Usually, the reason behind the question is that a form should either be routed to a specific person depending on data entered at runtime (so you can’t predict the data and therefore you can’t set the email submit button accordingly at design-time) or perhaps the form even presents a list of possible recipients and the user must choose which person to send the submission data to.

The Secret

The secret to changing the email recipient for an email submit button (or even changing it for a regular button which you’ve turned into a submit button using the "Object palette > Field tab > Control Type > Submit property") is to set the "target" attribute of the <submit> node that is part of the button’s Click event. The "target" specifies the URL to which the data will be submitted. HTTP and mailto are valid protocols.

In XFA, the difference between a regular button with Click event script and a submit button which submits form data when it’s clicked is that the submit button’s Click event has a <submit> node instead of a <script> node.

A regular button’s Click event:

<event activity="click">
    <script contentType="application/x-javascript">
        // your JavaScript code here...
    </script>
</event>

versus a submit button’s Click event (set to email form data in this case because of the "mailto" protocol):

<event activity="click">
    <submit format="xml" textEncoding="UTF-8" target="mailto:"/>
</event>

How is it done?

Changing the recipient is done simply by setting the submit button’s target appropriately, following the rules of the protocol you wish to use. In this case, we’ll be using the mailto protocol. Of course, we can do much more than change the recipient: We can actually specify multiple recipients, CC some others, BCC others still, specify any subject we want and even specify a customized email body (message)! All that needs to be done is to apply the mailto protocol when specifying the submit button’s target.

For example, setting the target to the following string would create an email with two recipients (one "to" and one CC’d), a subject and a body:

mailto:john@asdf.com?cc=lisa@adsf.com&subject=Re: New Account Opening&body=Thank%20you%21"

Note that the body must be URL-encoded using the "%" codes for non-URL characters such as "%20" for a space and "%21" for an exclamation mark (!). Thankfully, we can use the encodeURIComponent(string) method in JavaScript to do that part for us!

The most difficult part of all this is finding the Click event (since there could be multiple <event> nodes specified on a single field, one for each event that does something) and locating the <submit> node inside.

Sample Form

To illustrate how this is done, I’ve created a sample form that submits an address block as data and provides fields for specifying the recipient(s), CC list, BCC list, subject and body of the email.

The result of the above settings is a new email with the specified recipients, subject and body, along with the attached XML data file:

 

In order to accomplish this, I used the two-button submit technique where a regular button is used to set the properties on a hidden email submit button. Doing it this way also lets me easily prevent the submission if there are no recipients ("to") selected. (Note that the To, CC and BCC fields are multi-select list boxes so you can choose multiple email addresses.) You’ll be interested in the script in the "Send" button’s Click event.

Download Sample [pdf]

Minimum Requirements: Designer 8.0, Acrobat/Reader 8.0 for this form since it uses functions that are part of the new List Object API which was introduced with the 8.0 versions however you could access the selected items differently and get this to work in previous versions as well.


Posted by Stefan Cameron on August 28th, 2008
Filed under Events,Scripting,Tutorials,XFA

Auto-splitting text between two text fields

The scenario

You have a compliant form that has sections for users to fill-in information. Because the form is compliant (i.e. its layout has received the “stamp of approval” and cannot change without another lengthy approval process), the sections cannot grow (they cannot expand-to-fit all of the text users may fill-in). To provide more space for users to add more text, you’ve provided an expandable “overflow” section at the end of form since expanding that section will not affect the portion of the form which has been approved.

The problem

You need to capture the text entered into the form using an interactive Form Guide which is not limited to the restrictions of the form’s approved layout. As such, the Form Guide will capture the text in a single field and you need that text to be entered into the PDF version of the form. If you put all the text into the appropriate section on the form, it won’t fit and the text will be cut-off (e.g. it will not print entirely and you will miss some of the important information).

You need some way to automatically split that text between the small section in the form and the overflow section at the end of the form. In other words, you need to ensure that only the text that can fit within the small form section is placed there and the rest is placed in the overflow section at the end.

In Designer 8.2, the content of fields can now be split between pages however in this case, you can’t use this feature because the small form section can’t be expanded (it’s fixed in size).

The solution

This is the problem Stephanie, Glenn and I were faced with on a recent customer visit. Stephanie took the time to put this into a sample form which provides the script we wrote to handle this task. It’s basically a mini text parser written in JavaScript that splits text between two fields with a fixed-width font (e.g. Courier New, Lucida Console, etc.).


Posted by Stefan Cameron on July 10th, 2008
Filed under Acrobat,Designer,Form Guides,Scripting,Tutorials

Shading the caption, not the entire field

Have you ever wanted to shade (color) a field’s caption instead of its content area? For example, you may want

instead of (entire field shaded)

 

or (field’s content area shaded)

Shading the entire field is easy: just set the background fill color using the Border palette. Shading the field’s content area is easy too: just choose “Object palette > Field tab > Appearance > Custom…” and set the background color in the Custom Appearance dialog that appears. Shading the caption, that’s not so trivial, unfortunately.

There are actually six (six!) steps involved in shading a field’s caption if you want the end-result to be a field that has a shaded caption but retains all of the original spacing (i.e. margins) of the caption’s text and the field’s value (don’t worry, it only seems long because I explain the logic of the steps along the way):

  1. Set the field’s background color to blue (or whatever color you want the caption to be): “Border palette > Background Fill > Style > Solid” and use the color well to choose the color you want.
  2. Set the field’s content area background color to white (the “paper”/document color): “Object palette > Field tab > Appearance > Custom… > Background Fill > Style > Solid” and use the color well to set the color to white.
  3. Remove all field margins but remember what they were — we’ll need them in the following steps (this gets rid of the color you see above, below and to the right of the field’s content area): “Layout palette > Margins” and set all of them to zero.
  4. Set the field caption’s indentation and spacing paragraph formatting properties to the original margins: “Paragraph palette > Edit Caption Properties” using the edit menu as follows:

    This will ensure that you’re only modifying the caption’s paragraph formatting properties (the default is set to modifying both the caption and value, or “content area”, at the same time). The set the “Indents > Left”, “Indents > Right”, “Spacing > Above” and “Spacing Below” to the original left, right, top and bottom margins, respectively. This will give the illusion of margins around the caption without actually setting the margins so that the field’s background color we set in step 1 won’t be visible around the field’s content area.

  5. Set the field’s content area (value) indentation and spacing paragraph formatting properties to the original margins except for the left spacing otherwise the spacing between the caption and content area (value) will be doubled because we’ve already set the caption’s right spacing to the original right margin: “Paragraph palette > Edit Value Properties” using the edit menu as above. The set the “Indents > Right”, “Spacing > Above” and “Spacing > Below” to the original right, top and bottom margins, respectively. Ensure that “Indents > Left” is set to zero. This will give the content area the illusion of having margins without actually setting margins on the field. (Note that this may conflict with paragraph formatting you may want on a multi-lined text field, for example. If that’s the case, you simply may not be able to give the effect of the original margins on the content area.)
  6. Add the original left margin value to the field caption’s reserve (the space reserved within the field’s “box” for displaying the caption): “Layout palette > Caption > Reserve” and add the left margin value to the value currently set in the Reserve property. This will move the content area back to its original horizontal position prior to removing the margins.

So there you have it: a shaded caption! Now that you’ve done these steps, all you need to do to change the shade is change the field’s background color (like in step 1).

Remember that you can always store a field you’ve formatted this way as a custom object in the Object Library so that you can easily re-use it again in other forms without having to go through these steps again.

To illustrate this a little better, I’ve included a sample form that shows the various ways to shade a field:

Download Sample [pdf]

Minimum Requirements: I created this form using Designer 8.1.1 SP2 and Acrobat 8.1.2 however this technique should work at least back to Designer 7.1 and Acrobat 7.0.5.


Posted by Stefan Cameron on June 13th, 2008
Filed under Designer,Tutorials