Primo VE - Customization guide September 2018

Last updated
Save as PDF
Share
1. Share
2. Tweet
3. Share

Created By: Shahar Beck

Created on: 9/16/2018

Primo VE

Customization guide

Using

Discovery layer code tables

JavaScript

CSS

XML

Ver. 01

September 2018

Contents

Introduction

UX Design & Development

How to use this guide?

Alma code tables

Adding jQuery

The changes:

Remove yellow "sign in" banner

Change the yellow "sign in" location & style

Physical item - Request button style

Specific volume request button

Mobile – Fix search input for journals & databases

Available Online – Remove label & link on the detailed record

Sections re-order (locate "Send to" above "Details")

Virtual Browse ("You may like") – replace colors with an image

Make the Library card clean – Remove duplicate and unnecessary details

Solving the "No records found" message with further assistance

Change the availability order in the "Get it" tab

Databases – The inside-out approach.

Database tagging

Additional information

Local Theses – Separate facet & New MARC field

Adding a logo to Primo outgoing emails

Appendix A: Suggested tags for common databases

Introduction

UX Design & Development

Primo VE implementation project at the Technion Libraries has started on July 2018.

The vanilla version had some basic configuration and required changes to fit the Technion needs.

From a UX perspective, the Primo search environment feels like a new and welcoming change to search the library information resources, such as electronic and physical books and journals, databases, theses and more. It has an updated UI and the search experience has become more pleasant.

Nevertheless, we have found that the users are having difficulties with basic features; the request item flow and that unneeded information is presented.

We have made the following changes with one goal in mind – Improve the academic search experience (aSX). The library should provide the users, from researchers to undergraduates, the relevant and easy-to-use tools in order to improve the information resources accessibility.

We hope this guide will assist those who see the great importance of improving the academic search experience as we do and we are glad to share our insights with the Primo community.

All comments and suggestion are welcome.

shahahrbeck@technion.ac.il

How to use this guide?

We present the changes we have made on Primo VE using information and images. In most cases we show the "before" and "After" status to make it more visual.

Every change is followed by an "How to" section.

Use this icon map to implement the code in the correct place.

Code table: Alma discovery labels

CSS

JavaScript

XML & XSL (for letters)

Alma code tables

Many of the changes in this guide require the use of Code table values.

The code table location is: Discovery à Labels (under Display Configuration) à Code

Example:

Code: nui.request.signin
The table name is: Get it services labels
Click on ... (3 dots) and select Edit

Insert the new value in the Description column.

In the following example:

<iframe onload="moveYellowSectionOfSignInToBottomInFindInLibrary(this); replaceLocationsBetweenSignInLinkAndTheTextNearHim(this);" style="display: none;"></iframe>Use Technion email for full access

Don't forget to Save

Adding jQuery

The JavaScript (as well as the CSS and images) folders can be download for the "view configuration":

Discovery à Configure Views (Under Display Configuration) à Select … (3 Dots) à Edit
Select the Manage Customization Package à Download "Current View Customization Package"

To use most of our code changes, you first need to add the following jQuery library to the custom JavaScript file in the js folder:

/************* Primo VE - Adding jQuery library ****************/
(function () {
"use strict";
'use strict';
var app = angular.module('viewCustom', ['angularLoad']);
/*******************************************************************/
/*In case of CENTRAL_PACKAGE - comment out the below line to replace other module def.*/
/*var app = angular.module('centralCustom', ['angularLoad']);*/
/*********************************************************************/
var jQueryScript = document.createElement("script");
jQueryScript.src = "https://code.jquery.com/jquery-3.3.1.min.js";
document.getElementsByTagName("head")[0].appendChild(jQueryScript);
jQueryScript.onload = function() {
$(document).ready(function(){
});
};
})();

The changes:

Remove yellow "sign in" banner

The yellow "sign in" in Primo is located in many places. A simple usability test made inside the library revealed that users do not see this line. A "banner blindness" syndrome.

In the efforts to eliminate this banner we made the following changes:

Remove the banner on the main page.

The login should only appear when it is necessary to proceed to the next stage.

/************* Remove the yellow alert banner ***************************/
prm-search > prm-alert-bar {
display: none;

Change the yellow "sign in" location & style

1. Move the "sign in" request for physical items underneath the item's location and availability.

2. Change the "Sign in" yellow banner into a green button.

Before:

After:

The goal of this change is to make the user's flow as follow:

See the title
See the item location and availability
Sign-in with institution email if he wishes to order the item.

How to?

Code: nui.request.signin

Description:

<iframe onload="moveYellowSectionOfSignInToBottomInFindInLibrary(this); replaceLocationsBetweenSignInLinkAndTheTextNearHim(this);" style="display: none;"></iframe>Use Technion email for full access

// nui.request.signin
function moveYellowSectionOfSignInToBottomInFindInLibrary(theElement) {
$(theElement).closest("prm-opac").css("display", "flex");
$(theElement).closest("prm-opac").css("flex-direction", "column");
$(theElement).closest("div[layout='column']").css("order","1");
}

/********* New style for Sign in button & request item button ************/
.btnStyle {
background-color: #519F47;
color: white;
padding: 10px 26px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
border: 2px solid #519F47;
}
.btnStyle:hover {
background-color: #F3F3F3;
color: #58A9DB;
}

Physical item - Request button style

Our intention is to make the users feel as if they are familiar with the system UI and know what to do and what to look for in order to request an item. We created a request button that has the same design as the "sign in" for a clear Call-To-Action (CTA) button.

Before:

Problems

The request style is not clear
The request location is above the item that the user wishes to request.

After:

Solutions

Keep the CTA button in the same style as the sign-in
Move the CTA button to the end of the request flow.
Keep this mental model for specific volume request as well:

How to?

Code: AlmaRequest

Description:

<iframe onload="moveRequestSectionToBeBelowLocationsSection(this)" style="display: none;"></iframe>Request item

Code: nui.items.back

Description:

<iframe onload="bringBackRequestItem(this)" style="display: none;"></iframe>Back to Items

// AlmaRequest
function moveRequestSectionToBeBelowLocationsSection(theElement) {
$(theElement).closest("prm-opac").css("display", "flex");
$(theElement).closest("prm-opac").css("flex-direction", "column");
$(theElement).closest("div[layout='column']").css("order","1");
$("md-divider[class='inner-divider md-primoExplore-theme']").remove();
$(theElement).closest("prm-service-button[method='GET']").css("height","60px");
$(theElement).closest("button").removeClass();
$(theElement).closest("button").addClass("btnStyle");
$(theElement).closest("button").on("click", function() {
$(theElement).closest("button").css("display","none")
});
}
// nui.items.back
function bringBackRequestItem(theElement) {
$(theElement).closest("button").on("click", function() {
var checkExistenceOfElement = setInterval(function() {
if ($("button[class='btnStyle']").length > 0) {
clearInterval(checkExistenceOfElement);
$("button[class='btnStyle']").css("display","block");
}
}, 50); // check every 50ms
});
}

/****************** New style for request item ****************************/
.btnStyle {
background-color: #519F47;
color: white;
padding: 10px 26px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
border: 2px solid #519F47;
}
.btnStyle:hover {
background-color: #F3F3F3;
color: #58A9DB;
}

Specific volume request button

Keep this mental model for specific volume request as well:

Before:

After:

How to?

Code: AlmaItemRequest

Description:

<iframe onload="giveStyleToRequestItemButtonInsideTheList(this)" style="display: none;"></iframe>Request item

// AlmaItemRequest
function giveStyleToRequestItemButtonInsideTheList(theElement) {
$(theElement).closest("button").removeClass();
$(theElement).closest("button").addClass("btnStyleInsideList");
}

/*********** New style for request item inside the list *****************/
.btnStyleInsideList {
background-color: #519F47;
color: white;
padding: 6px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
border: 2px solid #519F47;
}
.btnStyleInsideList:hover {
background-color: #FFFFFF;
color: #58A9DB;
}
@media only screen and (max-width: 800px) {
.btnStyleInsideList {
margin-right: 30px;
}
}

Mobile – Fix search input for journals & databases

While using Journal Search & Database search on mobile the input field shows only the "x", but the letters are not shown.

This can only be resolved by rotating the phone to landscape mode.

Before: (no input can be inserted)

After: (Input available with suggestions)

How to?

Code: nui.journalsearch.title

Description:

<iframe onload="removeJournalSearchYellowBoxForMobile(this)" style="display:none;"></iframe>Journal Search

Code: nui.databasesearch.title

Description:

<iframe onload="removeDataBaseYellowBoxForMobile(this)" style="display:none;"></iframe>Database Search

// nui.journalsearch.title
function removeJournalSearchYellowBoxForMobile(theElement) {
if (window.innerWidth < 600) {
var checkExistenceOfElement = setInterval(function() {
if ($("input[id='searchBarJournal']").length > 0) {
clearInterval(checkExistenceOfElement);
var theURL = window.location.href;
if (theURL.search('lang=en') != -1) {
$("input[id='searchBarJournal']").attr("placeholder","Journal Search (Title or ISSN)");
} else if (theURL.search('lang=he') != -1) {
$("input[id='searchBarJournal']").attr("placeholder","כתבי עת (כותר או ISSN)");
}
$("input[id='searchBarJournal']").css("font-size","0.8em");
}
}, 50); // check every 50ms
$(theElement).parent().parent().remove();
}
}
// nui.databasesearch.title
function removeDataBaseYellowBoxForMobile(theElement) {
if (window.innerWidth < 600) {
$(theElement).parent().parent().remove();
}
}

Available Online – Remove label & link on the detailed record

When selecting a brief record the detailed record is opening by default, by pressing either on the title or the "Available Online". In the detailed record, we decided to remove the link label since it is only scrolling down to the "View it" section underneath.

Before:

After:

How to?

Code: nui.brief.results.tabs.brief

Description:

<iframe onload="removeAvailabilityLink(this);" style="display:none;"></iframe>Top

// nui.brief.results.tabs.brief
function removeAvailabilityLink(theElement) {
//$(theElement).closest("prm-brief-result-container[ng-if=\"$ctrl.service.serviceName==='brief'\"]").attr("id","bla");
var checkExistenceOfElement = setInterval(function() {
if ($("prm-brief-result-container[ng-if=\"$ctrl.service.serviceName==='brief'\"]").length > 0) {
clearInterval(checkExistenceOfElement);
$("prm-brief-result-container[ng-if=\"$ctrl.service.serviceName==='brief'\"]").attr("id","detailsAboutRecord");
}
}, 50); // check every 50ms
}

/************************ Remove Availability Link **********************************/
#detailsAboutRecord div[class="search-result-availability-line-wrapper"] {
display: none;
}
#detailsAboutRecord {
height: 149px;
}

Sections re-order (locate "Send to" above "Details")

We have moved the "Actions" section, default label "Send to" to be placed above the Details of the record.

The changes are in done by CSS but has an effect on 2 places:

The sections (the brief, item location, send to, details, links., etc.)
The navigation menu inside the detailed record.

Note! The aria-label in the left navigation code is in accordance with the "Description" given in Alma code table. Make sure you change them accordingly.

How to?

/********************* Location change of sections ************************/
#full-view-container >*:first-child {
display: flex;
flex-direction: column;
}
#brief {
order: 0 !important;
}
#getit_link1_0 {
order: 1 !important;
}
#getit_link1_1 {
order: 2 !important;
}
#action_list {
order: 3 !important;
}
#details {
order: 4 !important;
}
#links {
order: 5 !important;
}
#virtualBrowse {
order: 6 !important;
}
/******** Location change of links in left navigation bar **************/
[aria-label="Top"] {
order: 0 !important;
}
[aria-label="Find Online"] {
order: 1 !important;
}
[aria-label="Find in library"] {
order: 2 !important;
}
[aria-label="Send to"] {
order: 3 !important;
}
[aria-label="Details"] {
order: 4 !important;
}
[aria-label="Links"] {
order: 5 !important;
}
[aria-label="You May Like"] {
order: 6 !important;
}

Virtual Browse ("You may like") – replace colors with an image

The virtual browse section has by default verity of colors when no book thumbnail is available. Users complained about visual overload when looking at the items. We have used a new image with the description of "No image available" size: 110x100 and replaced it.

Image name: no_image_110x100_gr.png
You can download it from:

https://technion.primo.exlibrisgroup.com/discovery/custom/972TEC_INST-972TEC_V1/img/no_image_110x100_gr.png

And put it in the img folder of your customization package.

Before:

After:

How to?

/************************ Give images in You May Like Section, when there aren't images there **********************************/
.fallback-img {
content:url("../img/no_image_110x100_gr.png");
display:block!important;
}

Make the Library card clean – Remove duplicate and unnecessary details

The reader card has by default some fields that will not provide any value to the user.

Primo VE does not give the option to deactivate those fields.

For example:

Item status: Loaned (The user has this item, so it is already on loan).
ILS Institution code and name.

Before:

After:

How to?

Code: loans.ils_institution_code

Description:

<iframe onload="removeElement($(this).parent().parent());" style="display: none;"></iframe>Ils Institution Code:

Code: loans.ils_institution_name

Description:

<iframe onload="removeElement($(this).parent().parent());" style="display: none;"></iframe>Ils Institution Name:

function removeElement(elementToRemove) {
elementToRemove.remove();
}

Solving the "No records found" message with further assistance

One of the worst user experiences can occur when the system returns "no results" but do not provide the user with any further assistance to try something else.

The default "No results" page in Primo is:

Before:

After:

This message does not provide any informative details or assistance. We decided to make the following changes:

Text changes and use of micro-copy to make it more pleasant. We used Sorry! But Oops is also very common.

We added the reference team email address for assistance.
Since we use EBSCO EDS as an articles discovery tool (not Primo Central), we provide a CTA button that will redirect the user to EDS with his initial search query. This way we try to eliminate the two search engines dilemma.

How to?

Code: nui.noresults.title

Description:

<font color="#CE0F69">Sorry!</font>

Code: nui.noresults.description

Description:

There are no results matching your search "{term}}".</br>Try our dedicated search engine for articles; book chapters; standards; patents and more...</br><a href="https://search.ebscohost.com/login.a...term}}&lang=en" onmouseover='this.style.textDecoration="none"'> <button class="md-raised md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Search articles" style='margin-left:0;margin-right:0; background-color: #FDD54A; font-size: 14px;'>Articles & More</button> </a>

Code: suggestions2

Description:

<tech class="tec_hide">NOT_DEFINED</tech>

Code: suggestions3

Description:

<tech class="tec_hide">suggestions3</tech>

Code: suggestions4

Description:

<tech class="tec_hide">suggestions4</tech>

Code: suggestions5

Description:

<tech class="tec_hide">suggestions5</tech>