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

1. Access your Primo Back Office (PBO)
2. In the “Deploy & Utilities” menu, select “Customization Manager”
   
   
   
3. At the top of the page, make sure you have the view you want to work with selected.
   
   
   
4. Download your package:
   1. If you have previously uploaded a package click the “Download” button next to the label like “MyViewId package”
   2. If you have not previously uploaded a package click the “Download” button next to the label “Template package”
      
      
5. 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']);
   
   
6. 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.
  ]
});
   
7. 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;
}
   
8. 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:
   1. (If the folder is on your desktop) Open Terminal
   2. Enter the command: cd Desktop
   3. Enter the command: zip -r foo.zip foo -x “*.DS_Store” (where foo is the folder to zip)
9. Other zip utilities introduce additional files into the zip package and it will not validate in the PBO.
10. In the PBO Customization Manager click the “Choose File” button, select the zip file you just created, then click the “Upload” button.
11. Click the “Deploy” button near the top of the page to deploy the changes.