Create an HTML template that can be used for "mail merge" style multi-page PDF generation
In this article we are using the same InDesign file that is used in "Create a simple HTML template".
Marking variable text in InDesign
The "Script Label" palette in InDesign is usually next to the Scripts palette in the same window.
If you select the name in the Ticket example you will see that it has the Script Label "attendeename". Similarily the violet boxes below the pdfChip icon have "Barcode" and "QR_Code".
In addition we want to print the current number on each of the individual tickets. Therefore the InDesign file has a text "No 100 of 500" where 100 and 500 are obviously placeholders for the actual numbers. Since these are only part of the same text it is not possible to assign them different Script Labels. You could now either modify the whole text or - as we have done in this example - use a Character Style that is used nowhere else in the document. We are using "NumberCount" and "TotalCount".
Before we start the export...
The InDesign folder contains a subfolder "Resources". (If you are using the download from the "Create a simple HTML template" example it will have "Resources.off" instead. In that case just remove the ".off".)
If you have exported the InDesign file before you will see a message that the previous result will be overwrittten:
You may click "Yes" to confirm or rename the previous result if you want to keep it.
The mail merge result
The js folder has the Hyphenator.js file and an attendees100.js file. If you now convert the index.html into PDF using pdfChip you will create a 100 pages PDF file with individual tickets for exactly 100 names. Each page has a barcode and a QR code that encodes the name of the ticket owner. And finally each ticket says which number it is out of the 100 tickets that we have created.
How did that work?
As said before we are using CSS Classes and IDs to identify objects in the HTML file.
Above entries are the ones for the QR Code, the Barcode and the two entries for the numbers.
The "attendees100.js" file
Each of the calls beginning with "document.getElementsByClassName" identifies one of the objects using either the Script Labels that we have used "attendeename", "Barcode" and "QR_Code" or by using their Character Style names "span_NumberCount" and "span_TotalCount" (or rather what the export script has made of them by prefixing them with span_).
The code that is put into the "innerHTML" of each of these objects is HTML code into which the current object from the list of names is placed to create individual tickets. For the Barcode and the QR_Code again pdfChip specific code is used. This is explained other parts of this pdfChip manual, you should go there if you want to know more about that part of the story.