HTML Layouts for ID Cards

In this article, you'll learn how to use custom barcodes on HTML ID Card layouts. This article assumes a working knowledge of the overall documentation for HTML Layouts.

Using Custom Barcodes

HTML ID card layouts can use a custom field to generate barcodes on ID cards. Here's how you'll do that:

1. Set up a custom field in any of the areas where you can do that (Contact, Admissions, Academics, etc.).
2. Add data to that field on profiles where appropriate.
3. When editing your HTML ID Card layout, find where the source code says something like {{{barcode card.person.student.id "CODE39" marginLeft=0}}}
   • See this article at barcode-labels.com to learn about the different types of barcodes you can use.
4. Scroll down on the page in the Available Variables area and click under the 'person' area; it should be just above the 'student' section. You'll see a drop-down with a list of custom fields.

5. Choose the custom field you set up earlier and then click Get Handle.
6. Copy just the data inside the curly brackets and paste it into the barcode field you found above, replacing the bit that says card.person.student.id. It could look something like this: {{{barcode person.field_1234 "CODE39" marginLeft=0}}}
7. Save your progress by clicking Save in the top right and test it out with a person who has that field.

If (and when) you run into problems, contact Populi Support and we'll be happy to help.