1. Primo New UI in 90 minutes Alon Botvinik – Tier 2 Support Manager
Download this presentation:
Ex Libris Knowledge Center >
Cross-Product >
Conferences and Seminars >
2018 Technical Seminar
Primo New UI in 90 minutes
Alon Botvinik – Tier 2 Support Manager

2. Welcome and Introductions
Tier 2 Support Manager
Graduated with B.Sc from Hadassah College Jerusalem
Started at Ex Libris January 2010
Alon Botvinik

3. Session Objectives Session Description Session Objective(s)
Understanding the steps implementing the Primo New UI.
New UI Customization Manager utility, including customizing images, modifying CSS, and other examples of popular customizations.
Go Live procedures, back office configuration and making sure that your Primo is ready to use HTTPS.
Session Description
By the end of this sessions you will know, understand and/or be able to:
Activate the New UI
Use the Customization Manager Utility
Perform common customizations
Prepare your Primo to use HTTPS
Session Objective(s)

4. Target Audience for the Session:
Primo Multi-Tenant Direct, Dedicated, and Total Care customers
Systems, Technical or Public Services Librarians
IT and Web staff of the libraries
Target Audience for the Session:

5. 1 2 3 4 5 Agenda New UI activation Using the Customization Manager
Customizing the New UI 4
Primo New UI go live action items 5
Next Steps, Support Resources and Feedback

6. New UI activation New UI URL Structure Activation In the Back Office
What happens after NEW UI is enabled?
Disabling Classic UI (new in February 2018)
Linking to the New UI from the Classic UI (new in February 2018)
New UI is enabled by default – however it is not automatically forces users to use it if they go to the Classic UI.

7. New UI - URL Structure
To access the New UI, plug in your server information and the View that you want to direct your users into the URL fields.

8. Activating the New UI Enable the New UI in the Back Office:
Primo Home > Ongoing Configuration Wizards > Institution Wizard
Enable the New UI in the Back Office:
New UI Enabled – will redirect deep links, such as permalinks and services page links, to the New UI.
No need to change the base URL in the source system.

9. Enable New UI – Select View
When no View is selected, Primo will use whatever view the deep link contains, which on many occasions will be the View defined in the “Delivery Base URLs:” section for “Alma Services Page URL”

10. Enable New UI – Select View
When a View is selected, the services page will be redirected to the selected View regardless of the view in the original deep link.

11. Linking to the New UI from the Classic UI
Show!

12. Disabling the Classic Interface
DEMO in the BO
DEPLOY!
When checked will prevent users from accessing Classic UI and users will be redirected to the New UI homepage.

13. Customization manager Utility
Overview of the Utility Sections
Customization Package Template
Customization Package Components
Uploading the Customized Package

14. UI Customization Package Manager
DEMO: Navigate to this screen
Primo Home > Primo Utilities > UI customization Package Manager

15. Downloading the Template
DEMO from BO.
Notes for me:
Template package is the OTB template that can be used as a basis to your customizations. Some or all parts of its content can be replaced with your customized folders.
Template package is downloaded as a zip file and needs to be unzipped on your PC.

16. Customization Package Content
DEMO with file

17. Customization Package Content – css folder
custom1.css –File for local CSS changes
README.md – Instructions for CSS changes
Readme.md:
css documentation
- Primo uses Angular Directives massively in this project
- To learn more about directives see:
>
- Primo uses external directives from the Angular-material framework :
>
- Those directives are tagged by a prefix : "md-"
- Primo also creates its own directives which are tagged by the "prm-" prefix.
Example:
```
<header layout="column" layout-fill class="topbar-wrapper">
<prm-topbar>
</prm-topbar>
<prm-search-bar (search-event)="prmSearch.onSearchBarSearchEvent()">
</prm-search-bar>
<md-progress-linear class="header-progress-bar animation-scale-up-down" md-mode="indeterminate" ng-show="prmSearch.searchInProgress">
</md-progress-linear>
</header>
- You can see in the example how we use :
1. An HTML5 tag - header
2. A Primo directive : prm-topbar , prm-search-bar.
3. An external material design directive : md-progress-bar :
>
- When defining css rules it is important to understand the css cascading/specifity logic:
>
>
- When you start working on customizing your css be aware of the ability to define css selectors based on the directive name, which is actually equivalent
to an html tag - this will enable you changing the design of a component cross-system without relying on id's/classes
- For the example above we can define selectors:
prm-topbar input {....}
prm-topbar.md-primoExplore-theme input {....}
- Primo is using a theme inside angular-material to define a palette of colors see:
>
- This means that you will often encounter a class "md-primoExplore-theme" attached to elements.
##Recipes/Examples:
# css Recipe 1 - Color Scheme
- Open a new command line window
- cd to the project base directory (C:\**\**\primo-explore-devenv)
- Run `gulp css-colors` to save the OTB css file
- Run `css-color-extractor primo-explore/tmp/app.css --format=css > primo-explore/tmp/colors.css` to extract the color definitions from the OTB css file and copy the css rules to primo-explore/custom/css/custom1.css
Run the following steps repeatedly until you are satisfied with the result
- Choose a color from the interface (using your browsers' dev tools or extensions such as colorzilla)
- Choose the new color from your library color scheme
- Replace all values in the custom1.css file
- Save and refresh your browser
# css Recipe 2 - Moving the Facets to the Left
- Select the parent container containing the search result and the facets
- Copy the selector definition using your browsers' dev tools
- Define the container as
display:flex;
flex-flow:row-reverse;
- complete css definition:
prm-search > md-content.md-primoExplore-theme .main {
display: -webkit-flex; !* Safari *!
-webkit-flex-flow: row-reverse wrap; !* Safari 6.1+ *!
display: flex;
flex-flow: row-reverse wrap; }
.screen-gt-sm .sidebar{
webkit-flex: %;
flex: %;

18. Customization Package Content – html folder
home_en_US.html – Home Page HTML file
README.md – Instructions for HTML changes
Readme.md:
html documentation
- In this folder you will find static html files in their OTB state
- You can edit the html to comply with your library requirements
- Note that you can use Angular Material directives in your html:
>

19. Customization Package Content – img folder
README.md – Instructions for image uploads
The img folder is used for uploading custom images to Primo
Library Logo
Library favicon
Resource Type Icons
Following images can be customized:
Notes:
Logo is now uploaded via BO. Or by package - library-logo.png
Most images can be customized, can add your own. See this busy agenda cat?

20. Customization Package Content – js folder
Custom.js – File for local Java Script customizations
README.md – Instructions for Java Script changes
Check out the github!

21. Creating the Central Package
Requires Super Admin permissions to the Back Office
Relevant for consortia customers who share resources
Choose CENTRAL_PACKAGE from the View dropdown menu
DEMO
Internal note: Central Package is available in environments that are “sharing” consortium_type under General Configuration > Installation
The Central package defines the base formatting for all member institutions in a consortium.
To create the Central package:
From the Owner drop-down list, select All Institutions.
From the View drop-down list, select CENTRAL_PACKAGE.
Under the Download a Package section, click Download to download the Template package.
Create the new package from the template:
Uncompress the template.
Change the name of the VIEW_CODE folder to CENTRAL_PACKAGE.
Use the browser's inspect functionality to determine which CSS elements to modify in the new Front End UI.
Update the relevant files that are stored under the directories shown in the following figure. Remember to add any new or updated images to the img folder.
Compress the view's package. In this example, you would compress the CENTRAL_PACKAGE folder.
Upload the new package:
Under the Upload Package section, click Choose File.
Specify the name of the compressed package.
Click Upload.
Deploy your view.

22. Creating the View-Level Package
Requires the following institution-level permissions to the Back Office:
Admin
View Manager
Total Care User
Utility Manager
DEMO
To create a view-level package:
1. From the Owner drop-down list, select your institution.
2. From the View drop-down list, select your view.
3. Under the Download a Package section, click Download to select one of the following templates:
-Template package – This template defines a package's folder structure and includes the files (such as custom1.css and home_en_US.html) needed to create a package.
-Central package – For member institutions in a consortium, download the Central package if you want to override settings from it and the out-of-the-box configuration.
4. Create the new package from the template:
a. Uncompress the template.
b. Change the name of the VIEW_CODE folder to your view's code.
c. Use the browser's inspect functionality to determine which CSS elements to modify in the new Front End UI
d. Update the relevant files that are stored under the directories shown in the following figure. Remember to add any new or updated images to the img folder.

23. Uploading the Customized Package
The Customized Package should be compressed into a .zip file
The package name should be the same as the View Code
DEMO on Maria’s package
It is recommended to use 7zip or Winrar to compress the file.
In order for the system to recognize your customizations, you must retain the package structure (including folder and file names). In addition, it is necessary to retain the file names for images and other files that you modify and include in your customization package.
Primo Home > Primo Utilities > UI customization Package Manager

24. Common New UI customizations
Home Page
Brief Results
Images
Full Display
Primo-Alma Mashup CSS

25. Home Page – Page Components1 2 3
The homepage roughly consists of three main parts –
1. The top bar
2. The search bar
3. The background and main section

26. Home Page – Creating a Custom Color Scheme
.prm-primary-bg.prm-hue1, prm-search-bar.prm-hue1, prm-spinner.prm-hue1.overlay-cover.light-on-dark:after, prm-topbar .top-nav-bar{
background-color: #579BAB; }
Example: Add the following code to the custom1.css file:

27. Home Page – Creating a Custom Color Scheme
.prm-primary-bg, prm-search-bar, prm-spinner.overlay-cover.light-on-dark:after{
background-color: #287E7F; }
To customize the Search-Bar add the code below
DEMO

28. Home Page – Customizing the HTML file
Original Home Page
DEMO
-This is also where you would put your Ask a Librarian link.

29. Home Page – Customizing the HTML file
Customized Home Page
DEMO!

30. Home Page - Clickable Logo
Choose your view
Choose your file
Insert the desired URL
The UI Customization Package Manager allows you to upload a clickable logo, which redirects users to a specified URL when it is clicked in the new Primo UI. When using this method, no other configuration is needed to make your logo clickable.
Open the UI Customization Package Manager (Primo Home > Utilities > UI Customization Package Manager).
In the Upload Logo section, click Browse to locate and select the image that you want to use for your institution's logo.
Click Upload to upload your selection the to Front End server. If you want to remove the logo, click Delete.
If you want to redirect users to a page other than the Primo Home page, specify a URL in the Logo Clickable URL field.
Click Save to save your changes.
Deploy the changes to the Front End.
Primo Home > Primo Utilities > UI customization Package Manager

31. Home Page - Clickable Logo
Original Logo
Customized logo with link to
DEMO logo.png

32. Home Page – Reordering Top-Bar Components
/*re-order My Library Card and Sign in/out links */
.md-toolbar-tools .md-fab-action-item:nth-child(1) {position:absolute;right:300px; top:0;}
.md-toolbar-tools .md-fab-action-item:nth-child(2) {position:absolute;right:150px;top:0;}
.md-toolbar-tools .md-fab-action-item:nth-child(3) {position:absolute;right:0px;top:0;}
Add the following code to the custom1.css file:
Certain New UI changes will require CSS code rather than a click in the Views Wizard.
An example for that will be switching places between the sign in and library card links.
The CSS on this slide does just that.

33. Home Page – Reordering Top-Bar Components
Before
After
DEMO #3
Change the order of the links in the Sign in menu ( My library card, language)

34. Brief Results - Move “Expand My Results” to the Bottom
Before

35. Brief Results - Move “Expand My Results” to the Bottom
/*Move Expand results to bottom of page */
prm-facet div div div.sidebar-section.margin-top-small.margin-bottom-medium.compensate-padding-left:nth-child(2) {
order:100; }
Add the following code to the custom1.css file:

36. Brief Results - Move “Expand My Results” to the Bottom
After
DEMO #4

37. Brief Results – Change Facet Bar Location
The New UI allows you to use the Views Wizard to configure facets’ position
DEMO with Deploy

38. Brief Results – Change Facet Bar Location
On the Left
On the right

39. Brief Results – Facet Display
Primo Home > Ongoing Configuration Wizards > Views Wizard >Tiles Configuration > Brief Display > Refine My Results (Facets)
DEMO
Different facets can be configured for different tabs.
Facets can be sorted by size or alpha-numerically.
You can configure the amount of items to display per facet using the “Items to Display” column. Inputting zero will collapse the facet entirely and show no items.

40. Brief Results – Facet Display
Here is an example of collapsed facets.

41. Customizing Images img Folder Favicon Library Logo Resource Type Icons
In the Classic UI images had to be uploaded to the server, and then referenced in the CSS file.
In the New UI this process is more straightforward.
As shown previously in the session the Customization Package contains an “img” folder. You will upload your customized files there.
The customized images will need to follow some naming rules in order to ensure that the system properly calls them.
For example, let’s customize some resource type icons.

42. Customizing Images – Starting Point
<type>article</type>
<type>reference_entry</type>
We’re going to customize the icon for the following resource types:
Article
Reference Entry
<on the next page>
3. Book
4. audio

43. Customizing Images – Starting Point
<type>book</type>
<type>audio</type>
Note the display/type code values from the PNX – we will construct the file names based on those.

44. Customizing Images
I’m taking random pictures from the internet as example to show that resource type icons can be any png files.

45. Customizing Images – Final Result

46. Full Display – Change order of Tabs
This is the original tab order. We’ll refer to the tabs in the middle as “Tabs”, and the tabs on the left as “Navigation menu”.
The tabs and the navigation bar are linked to each other, but their order is configured separately, using CSS.

47. Full Display – Change order of Tabs
/* Re-order Tabs */
.full-view-inner-container {
display: flex;
flex-direction: column; }
#getit_link1_0 {order: 1;}
#getit_link2_0 {order: 2;}
#links {order: 3;}
#action_list {order: 4;}
#details {order: 5;}
#tags{ order: 6;}
#virtualBrowse {order: 7;}
This is the code you would use to reorder the actual tabs.

48. Full Display – Change order of Tabs
/*Re-order the left side navigation*/
[aria-label="Top"] { order: 0 !important;}
[aria-label="View Online"] { order: 1 !important;}
[aria-label="Online Access"] { order: 2 !important;}
[aria-label="View It"] { order: 3 !important;}
[aria-label="Get It"] { order: 4 !important;}
[aria-label="In the library"] { order: 5 !important;}
[aria-label="Locations / request item"] { order: 6 !important;}
[aria-label="Additional Services"] { order: 7 !important;}
[aria-label="Links"] { order: 8 !important;}
[aria-label="Send to"] { order: 9 !important;}
[aria-label="Details"] { order: 10 !important;}
[aria-label="Virtual Browse"] { order: 11 !important;}
[aria-label="Tags"] { order: 12 !important;}
[aria-label="Citations"] { order: 13 !important;}
And this is the code that you would use to reorder the navigation menu.
Note that we have multiple similar values, such as “View It” and “View Online” – that is because availability tabs change codes based on the items configuration.

49. Full Display – Change order of Tabs
The code in the previous slides will be added to the custom1.css file and uploaded in the customization package.
This is the result.

50. Primo-Alma mashup CSS
For Alma-Primo installations CSS and labels inside the View it and Get it tabs are controlled in Alma

51. Primo-Alma mashup CSS - Alma
- A skin will need to be created in Alma on the Manage Skins page by clicking “Add Skin”.
- Existing skins can be modified by clicking the ellipsis > edit.
Alma Configuration Menu > General > User Interface Settings > Delivery System Skins

52. Primo-Alma mashup CSS - Alma
Once on the Add a Skin page you will need to:
Assign the skin a unique name. The name also doubles as the skin’s code so try to be consistent and not use spaces.
Select the New UI radio button. This will decide what package will be downloaded when you click “Default Zip file”.
Use the “Default Zip file” to download the default CSS, which after modifying, you would upload in the last section of the page.

53. Primo-Alma mashup CSS - Primo
- After uploading the skin to Alma it will need to be defined in the related delivery templates in Primo by adding parameter req.skin=<view_code> to the template.
See example for Almaviewit and Almagetit templates.
THIS IS NOT NECESSARY IF THE SKIN NAME MATCHES THE PRIMO VIEW CODE.
Primo Home > Advanced Configuration > All Mapping Tables

54. Primo-Alma mashup CSS - View Alma Open URL
Right click on the frame
View frame source
If you added the skin to the template in Primo and want to see if it’s being called you can view the View It tab’s OpenURL.

55. Primo-Alma mashup CSS - Veiw Alma Open URL
Remove the ‘view-source’ from the URL
Viewing the OpenURL can be useful in many situation for diagnosis purposes, for example if the View it or Get It tabs are not displaying the content you expected.

56. Primo New UI go live action items
HTTPS Checklist - Getting ready to switch to HTTPS
PDS Configuration Check (Alma Customers)
Login to the knowledge center

57. HTTPS Checklist – Institution Wizard
Convert Base URLs in the Institution Wizard to use
Primo Home > Ongoing Configuration Wizards > Institution Wizard

58. HTTPS Checklist – API Base URL
To change the API URL to HTTPS use the “ILS API Configuration” mapping table
After saving and deploying, the new URL will now be available in the Institution Wizard

59. HTTPS Checklist – Templates Mapping Table
Thumbnail URLs should be changed to use HTTPS for on-premises (local) customers.
Any templates that are not using a placeholder such as {{alma_base}}, but a static URL, will need to be updated to run over HTTPS.
For example – Naxos, Kanopy, and bX templates.
In the Templates mapping table you would need to check the following: VS
Thumbnails for hosted customers are using an ex libris proxy to anonymize requests sent to google, so no change is needed for hosted environments.
Primo Home > Advanced Configuration > All Mapping Tables

60. PDS Configuration Check (Alma Customers)
New UI does not load correctly after log in / Sign in fails
Primo is configured with PDS for authentication and Alma as the ILS
PDS uses Alma for Patron Information
Symptoms:
The Primo and Alma Institutions are not the same: MYU vs. MYU_INST
PDS is not configured with a <PDS_INSTITUTE>_primo.tags file which maps the two institutions
Cause:
Customers with no server access will need to open ticket to Support.

61. PDS Configuration Check (Alma Customers) - Resolution
Create a functioning .tags file
Objective:
Log into the PDS server (usually a Front End server) as the primo user
Enter the commands:
pds_root
cd conf_table
Create a tags file for Primo called <PDS_INSTITUTE>_primo.tags, replacing <PDS_INSTITUTE> with your PDS Institution (e.g. MYU_primo.tags)
Steps:

62. PDS Configuration Check (Alma Customers) - Resolution
Add the code below to the tags file, replacing <PRIMO_INST> and <ALMA_INST> with the Primo and Alma Institution codes respectively
[ATTRIBUTES_VALUES_MAPPING]
institute,<ALMA_INST> = institute,<PRIMO_INST>
[END]
Repeat all the steps for all PDS/Front End servers
Steps (continuing):

63. Next Steps, Support Resources and Feedback

64. Next Steps and Resources
Include documentation links in the CKC relative to your topic:
Primo New UI - All the resources in one page

65. Next Steps and Resources
Additional support resources within the ExLibris Ecosystem:
Idea Exchange
Developer Network
2018 Technical Seminar Presentations (Cross-Product section of CKC)

66. Questions?
Any Final Questions?

67. Session Feedback
We Value Your Feedback! Please complete the brief Session Comment Card:

68. Thank You!