Basic HTML tagging of staff slips (Trillium work)
Guideline written by @Kajsa Bäckius and @Charlotte Whitt
Background
National library of Sweden (NLS) is going live with FOLIO Spring 2026. NLS has some specific requirements for layout of the printed slips, in order for all information to be displayed on printed slips in size A5. The slips has a duplicated layout, where the bottom slip is to stay in the position-marker in the closed stacks, and the top slip is to follow the book, when either in use by the patron at the library, or as a regular home loan.
Current situation
The existing plain layout functionality of patron notices in FOLIO do not leave sufficient options to do e.g. table layout, and do not have an option to have more advanced settings of the display in each cell of the table.
NLS and the Klemming team has therefore implemented basic HTML layout of staff slips. This new work will be part of the Trillium release. The work is described in Jira feature https://folio-org.atlassian.net/browse/UXPROD-5250
 NLS pick slip in old system | NLS Pick slip in FOLIO
|
|---|
In scope
By using HTML tagging,
Allow for columns or tables
Allow to crop large barcode images, by setting the hight and width of the image
Allow for aligning left, center, right in the different cells
Allow for the addition of containing boxes and lines
Option to fit to page - all content is contained to a single page.
Out of scope
A feature for completely changing the current use has been defined by the RA SIG working group on Reading Room Circulation Functionality - https://folio-org.atlassian.net/browse/UXPROD-5031, and some outline spike work in the ticket: https://folio-org.atlassian.net/browse/UXPROD-5158
Technical solution
Documentation on the technical solution can be found here on GitHub
Tips and tricks for the use of Basic HTML layout of the staff slips
When you create your staff slip then go to Settings > Circulation > Staff slips, and then we here will use the Pick slip as an example
Select the Pick slip and view in detailed view - here as default Maintained as raw HTML is not enabled.
Then click the Edit button, and add a check mark in the option Maintained as raw HTML, and this functionality will be enabled. Notice the two buttons to the right, above the Template content.
| Will display the list of tokens which can be added into the patron notice template. |
| Will preview the HTML layout with sample data. |
Notice this is not advanged use of the HTML5 and later versions of the Living Standard, but as the example below shows then you now definitely has many more options for better layout of your patron notice with this new functionality.
Real life example on how NLS is using the Basic HTML layout for the pick slips
<!--The slip contains of two tables, one for each half of an A5-page.-->
<!-- First half-->
<table border="1" style="width:99%; height:500px; border-collapse: collapse; table-layout:fixed; border-color: #000">
<!--Row 1 with 2 columns-->
<tr style="height:60px;">
<!--Column 1 66% of the row-->
<td colspan="2" style="width: 66%; border: 1px solid #e0e0e0;">
<!--This cell has a fixed height and the content will not overflow -->
<div style="height:60px; overflow:hidden;">
<--! Styling of the tokens -->
<span style="font-weight: bold; font-size: 150%">{{item.callNumber}}</span><br>
<span style="font-weight: normal; font-size: 100%">Libris: {{item.administrativeNotes}}</span>
</div>
</td>
<!--Column 3 33% of the row-->
<td style="width: 33%; text-align: left; border: 1px solid #e0e0e0; padding-right: 1.2em; font-size: 125%">
{{item.effectiveLocationSpecific}}<br>
</td>
</tr>
<!--Row 2 with 1 column>
<tr style="height:75px;">
<!--Column 1 99% of the row -->
<td colspan="3" style="border: 1px solid #e0e0e0; width: 99%; font-size: 150%; vertical-align: top;">
<!--This cell has a fixed height and the content will not overflow -->
<div style="height:75px; overflow:hidden;">
<b>{{item.primaryContributor}}</b>{{item.title}}<br>
</div>
</td>
</tr>
<!--Row 3 with 1 column -->
<tr style="height:75px;">
<!--Column 1 99% of the row -->
<td colspan="3" style="border: 1px solid #e0e0e0; width: 99%; font-size: 125%; vertical-align: top;">
<!--This cell has a fixed height and the content will overflow -->
<div style="height:75px; overflow:visible;">
<b>Vol/nr:</b> {{item.enumeration}} <b> Serie:</b> {{item.seriesStatements}}<br>
<b>År:</b> {{item.datesOfPublication}} <b> Uppl:</b> {{item.editions}} <b> Fys:</b> {{item.physicalDescriptions}}<br>
<b>Kommentar:</b>{{request.patronComments}}<br>
</div>
</td>
</tr>
<!--Row 4 with 3 columns. Displays the barcode images scaled. The size of the cells can not be scaled. -->
<tr>
<!--Column 1 33% of the row. -->
<td style="width: 33%; text-align: center; border: 1px solid #e0e0e0; transform: scale(0.6)">
<span style="font-size: 167%">Streckkod</span>
{{item.barcodeImage}}</td>
<td style="width: 33%; text-align: center; border: 1px solid #e0e0e0; transform: scale(0.6)">
<span style="font-size: 167%">Lånekortsnummer</span>
{{requester.barcodeImage}}</td>
<td style="width: 3%; text-align: center; border: 1px solid #e0e0e0; transform: scale(0.6)">
<span style="font-size: 167%">Systemnummer</span>
{{item.instanceHridImage}}</td>
</tr>
<!--Row 5 with 2 columns. -->
<tr>
<!--Column 1 66% of the row. -->
<td colspan="2" style="border: 1px solid #e0e0e0; width: 66%">
{{requester.patronGroup}}<br>
<div style="font-size: 200%">({{requester.middleName}}) {{requester.lastName}}, {{requester.firstName}}</div><br>
</td><br><br>
<!--Column 1 33% of the row. -->
<td style="border: 1px solid #e0e0e0; width: 33%">
<b>{{item.accessionNumber}}</b><br>
<div style="font-size: 200%; font-weight: bold; text-transform: uppercase; overflow:visible; margin-left:-40px;">{{item.loanType}}</div><br>
Beställd: {{request.requestDate}}
</td>
</tr>
</table>
<!-- Second half -->
<table border="0" style="width:99%; height: 450px; border-collapse: collapse; display:block">
<!--Row 1 with 2 columns. -->
<tr>
<!--Column 1 66% of the row. -->
<td colspan="2" style="width: 66%; border: 1px solid #e0e0e0">
<span style="font-weight: bold; font-size: 150%">{{item.callNumber}}</span><br>
<span style="font-weight: normal; font-size: 100%">Libris: {{item.administrativeNotes}}</span><br><br>
</td>
<!--Column 2 33% of the row. -->
<td colspan=1 style="width: 33%; text-align: left; border: 1px solid #e0e0e0; padding-right: 1.2em; font-size: 150%">
{{item.effectiveLocationSpecific}}<br>
<span style="font-weight: bold">{{item.accessionNumber}}</span></td>
</tr>
<!--Row 2 with 1 columns. -->
<tr>
<!--Column 1 99% of the row. -->
<td colspan="3" style="border: 1px solid #e0e0e0; width: 99%; font-size: 125%; ">
<b>{{item.primaryContributor}}</b>{{item.title}}
</td>
</tr>
<!--Row 3 with 1 columns. -->
<tr>
<td colspan="3" style="border: 1px solid #e0e0e0; width: 99%; font-size: 125%; vertical-align: top;">
<b>Vol/nr:</b> {{item.enumeration}} <b> Serie:</b> {{item.seriesStatements}}<br>
<b>År:</b> {{item.datesOfPublication}} <b> Uppl:</b> {{item.editions}} <b> Fys:</b> {{item.physicalDescriptions}}<br>
<b>Kommentar:</b>{{request.patronComments}}<br>
</td>
</tr>
<!--Row 4 with 3 columns. Displays the barcode images scaled. The size of the cells can not be scaled. -->
<tr>
<td style="width: 33%; text-align: center; border: 1px solid #e0e0e0; transform: scale(0.6)">
<span style="font-size: 167%">Streckkod</span> {{item.barcodeImage}}</td>
<td style="width: 33%; text-align: center; border: 1px solid #e0e0e0; transform: scale(0.6)">
<span style="font-size: 167%">Lånekortsnummer</span>
{{requester.barcodeImage}}</td>
<td style="width: 3%; text-align: center; border: 1px solid #e0e0e0; transform: scale(0.6)">
<span style="font-size: 167%">Systemnummer</span>
{{item.instanceHridImage}}</td>
</tr>
<!--Row 4 with 2 columns. -->
<tr>
<!--Column 1 66% of the row. -->
<td colspan="2" style="border: 1px solid #e0e0e0; width: 66%">{{requester.patronGroup}}<br>
<span style="font-size: 125%">({{requester.middleName}}) {{requester.lastName}}, {{requester.firstName}}</span><br> Beställd: {{request.requestDate}}</td><br><br>
<!--Column 2 33% of the row. -->
<td style="border: 1px solid #e0e0e0; width: 33%">
<span style="; font-size: 100%; font-weight: bold; text-transform: uppercase">{{item.loanType}}</span><br>
{{request.servicePointPickup}}
</td>
</tr>
</table>