Receipt Editing in Evergreen 1

I've worked at a library for over 10 years. For most of that time, the receipts we've given people that check out our items have essentially been plain text, dot-matrix printouts of barely more than a title and date. In late 2008 we joined a consortium running the Evergreen Integrated Library System. Suddenly everything was different! This was better, that was worse, no one knew what this thing was, and those features weren't even there yet. The receipts, though, were very similar.

Something about them is very different though. Now there is an option to change the templates for the receipts and mold them into whatever shape or style you might want. It doesn't require using any bizarre forms processing language or choosing from one or two equally bad layouts in an options file, these templates are made of regular HTML with a few placeholders for the patron or item specific information.

Think about the other items given to your patrons as they walk out the door. Your program fliers probably aren't just a short paragraph typed up in Word's default font are they? Is your website a single page with dark Times New Roman on a light background? I thought not. (I hope not.)


Update 4/17/2012: I didn't see it until today, but Aaron Schmidt wrote a great article for the User Experience blog on LibraryJournal's site, explaining more about the reasons you might care about improving the looks and information usability of your receipts. He does a much better job of explaining the why; after you've read his article (go on, it's a short post) come back here for some how.


So, what is the default, anyway?

Welcome to Your Library Branch!
You checked out the following items:

---

1. Reading: the bookening
   Barcode: 31234000000014 Due: 2012-01-21 4:52 PM
2. Watching: the movening
   Barcode: 31234000000023 Due: 2012-01-14 4:53 PM

---

YRLIB 2012-01-07 16:53
You were helped by JASON

The basic information is here; the book is due back in 2 weeks, the movie in 1, and the barcode is included in case you have cause to need it. You can parse out what you need, but aside from the subtitles you wouldn't know one is a book and the other a movie. The dates are also absolutely tape-on-the-glasses nerdstyles; I mean, I love me some ISO 8601 (this approximation, less so), but I don't know anyone that uses it for non-computer things. You can also see from the last line that we still enter all of our user information IN ALL CAPS. HELLO FROM 1985. (Don't tell me about postal this or that, I don't care.)

At JCPL, anything handed to a patron or frequently used by staff is based on the following layout.

LOGO!	Jackson County
	Public Library

Your Library Branch

Suzie checked out:

1. Reading: the bookening, book by Author McWriter
   Due: Saturday, Jan 21
   Barcode: 31234000000014
2. Watching: the movening, dvd
   Due: Saturday, Jan 14
   Barcode: 31234000000023

Call us at (555) 876-5309
Visit us online at http://Example.com/

You were helped by Jason

YRLIB 2012-01-14 16:53

Plenty of changes here, if you look closely at the second item there's obviously some kind of textomancy happening, the dates are also written in an easier to read manner, and there's almost nothing left that's in all caps (no database changes, for better or worse). There's also local library branding and the patron's first name. That adds a nice little touch of personalization and will really help those families where each child wants to check out their own items. To try to preserve my sanity, the branch name and phone number are workstation aware, so one set of templates is used at all of our locations without edits. Neat.

Since Evergreen receipt templates are just HMTL, that's all you really need to know to make changes, but adding CSS is an easy way to up the attractiveness. To try to stay below LD₅₀ levels of dull, I'll assume that everyone has a passing familiarity with both and I'll largely ignore that. You can make your receipts look however you want, or you can just borrow from my example. It's the Javascript that I'll get to later that will really make it shake.

So, here's the template for that default receipt:

----Header----
Welcome to %LIBRARY%!<br />
You checked out the following items:<br />
<hr />
<ol>

----Line Item----
<li>%title%<br />
Barcode: %barcode% Due: %due_date%

----Footer----
</ol>
<hr />
%SHORTNAME% %TODAY_TRIM%<br />
You were helped by %STAFF_FIRSTNAME%

Templates have header, line item, and footer sections. The line item section is repeated for each item checked out, renewed, etc. The text between percent signs are the library/patron/item text placeholders. Generally speaking the upper case placeholders work anywhere and the lower case only work in the line item. The good news is that there are many more than the ones we see here; to see them all, there's a Macros button in the template editor. Keep in mind that each receipt type (checkout, checkin, holds, etc.) has a different list, so check it out.

So I upgraded the look of our checkout template, what does it look like now?

----Header----
<style type="text/css">
  body { font-family: Verdana, Arial, sans-serif; font-size: 10pt; margin: 0px; }
  .smaller { font-size: 90%; }
  #footerdata { font-size: 80% }
  #bbox { border: 2px solid black; border-right: 0px; border-left: 0px; margin: 4px 0px 4px 0px; padding: 4px 0px 4px 0px;}
  #list { margin: 0in 0in 0in -.125in; }
</style>
<table style="margin:auto;">
<tr><td rowspan="2"><img style="width: 64px; height: 64px; border: 0;" src="http://example.com/receipts/Logo.gif" /></td><td style="font-size: 16pt;">Jackson County</td></tr>
<tr><td style="font-size: 16pt;">Public Library</td></tr>
</table>
<div style="text-align: center;">%LIBRARY%</div>
<br />
<span class="rcpt xf-TitleCase">%PATRON_FIRSTNAME%</span> checked out:
<div id="bbox">
<ol id="list">

----Line Item----
<li style="padding-bottom:2px;">
<span style="font-weight: bold;" class="rcpt xf-Trim">%title%</span><span>, <span class="rcpt mod-EmptyHideParent mod-CircModToCode">%circ_modifier%</span></span><span> by <span class="rcpt mod-EmptyHideParent xf-LastFirstToFirstLast">%author%</span></span><br />
<span class="smaller">
Due: <span style="font-weight: bold;" class="rcpt xf-DateToLongDate">%due_date%</span><br />
Barcode: %barcode%
</span>
</li>

----Footer----
</ol>
</div>
<div style="text-align:center;" class="smaller">Call us at (555) <span class="rcpt src-ShortName xf-ShortNameToPhone">%SHORTNAME%</span><br />
Visit us online at http://Example.com/</div>
<br />
<span id="footerdata">
You were helped by <span class="rcpt xf-TitleCase">%STAFF_FIRSTNAME%</span><br/>
<br />
<span class="rcpt dest-ShortName"></span> %TODAY_TRIM%<br/>
</span>

Witchcraft! What are all of these spans doing up in here? And whither these false CSS classes? The answers require a little backstory…