Developer
Doug Eriksen (Seattle University)
Description
This procedure allows you to insert custom links at the bottom of the drop-down menu in the upper right-hand corner of your Primo pages.
System Components
PBO Customization Manager
Skillset Requirements
Primo Back Office (PBO), JavaScript, and CSS
Be familiar with Making changes in your local package
Accessibility
Not tested for accessibility. The code does put the “aria-label” into the declaration, so it should have the same accessibility as the rest of that menu.
Browser Support
Tested on Firefox, Chrome, Safari, on Mac, and the new Chrome-based Edge on Windows.
Implementation
Overview
To enable this module, you will need to:
- Declare the directive and options in your custom.js file
- Style the button in your custom1.css file
Steps
- Access your Primo Back Office (PBO)
- In the “Deploy & Utilities” menu, select “Customization Manager”
- At the top of the page, make sure you have the view you want to work with selected.
- Download your package:
- If you have previously uploaded a package click the “Download” button next to the label like “MyViewId package”
- If you have not previously uploaded a package click the “Download” button next to the label “Template package”
- Unzip your package with any zip utility (but you will need a specific utility for zipping, see below)
In your local package, in the custom.js file, include the module ‘eShelfLinks’ in your app definition. For example:
var app = angular.module('viewCustom', ['eShelfLinks']);
- Also in the custom.js file, insert the code below and customize with your links:
app.value('eShelfOptions', {
items: [
{
text: "COCC Library",
label: "COCC Library",
link: "https://www.cocc.edu/library",
icon: "content:ic_link_24px"
},
//etc.
]
}); - In your custom1.css file, insert the following:
/* eshelf.menu link customizations */
a.custom-link{
color:inherit;
padding-bottom: 0px;
padding-top: 5px;
padding-left:3px;
}
a.custom-link:hover {
text-decoration: none;
background-color: unset;
box-shadow: none;
}
custom-directive md-icon {
opacity: 0.5;
} - Zip your package; the zip file must have the name MyViewId.zip (where MyViewId is the name of your view) and it must preserve the original folder and file structure. For Windows users, ExLibris recommends using the program 7Zip (you can download at http://www.7-zip.org/). For Mac users we recommend using Terminal with the following procedure:
- (If the folder is on your desktop) Open Terminal
- Enter the command: cd Desktop
- Enter the command: zip -r foo.zip foo -x “*.DS_Store” (where foo is the folder to zip)
- Other zip utilities introduce additional files into the zip package and it will not validate in the PBO.
- In the PBO Customization Manager click the “Choose File” button, select the zip file you just created, then click the “Upload” button.
- Click the “Deploy” button near the top of the page to deploy the changes.