Skip to main content
ExLibris
  • Subscribe by RSS
    • Back
    Primo
    Ex Libris Knowledge Center

    Primo VE - Customization guide September 2018

    1. Last updated
    2. Save as PDF
    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:

    1. /************* Primo VE - Adding jQuery library ****************/  
    2.   
    3. (function () {  
    4.     "use strict";  
    5.     'use strict';  
    6.   
    7.   
    8.     var app = angular.module('viewCustom', ['angularLoad']);  
    9.   
    10.     /*******************************************************************/  
    11.   
    12.         /*In case of CENTRAL_PACKAGE - comment out the below line to replace other module def.*/  
    13.   
    14.         /*var app = angular.module('centralCustom', ['angularLoad']);*/  
    15.           
    16.     /*********************************************************************/  
    17.       
    18.     var jQueryScript = document.createElement("script");  
    19.     jQueryScript.src = "https://code.jquery.com/jquery-3.3.1.min.js";  
    20.     document.getElementsByTagName("head")[0].appendChild(jQueryScript);  
    21.       
    22.       
    23.     jQueryScript.onload = function() {  
    24.         $(document).ready(function(){  
    25.               
    26.         });  
    27.     };  
    28.   
    29.           
    30. })();  

     

    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:

    1. Remove the banner on the main page.

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

    1. /************* Remove the yellow alert banner ***************************/  
    2. prm-search > prm-alert-bar {  
    3.     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:

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

    How to?

    Code: nui.request.signin

    Description:

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

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

    1. /********* New style for Sign in button & request item button ************/  
    2. .btnStyle {  
    3.     background-color: #519F47;  
    4.     color: white;  
    5.     padding: 10px 26px;  
    6.     text-align: center;  
    7.     text-decoration: none;  
    8.     display: inline-block;  
    9.     font-size: 16px;  
    10.     margin: 4px 2px;  
    11.     -webkit-transition-duration: 0.4s;  
    12.     transition-duration: 0.4s;  
    13.     cursor: pointer;  
    14.     border: 2px solid #519F47;  
    15. }  
    16.   
    17. .btnStyle:hover {  
    18.     background-color: #F3F3F3;  
    19.     color: #58A9DB;  
    20. }  

     

    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:

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

     

    Code: nui.items.back

    Description:

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

    1. // AlmaRequest  
    2. function moveRequestSectionToBeBelowLocationsSection(theElement) {  
    3.     $(theElement).closest("prm-opac").css("display", "flex");  
    4.     $(theElement).closest("prm-opac").css("flex-direction", "column");  
    5.     $(theElement).closest("div[layout='column']").css("order","1");  
    6.       
    7.   
    8.     $("md-divider[class='inner-divider md-primoExplore-theme']").remove();  
    9.       
    10.     $(theElement).closest("prm-service-button[method='GET']").css("height","60px");  
    11.       
    12.     $(theElement).closest("button").removeClass();  
    13.     $(theElement).closest("button").addClass("btnStyle");  
    14.       
    15.     $(theElement).closest("button").on("click", function() {  
    16.         $(theElement).closest("button").css("display","none")  
    17.     });  
    18. }  
    19.   
    20.   
    21. // nui.items.back  
    22. function bringBackRequestItem(theElement) {  
    23.     $(theElement).closest("button").on("click", function() {  
    24.         var checkExistenceOfElement = setInterval(function() {  
    25.             if ($("button[class='btnStyle']").length > 0) {  
    26.                 clearInterval(checkExistenceOfElement);  
    27.                 $("button[class='btnStyle']").css("display","block");  
    28.             }  
    29.         }, 50); // check every 50ms   
    30.     });  
    31. }  

    1. /****************** New style for request item ****************************/  
    2. .btnStyle {  
    3.     background-color: #519F47;  
    4.     color: white;  
    5.     padding: 10px 26px;  
    6.     text-align: center;  
    7.     text-decoration: none;  
    8.     display: inline-block;  
    9.     font-size: 16px;  
    10.     margin: 4px 2px;  
    11.     -webkit-transition-duration: 0.4s;  
    12.     transition-duration: 0.4s;  
    13.     cursor: pointer;  
    14.     border: 2px solid #519F47;  
    15. }  
    16.   
    17. .btnStyle:hover {  
    18.     background-color: #F3F3F3;  
    19.     color: #58A9DB;  
    20. }  

     

    Specific volume request button

    Keep this mental model for specific volume request as well:

    Before:

    After:

    How to?

    Code: AlmaItemRequest

    Description:

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

    1. // AlmaItemRequest  
    2. function giveStyleToRequestItemButtonInsideTheList(theElement) {  
    3.     $(theElement).closest("button").removeClass();  
    4.     $(theElement).closest("button").addClass("btnStyleInsideList");  
    5. }

    1. /*********** New style for request item inside the list *****************/  
    2. .btnStyleInsideList {  
    3.     background-color: #519F47;  
    4.     color: white;  
    5.     padding: 6px 20px;  
    6.     text-align: center;  
    7.     text-decoration: none;  
    8.     display: inline-block;  
    9.     font-size: 16px;  
    10.     margin: 4px 2px;  
    11.     -webkit-transition-duration: 0.4s;  
    12.     transition-duration: 0.4s;  
    13.     cursor: pointer;  
    14.     border: 2px solid #519F47;  
    15. }  
    16.   
    17. .btnStyleInsideList:hover {  
    18.     background-color: #FFFFFF;  
    19.     color: #58A9DB;  
    20. }  
    21.   
    22. @media only screen and (max-width: 800px) {  
    23.     .btnStyleInsideList {  
    24.         margin-right: 30px;  
    25.     }  
    26. }  

     

    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:

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

    Code: nui.databasesearch.title

    Description:

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

    1. // nui.journalsearch.title  
    2. function removeJournalSearchYellowBoxForMobile(theElement) {  
    3.     if (window.innerWidth < 600) {  
    4.         var checkExistenceOfElement = setInterval(function() {  
    5.             if ($("input[id='searchBarJournal']").length > 0) {  
    6.                 clearInterval(checkExistenceOfElement);  
    7.                 var theURL = window.location.href;  
    8.                 if (theURL.search('lang=en') != -1) {  
    9.                     $("input[id='searchBarJournal']").attr("placeholder","Journal Search (Title or ISSN)");  
    10.                 } else if (theURL.search('lang=he') != -1) {  
    11.                     $("input[id='searchBarJournal']").attr("placeholder","כתבי עת (כותר או ISSN)");  
    12.                 }  
    13.                 $("input[id='searchBarJournal']").css("font-size","0.8em");  
    14.             }  
    15.         }, 50); // check every 50ms   
    16.         $(theElement).parent().parent().remove();  
    17.     }  
    18. }  
    19.   
    20. // nui.databasesearch.title  
    21. function removeDataBaseYellowBoxForMobile(theElement) {  
    22.     if (window.innerWidth < 600) {  
    23.         $(theElement).parent().parent().remove();  
    24.     }  
    25. }  

     

    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:

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

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

    1. /************************ Remove Availability Link **********************************/  
    2. #detailsAboutRecord div[class="search-result-availability-line-wrapper"] {  
    3.     display: none;  
    4. }  
    5.   
    6. #detailsAboutRecord {  
    7.     height: 149px;  
    8. }  

     

    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?

    1. /********************* Location change of sections ************************/  
    2. #full-view-container >*:first-child {  
    3.     display: flex;  
    4.     flex-direction: column;  
    5. }  
    6.   
    7. #brief {  
    8.     order: 0 !important;  
    9. }  
    10.   
    11. #getit_link1_0 {  
    12.     order: 1 !important;  
    13. }    
    14.   
    15. #getit_link1_1 {  
    16.     order: 2 !important;  
    17. }  
    18.   
    19. #action_list {  
    20.     order: 3 !important;  
    21. }  
    22.   
    23. #details {  
    24.     order: 4 !important;  
    25. }  
    26.   
    27. #links {  
    28.     order: 5 !important;  
    29. }  
    30.   
    31. #virtualBrowse {  
    32.     order: 6 !important;  
    33. }  
    34.    
    35.   
    36. /******** Location change of links in left navigation bar **************/  
    37. [aria-label="Top"] {   
    38.     order: 0 !important;   
    39. }  
    40. [aria-label="Find Online"] {   
    41.     order: 1 !important;   
    42. }  
    43. [aria-label="Find in library"] {   
    44.     order: 2 !important;   
    45. }  
    46. [aria-label="Send to"] {   
    47.     order: 3 !important;   
    48. }  
    49. [aria-label="Details"] {   
    50.     order: 4 !important;   
    51. }  
    52. [aria-label="Links"] {   
    53.     order: 5 !important;   
    54. }  
    55. [aria-label="You May Like"] {   
    56.     order: 6 !important;   
    57. }  

     

    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?

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

     

    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:

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

     

    Code: loans.ils_institution_name

    Description:

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

    1. function removeElement(elementToRemove) {  
    2.     elementToRemove.remove();  
    3. }  

     

    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:

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

    Code: nui.noresults.description

    Description:

    1. 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:

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

     

    Code: suggestions3

    Description:

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

     

    Code: suggestions4

    Description:

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

     

    Code: suggestions5

    Description:

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

    1. .tec_hide {  
    2.     display: none;  
    3. }  
    4.   
    5. ul {  
    6.     list-style-type: none;  
    7. }  

     

    Change the availability order in the "Get it" tab

    This fix replaces the order of the availability in the "Get it" tab.

    This change is a solution to a request in Ex-Libris idea exchange. Also, it is not a Primo VE request. The issue still exists in Primo VE and we wanted to assist as much as we can.

    https://ideas.exlibrisgroup.com/forums/308176-primo/suggestions/33631111-change-order-of-availability-in-get-it-tab

    Before:

    After: