Left Menu Right Menu
March 7, 2016

Add a "Report a Problem" Link in Primo Actions Menu

This customization appends a “Report a Problem” link into the Actions menu on the display.do page and the Details tab for all records in Primo.



Clicking on the link takes the user to a locally-configured Drupal form (for example, http://library.wwu.edu/content/4769?permalink_path=WWU:CP71166664350001451), which is prepopulated with the record’s openURL link and record-level permalink.

Note that permalink_path is the output of the JavaScript (it’s a variable/value pair), which is passed to a PHP script in the Drupal webform.  This script constructs the permalink and adds it to the form, along with the OpenURL link to the record.

Created by: David Bass & Lesley Lowery, Western Washington University

System components: CSS, JS, PHP, local webform

Skill set requirements: CSS, JavaScript, web form creation using Drupal or other web content management system. Also, JavaScript/web form integration using PHP.

Accessibility: The actions drop-down has been made keyboard-accessible. Institutions should use accessible form design (WEBAIM) when building their web form.

Browser compatibility: IE10+, current versions of Safari, Firefox, and Chrome

Mobile compatibility: Tested on iOS and Android mobile devices

Implementation steps: 

  1. Go to the code repository at https://bitbucket.org/wwulibraries/primo-customizations.
  2. Download the files
    Video (3:23): http://screencast.com/t/GTEOdhodnX
    1. Download the source files common.js and report-a-problem.js and place them in the file storage location of your choice (either on a local server or loaded to the PBO).
    2. In Line 40 of report-a-problem.js, replace “http://library.wwu.edu/content/4769” with the URL for your library’s web form for Primo problem reporting.
    3. Enter the following lines in your Primo view’s footer.html file (configured in the PBO Static HTML tile for that view):

      <script>
          var WWU_PRIMO = {
              institution : "01ALLIANCE_INST", /*what is your institution code?*/
              file_host : "/path/to/primo",     /* where are your Primo files hosted?  */
              error_email : "help.email@any.edu",          /* what email address should we show the end-user to ask for
              help?  */
              DEV_MODE : false,
          };
      </script>

      <script type="text/javascript"  src="/path/to/common.js"></script>
      <script type="text/javascript"  src="/path/to/report-a-problem.js"></script>

    4. Add PHP script to webform
      The output of the JavaScript (variable/value pair) must be passed to a PHP script in the local webform.  This script constructs the permalink and adds it to the form, along with the OpenURL link to the record.  The script used by WWU’s Drupal webform is below - your webform will need to have similar script to parse the output of the JavaScript.

      <?php

      $permalink_path = filter_input(INPUT_GET, 'permalink_path', FILTER_SANITIZE_URL);
      // $permalink_path = isset($_GET['permalink_path']) ? $_GET['permalink_path'] : '';

      $permalink = "http://onesearch.library.wwu.edu/" . $permalink_path;


         drupal_add_js('
        jQuery(document).ready(function(){
                jQuery("#edit-submitted-openurl").val(document.referrer);
                jQuery("#edit-submitted-page-record").val("' . $permalink .'");
           });',
        'inline'
        );

      ?>
  3. Finishing up
    Video (3:12): http://screencast.com/t/7YEsBhqv7h
    1. Paste the content of report-a-problem.css into your existing Primo customized CSS file (which you can download from the PBO if you don’t have it stored on a local server).  If your CSS files are stored locally, save the file.  If you upload your CSS to the PBO, save and re-upload the file.
    2. Go to the CSS mapping table.  Find the line containing the CSS profile used by your view and add the following URL to the profile, just prior to your locally-customized CSS file.  Separate this URL from the others with semicolons.
      http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
    3. Deploy the CSS mapping table and your view.  Clear the browser cache to view the customization.


Related customizations

Back to Blog
Comments (0)
Reply To Article