Koha ILS

Guest Post: Electronic library cards in Koha

Today we have a guest post by Paul Landers of the Texas Tech University Health Sciences Center, Preston Smith Library.

Inspired by the airlines’ electronic boarding passes, we are beta-testing some custom code on our Koha server to allow our patrons to self-service create a library eCard photo on their smartphone. See how it works here: http://www.ttuhsc.edu/libraries/ecards.aspx

Our solution relies upon a single new custom HTML file on our Koha server, a jQuery library to generate the barcodes, and some jQuery added to our OPAC. Also, Kyle had to add a patch to our Koha instance to expose the non-editable patron barcode field in the OPAC.

If any libraries would like to see it in action, here is a Hello World account for our OPAC:

eRaider username: hello_world
password: world

Our custom code:

  • NOTE – we had to replace some older barcode readers which could not read smartphone screens
  • Prerequisite – Koha must expose the non-editable patron barcode field in the OPAC.
  • Requires the jQuery barcode library (http://barcode-coder.com/en/barcode-jquery-plugin-201.html)
  • Must enable CORS (Cross Origin Resource Sharing) in Apache on the Koha server
  • Create the following custom HTML file on the Koha server:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="jquery_min.js"></script>
<script type="text/javascript" src="jquery_barcode.min.js"></script>
<script type="text/javascript">

//define our global
var cardnumber = "ERROR";

$(document).ready(function() {
//anonymous, self-executing function
    $(function () {
        if (window.opener != null && !window.opener.closed) {
// get some data from the parent window
            var parent = $(window.opener.document).contents();
            var cardnumber = parent.find("label:contains('Card number')").next('input').val();
            var surname = parent.find("#borrower_surname").val();
            var firstname = parent.find("#borrower_firstname").val();
            //var phone = parent.find("#borrower_phone").val();
            //var phonepro = parent.find("#borrower_phonepro").val();
            //var email = parent.find("#borrower_email").val();
            //var emailpro = parent.find("#borrower_emailpro").val();

$("#bcTarget").barcode(cardnumber, "code39", {barWidth:2, barHeight:100, moduleSize:3, showHRI:true});

img.center {

#container {

#container2 {
margin: 0 auto;

p.center {
<div id="container">
<img class="center" src="https://somelibrary.com/path/to/logo.png" />
<p class="center"><span id="surname">Lastname</span>, <span id="firstname">Firstname</span></p>
<div id="container2">
<div id="bcTarget"></div>
<p> </p>
  • Add the following jQuery to the OPAC:


//ecard barcode creator - requires a custom html file also be served by the Koha server itself.
// create the cardmaker function:
function cardmaker() { 

//add a new eCard button underneath the cardnumber field on the OPAC My Details page:
if (window.location.pathname.match(/.*opac-memberentry\.pl$/)) {
jQuery("label:contains('Card number')").parent().after('<li><button type="button" id="ecard">eCARD</button></li>');