Left Menu Right Menu
May 13, 2020

External Search Facet


Developer

Jeremy McWilliams (Lewis and Clark College)
Modified for the Central Package by Tamara Marnell (Central Oregon Community College)

Code Repository

https://github.com/alliance-pcsg/primo-explore-external-search


Description

A facet is added to the sidebar with options for transferring the user's search to an external target, such as WorldCat or Google Scholar. The options can be configured with a custom heading and new entries for text, images, and functions to translate Primo's search query into the target's query syntax.

Image of Worldcat and Google Scholar in Primo facets

System Components

PBO and Package Manager

Skillset Requirements

PBO, JavaScript, and CSS

Accessibility

Not tested for accessibility.

Browser Support

Tested on Chrome, Firefox, Edge, IE11, and Safari.

Mobile Support

Tested on iPhone.

Implementation

Steps

1. In your local package, in the custom.js file, include the module ‘externalSearch’ in your app definition. For example:

var app = angular.module('viewCustom', ['externalSearch']);

If you are using other angular modules, include them in your app definition as well. For example:

var app = angular.module('viewCustom', ['toggleInstitutions', 'externalSearch']);

2. Also in the custom.js file, add the following lines of code within the anonymous function (that is, before the closing brackets at the end of the file).  All three components are necessary for the module to work correctly.

app
.component('prmFacetAfter', {template: '<external-search-facet />'})
.component('prmPageNavMenuAfter', {template: '<external-search-pagenav />' })
.component('prmFacetExactAfter', {template: '<external-search-contents />' });

By default, the module will display the facet with a heading of “External Search” and two links: one to generic WorldCat and one to Google Scholar.

To customize your facet with a custom title and/or a link to your institution’s local WorldCat Discovery subscription, copy the additional code below into your custom.js file.

app.value('externalSearchOptions', {
   facetName: '[CUSTOM NAME]',
   searchTargets: [
   { // WorldCat
     "name": "Worldcat",
     "url": "https://[WORLDCAT DOMAIN]/search?queryString=",
     "img": "/primo-explore/custom/central_package/img/worldcat-logo.png",
     "alt": "Worldcat Logo",
     mapping: function mapping(queries, filters) {
      var query_mappings = {
        'any': 'kw',
        'title': 'ti',
        'creator': 'au',
        'subject': 'su',
        'isbn': 'bn',
        'issn': 'n2'
        };
        try {
          return queries.map(function (part) {
            var terms = part.split(',');
            var type = query_mappings[terms[0]] || 'kw';
            var string = terms[2] || '';
            var join = terms[3] || '';
            return type + ':' + string + ' ' + join + ' ';
          }).join('');
        } catch (e) {
          return '';
        }
      }
    },
    { // Google Scholar
       "name": "Google Scholar",
       "url": "https://scholar.google.com/scholar?q=",
       "img": "/primo-explore/custom/central_package/img/google-logo.png",
       "alt": "Google Scholar Logo",
       mapping: function mapping(queries, filters) {
        try {
          return queries.map(function (part) {
            return part.split(",")[2] || "";
          }).join(' ');
        } catch (e) {
            return '';
        }
       }
     }]
   });


3. You can reorder the searches by arranging their objects within “searchTargets,” remove unwanted external searches by deleting the objects, and add other external searches by creating a new object in braces with the “name”, “url”, “img”, “alt”  and mapping parameters.  Use the Google Scholar and WorldCat entries in the code for reference.

Parameters
Type
Usage
 name  string  The name to display for the target.
 url  string (url)
 The base URL to which a Primo query transformed by mapping() will be appended.
 img
 string (url)  A URL to an icon representing the target.
 alt  string
 Provide alternative text of images for screen readers
 mapping  function  A function to translate Primo queries and filters to the target's syntax.  Will receive an array of queries and an array of filters.

For example, the code below removes Google Scholar and adds an institution’s Bento Box search before WorldCat, with a logo stored in the “img” directory of the customization package.

app.value('externalSearchOptions', {
  facetName: 'Try Another Database',
   searchTargets: [
    { // COCC Library Search
      "name": "COCC Library Search",
      "url": "https://barber.cocc.edu/search?q=",
      "img": "/primo-explore/custom/COCC/img/library-logo-small.png",
      "alt": "COCC logo",
      mapping: function mapping(queries, filters) {
       try {
         return queries.map(function (part) {
            return part.split(",")[2] || "";
         }).join(' ');
      } catch (e) {
        return '';
      }
     }
    },
{ // WorldCat
  "name": "Worldcat",
  "url": "https://centraloregoncc.on.worldcat.org/search?queryString=",
  "img": "/primo-explore/custom/central_package/img/worldcat-logo.png",
  "alt": "Worldcat Logo",
  mapping: function mapping(queries, filters) {
    var query_mappings = {
      'any': 'kw',
      'title': 'ti',
      'creator': 'au',
      'subject': 'su',
      'isbn': 'bn',
      'issn': 'n2'
    };
    try {
      return queries.map(function (part) {
       var terms = part.split(',');
       var type = query_mappings[terms[0]] || 'kw';
       var string = terms[2] || '';
       var join = terms[3] || '';
       return type + ':' + string + ' ' + join + ' ';
      }).join('');
     } catch (e) {
       return '';
       }
      }
     }
    ]
  });

Image of inserted CoCC Library Search and Worldcat facets

4. You can use CSS to order the External Search facet in the sidebar. The parent element uses flexbox in the column direction, so the property “order” applied to the facet’s parent div will determine placement in the sidebar. (Note: CSS rules may vary between institutions and will likely require future adjustments after new Primo version releases.)

New facets in sidebar

“Order” positions elements relative to siblings with the order property defined. In Primo the container divs for facets have no order defined by default, so assigning any order to the External Facet parent to will move it to the bottom of the list.

#facets .available-facets:nth-child(4) {
   order: 1;
}

To order the facet somewhere in the middle of the list, assign order properties to its siblings. For example, the rules below will tell the browser to position the local availability facet first, the External Search facet second, and everything else below them.

/* All facet groups */
#facets .available-facets {
order: 3;
}
/* The availability facet */
#facets .available-facets:nth-child(5) {
order: 1;
}
/* The External Search facet */
#facets .available-facets:nth-child(4) {
order: 2;
}

5. Zip and upload your package in the PBO.

6. Deploy your view.


Back to Blog
Comments (0)
Reply To Article