Since the export filter uses CSS IDs and Classes for all objects that it creates and since you can modify or replace any object in a HTML template that can be identified by means of such an ID or a Class you can basically modify everything in the HTML template for individualisation. However, this would be difficult to maintain, because if you would create a new object in a later version of your InDesign file the export script may change the order in the CSS so that all objects will get different names and you would have to modify your JavaScript.

Therefore it is much better to use a persistent identification means which can be found in the InDesign "Script Labels". Script Labels are text strings that are translated by the export script into CSS classes. These classes can then be used in the JavaScript to identify the variable objects and to replace or modify them during PDF page creation in pdfChip. These Script Labels will alway be assigned to "their" objects whatever you do with the rest of the InDesign file.

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".

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".)

The export script will copy all contents from this folder into the folder of the HTML template. In addition if the Resources folder contains a "js" folder it will automatically create references to the JavaScript files in this folder in the index.html file that it creates.

So, if you create a JavaScript that creates individual instances from your template you wil only have to put it into this place in order to attach it to any HTML template that the export script creates.

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 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.

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.

Further down in the not so long file you will see the entry for the actual name. In fact this name will not occur on any of the tickets that we have created. It is only a placeholder that is being replaced by the names that are taken from the JavaScript file.

The JavaScript file starts with 100 name entries.

The names are followed by a single function "cchipPrintLoop". This is a basic pdfChip function that allows you to take control of when a PDF page is created. You can now use JavaScript within this loop to modify the internal representation of the HTML file, the DOM (Document Object Model) and ask pdfChip to create a new page whenever you have done so by using the cchip.printPages() call. Modifying the DOM with JavaScript is standard web technology that is used on millions of web pages every second of the day.

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.