February 15, 2017

Back to Blog
Implementing WorldCat button for zero-result searches
Created by: Jeremy McWilliams, Lewis & Clark College
Description: This customization enables you to add a button to the new Primo UI that will send the user’s search to Worldcat if their Primo search returns zero results.
System components: Package Manager/PBO, Javascript
Skill set requirements: PBO, Javascript
Implementation steps:
Package Manager method
This can be accomplished two ways: in a Primo Back Office code table, or using the Package Manager.
Primo Back Office Code table method
- Navigate to FE Code Table-> Front End -> Error Message->default.nui.noresults.description
- In the description field, place the following code, replacing your Worldcat URL with the bolded text below:
There are no results matching your search "{{term}}". <a href="https://watzek.on.worldcat.org/search?queryString={{term}}" onmouseover='this.style.textDecoration="none"'> <button class="md-raised md-button md-primoExplore-theme md-ink-ripple" type="button" ng-transclude="" aria-label="Search WorldCat" style='margin-left:0;margin-right:0;'> <img src="custom/LCC_NEWUI/img/worldcat-logo.png" width="22" height="22" alt="worldcat-logo" style="vertical-align:middle;"> Search WorldCat</button> </a>
- Save the entry, and then deploy the code table

- Open custom.js in your local package
- Insert the following code, replacing the link in quotes with your custom WorldCat instance (e.g. https://watzek.on.worldcat.org) and the sentence in quotes with the text you’d like to appear when the button is shown (all code below is also available to copy/paste here). Note: in custom.js, this must be pasted after the following line:
var app = angular.module('viewCustom', ['angularLoad']);
function addWorldcatButton(opts){
app.component('prmSearchResultListAfter', {
require: {
prmSearchCtrl: '^prmSearch' },
controller: 'worldcatButtonController',
template: `<md-card class="default-card _md zero-margin md-primoExplore-theme" ng-hide="getZeroResults()"> <md-card-title>` + opts.title + `</md-card-title> <md-card-content> <md-button class="md-raised" ng-click="searchWorldCat()"> <img src="https://cdn.rawgit.com/Alliance-PCJWG/primo-explore-worldcat-button/7ee112df/img/worldcat-logo.png" width="22" height="22" alt="worldcat-logo" style="vertical-align:middle;"> Search WorldCat </md-button> </md-card-content> </md-card>` })
.controller('worldcatButtonController', ['$scope', '$mdDialog',
function($scope, $mdDialog) {
var vm = this;
vm.$onInit = function() {
$scope.wcBase = opts.link;
$scope.$prmSearchCtrl = vm.prmSearchCtrl;
$scope.getZeroResults = function() {
if ($scope.$prmSearchCtrl.searchService.searchDone && $scope.$prmSearchCtrl.searchService.searchStateService.resultObject.info) { $scope.searchTerm = $scope.$prmSearchCtrl.searchService.searchFieldsService.mainSearch; return ($scope.$prmSearchCtrl.searchService.searchStateService.resultObject.info.total !== 0); } }; $scope.searchWorldCat = function() { window.open(($scope.wcBase + "search?databaseList=&queryString=" + $scope.searchTerm), '_blank'); }; }; }]); }
addWorldcatButton({
title: 'Your search returned zero results, but more might be available by searching WorldCat.',
link: 'https://yourworldcaturl.worldcat.org/'
}); - Zip and load your local package to the Primo Back Office
- Deploy your view
Related customizations
Comments (0)