TIP 66: Creating Forms That Make Sense
Building forms can be fun (and creative!), but the process has its share of headaches. Calculations can be a particular hurdle in building formsparticularly order forms. In this tip, I'll show you how to plan and add calculations using a sample order form.
Just Juicy Fruits
If you have planned your adventures in form-building (as described in Tip 63), you know in advance what you need to calculate and which fields are involved. In my example, I have three productsoranges, limes, and lemons. My customer types an amount in the Quantity column, and the total for each product automatically displays in the Price column. Not only that, but a Subtotal, Tax, and Grand Total are automatically calculated as well. This very simple form shows you many of the ways you can plan and work with calculations. |
Rather than explaining how to build the form step by step, I'll describe the workflow in general terms that may be useful to your work; check out the sidebar for some hints to make the job simpler. Let's say we're setting up a PDF form that allows customers to order citrus fruit online. The oranges are priced at 77 cents apiece, lemons go for 47 cents each, and you can buy a lime for a mere 40 cents. We need a way for the customer to order multiples of each fruit, and then have the totals calculated. Here goes:
1. | Import the form structure. The example we're using consists of a table, labels, and a background we created in Microsoft Publisher and then converted to a PDF document. | 2. | Add the first text field, Quantity. In the Text Field Properties dialog, click the Format tab and choose Number from the pull-down list. Set the decimal places to 0you can't buy .25 of an orange, after all (Figure 66a).
Figure 66a. Be sure to use a number format for fields that require calculation.
| 3. | Add the remaining text fields. Plan how to add multiple fields so the new fields' names make sense (Figure 66b).
Figure 66b. Add groups of fields to the form depending on their use to make sure the automatic names are meaningful and useful to you.
| 4. | Customize the appearance of the additional fields as necessary. The values in the Price column all need decimal places since they calculate a dollar value, and the SubTotal and Grand Total fields need a $ sign as well. In the Format tab, shown in Figure 66a, change the Decimal Places value to 2 and select the $ sign from the Currency Symbol pull-down list. | 5. | Change the alignment for the currency fields. Select the fields and right-click/Control-click to open the shortcut menu. Click Properties to open the Text Field Properties dialog. Click the Options tab, and from the Alignment pull-down list, choose Right (Figure 66c). Now the fields' values will align.
Figure 66c. Users are accustomed to seeing dollar values aligned to the right; you can easily set this option.
| 6. | Add the first field calculation. The three products' values are the Quantity * Price. Double-click the first price field, named Quantity.0.1, to open its Properties dialog. Click the Calculate tab, then click the Custom calculation script button and click Edit to open the JavaScript Editor. Enter the calculation script for the first product:
JavaScript Pointers
JavaScript lets you assign actions to links, bookmarks, and in the case of the sample project in this tip, form fields. Here are some tips for using Acrobat JavaScript: Drag the dialogs away from your form on the program window so you can see your fields' names to type them correctly in the script. Alternatively, you can select them from a dialog. Before you close the JavaScript Editor, select and copy the script so you can paste it into the other products' Price field scripts. If you are using custom scripts, add and customize the scripts for all fields to keep focused. It's like using a batch file for your brain.
|
var a=this.getField("Quantity.0.0");
event.value=a.value*.77;
The script names a variable for the first field, var a, which is a programming "container" that holds whatever value your user types in the field, be that 1 orange or 100 oranges, for example. The rest of the first line makes a reference to the field, and then names the field in parentheses and quotations. The second line then defines an action that will take place in your form, which is to multiply whatever number your customer types in the field times the price per orange, which is $.77. Click OK to close the JavaScript Editor and return to the Properties dialog. The script is displayed in the dialog (Figure 66d). You can now close the Properties dialog.
Figure 66d. After you write a custom JavaScript, it is shown in the field's Properties dialog.
| 7. | Repeat with the other product fields that need a custom script. In the sample, the Price fields for the second and third product use a custom script. For each, paste the JavaScript into the JavaScript Editor and customize it. You need to change: | 8. | Add other custom scripts. You also need a similar custom script for calculating the tax. Again, you can paste the script into the JavaScript Editor and customize it. Give the variable its own name, use the SubTotal field, and use the tax rate in the calculation. Here's an example:
var d=this.getField("Total1");
event.value=d.value*.12;
| 9. | Add calculations for the Subtotal and Grand Total fields. The totals fields are simpler! Double-click the Subtotal field to open its Properties dialog and click the Calculate tab. You want a total of the three calculated fields. Click the "Value is the" radio button; click the pull-down menu and choose Sum (Figure 66e). Then click Pick to open a small dialog listing all the fields in your document. Choose those you want to add, which in this case are the three Price fields for the products, and click OK. Back on the Calculate tab, you can see that the chosen fields are added to the dialog (Figure 66f). Repeat with the Grand Total field, using the SubTotal and Tax fields.
Figure 66e. Some calculations can be done by picking fields from the form, such as a sum.
Figure 66f. When you choose fields, they are listed on the Calculate tab.
| 10. | Save the form. It's time to test your workthat's coming up in the next tip. |
Simplify Your Form Building, Simplify Your Life
Consider these ideas as you build a form: Make sure the design of the document can accommodate the size of the fields you intend to use. Set options that are common to all fields, such as the font and appearance, when you build the first field. Develop a system for adding extra fields. The sample project has three products, so I added a text field for the first product's quantity, and then added two multiple fields for the quantities of the other two products. The result is a sequence of numbered fields that make sense. Then I created a multiple for each of the products to use for calculating the total cost of each item. These fields' names are also logical. Rename fields if it makes sense to you. The set of three Total fields (Subtotal, Tax, and Grand Total) were renamed manually. When you want to change one property of several fields, such as the alignment, don't change each field individually. Shift-click to select the fields (in the sample, all the fields in the Price column) and then open the Properties dialog using the shortcut menu. When you change the alignment, the change is applied to all the selected fields. JavaScript is written for each field separately; calculations aren't allowed for a number of selected fields.
|
|