Electronic Library Cards in Koha

by Lucas Gass on Oct 29, 2020

Forgot your library card at home but would still like to checkout materials? Adding the ability for patrons to access their electronic card in Koha is easy! All the patron has to do it log into the OPAC and they’ll have access to a scannable library card. Here is all you will need:

• A public report that turns a borrowernumber into a barcode
• Some custom jQuery in your OPACUserJS system preference
• Some custom CSS in your OPACUserCSS system preference

OK, first let’s build the report. We need this in order to return the correct cardnumber. It is going to be really simple report:

select cardnumber
from borrowers
where borrowernumber = <<borrowernumber>>

Before you save this report you’ll want to make sure it is public. We won’t add any other information to this report, the cardnumber is all we need. We’ll be able to use jQuery to get the rest of the information we need. Make a note of the report number, we’ll need to include this in our custom jQuery

Now we are going to need the custom jQuery which will go in the OPACUserJS system preference:

/* start e-card jQuery */
if ($('#usermenu').length) {
 let ecard_report_number = 1;
 let eborrowernumber = $('.loggedinusername').attr('data-borrowernumber');
 $.getJSON(`/cgi-bin/koha/svc/report?id=${ecard_report_number}&sql_params=` + eborrowernumber, function(data) {
 $.each(data, function(index, value) {
 let ecard_number = data[0][0];
 let ecard_name_obj = $('.userlabel').text();
 let ecard_name = ecard_name_obj.split("Welcome, ");
 $('#menu').prepend('<li><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".ecardModal">View your e-card</button></li>');
 $('body').append('<div class="ecardModal modal hide" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"></h5><h3>Your Library eCard</h3> </div><div class="modal-body"> <div id="library_ecard"> <div id="name_photo"> <i class="fa fa-user-circle-o" aria-hidden="true"></i> <span><h3>' + ecard_name[1] + '</h3></span> </div><div style="text-align: center;"> <svg id="barcode_placeholder"></svg> </div></div></div><div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div></div></div>');
 $.getScript("https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.0/barcodes/JsBarcode.codabar.min.js")
 .done(function(script, textStatus) {
 var element = document.getElementById("barcode_placeholder");
 JsBarcode(element, ecard_number, {
 width: 6,
 height: 75,
 displayValue: true,
 });
 })
 });
 })
}
/* end e-card jQuery */

There is one line you’ll need to edit. It looks like this:

let ecard_report_number = 1;

Make sure that number corresponds to the report number you noted earlier.

That is everything you need to make the electronic card appear on ‘Your account pages’. It should appear above user menu to the left which includes ‘your summary’, ‘your account details’ , ‘your charges’, ect.

The last step is not necessary but will make the display of the electronic card look a little nicer. You can add the following to your OPACUserCSS:

/* e-card css */
#library_ecard{
 border: 4px solid gray;
 border-radius: 7px;
}

.fa-user-circle-o {
 font-size: 12vw !important;
 padding: 15px;
}

#barcode_placeholder {
 width: 90%;
}

#name_photo {
 display: flex;
 align-items: center;
}
/* end e-card css */

That’s it! Your users should now be able to access their electronic library card!