Just did something at work I thought was pretty cool so I whipped out this crude tutorial.
You know how to create form fields in Acrobat.
I designed a certificate template for a teacher to distribute to her students. She loved it but then, basically, asked, “So do I just have you make a bunch of these and type their names in them so I can send them to the printer each time I have a class?”
No. The answer was most definitely no. That wasn’t going to happen. I didn’t want to simply tell her no, however, and seem like an uncooperative team player (which is the only possible outcome of me stating that was her job, problem, circus, monkeys, etc.).
That method requires the text file to be tab-delimited requiring her to know enough Excel for that. Thus, importing the list is unacceptable because that means telling her she has to do something and learn something. Customers don’t like doing and learning things.
Creating an Acrobat form in which she could type or paste a list of names—theoretically, I thought, the button she’d then click would convert that list into an array and puke out a bunch of certificates. This required some thought and research on my part but I figured
- the idea of typing/pasting a list in a single field would be much faster and more reasonable to ask for than separate fields for each name
- One field is prettier than a bunch of fields
- Number of students vary so there would either be too few fields or I’d have to figure out an elegant way to dynamically create more as needed and, oh geez, it’s already a pain in the butt.
While I mulled over how to do that in a way that didn’t suck, I put together a prototype for a single name so I could hammer out the process and code. As it turns out, the prototype worked far faster and better than the other solutions. Check it out…
Step #1: Create the Certificate
Basic “background” created in Photoshop. I had the Director write his signature large on a blank sheet of copier paper with a sharpie, scanned it, and changed that layer’s Blend Mode to Multiply. You’re welcome.
Saved the PSD as a PDF named GreatCertGenerator.pdf and, in Acrobat, added two text fields that would populate dynamically: recipientName and date.
Step #2: Create the Form
Just laid this out quickly in Photoshop.
I also created button, which you’ll see in a moment, in a separate file. I’ll explain why the button is separate very soon. Saved it as CertForm.pdf and imported it into GreatCertGenerator.pdf using the following lame, convoluted method (Acrobat, like MS Office, becomes more of a pain in the ass every single version):
- Click the Tools tab (Grr … it makes me angry even just writing it).
- Click Organize Pages (another step that didn’t used to be there!).
- Choose Insert > From File and navigate to CertForm.pdf, select Before Page 1 and click OK.
- Added two standard input text fields: singleName and myDate.
Originally, the form had only the Name field—the date was generated automatically on the certificate using the following code on page 1 (so it would happen as soon as the document opened):
var x = this.getField(“date”); x.value = util.printd (“mmmm dd, yyyy”, new Date())
var x = this.getField(“myDate”); x.value = util.printd (“mmmm dd, yyyy”, new Date())
Step #3: Make the Certificate a Template
- On the certificate page (page 2 for me), click the Tools tab.
- Click Organize Pages.
- Choose More > Page Templates.
- Type a Name for the template (mine is “EmptyCert”).
- Click Add and click Yes when asked to confirm using the current page. EmptyCert is now listed among the Page Templates.
- Poke EmptyCert in the eye to toggle visibility. The page disappears from Organize Pages as well as the Page Thumbnails panel. This makes the process all magic and mystery for the users.
Step #4 Create the Magic Button
In Button Properties, under the Options tab (not the Appearance tab):
- I made the text in Photoshop, so I chose Icon Only for Layout.
- I chose Push for Behavior. You could, instead, choose None and, instead use separate images for each State in the Icon and Label section.
- Click Choose Icon and navigate to your button (which must be saved as a PDF).
- Click Close.
Here’s the code and explanations a piece at a time:
Identify the template.
var a = this.getTemplate (“EmptyCert”);
On the template, we’ve got a couple form fields waiting as placeholders.
Fill recipientName on the template with the contents of singleName in the form.
getField(“recipientName”).value = getField(“singleName”).valueAsString;
Fill date on the template with the contents of myDate in the form.
getField(“date”).value = getField(“myDate”).valueAsString;
Create (“spawn”) a new page based on that template.
Step #5 Creating the Over-the-Top Awesomeness
New Problem: When the user clicks Add Grad, they’re jumped to the new page/certificate. I hated the fact that the user must then stop, grab the mouse, click the first page in the Thumbnails panel to return to the form, click the Name filed, then move their hands back to the keyboard to type the next name. Life is way, way to freakin’ short for that nonsense.
So the PDF works like this at ludicrous speed: When the user opens the doc—the Name field is autofocused and ready.
- User types the Name, presses Tab and Enter to generate the cert
- New cert opens—user presses Tab and Enter to return to the form (GoTo step 1)
Lather, rinse, repeat (really, really fast).
After creating all the certs they need, the user saves the PDF and emails it to their printer.