CSU Library Website Customization

Documentation of CSU Primo and LibGuides customization

Add Custom Help Box to Full View Section

Goal: 

We like the custom help box from Concordia University Library

Example: Hanging in judgment : religion and the death penalty in England / Harry Potter.

Sample Help box for Primo Full View

I looked it up their source code and modified to use our own links. However we are still deciding if we want include the report a problem link or not. 

CSUL Custom Code

******************************************

app is defined at the beginning of custom.js file. It is used for create All Metrics, Primo Search Logo, and custom No Search Results. We don't have create the module again. 

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

******************************************

Step 1: Create constants like text and URLs. app.constant();

Step 2:  Add the controller's constructor function to the module app using the .controller. app.controller();

Step 3: add component. app.component();

app.component('prmActionContainerAfter', {
bindings: { parentCtrl: '<' },
controller:'prmActionContainerAfterController',
    template: '\.....\'
 
 prmActionContainerAfter defines where this help box will be. Turn code inspector on, select the send to section, check code, until you find 
<prm-action-container-after parent-ctrl="$ctrl"></prm-action-container-after>
Convert prm-action-container-after to prmActionContainerAfter 
and add to component. If you want add it to behind other section, use the same method to find the name you need. For example, after citations
<prm-service-header-after parent-ctrl="$ctrl"></prm-service-header-after> 
prm-service-header-after to prmServiceHeaderAfter
If you want add it to the bottom of the page, can use app.component('prmFullViewAfter' 
However this shouldn't be added to 
<prm-full-view-service-container-after parent-ctrl="$ctrl"></prm-full-view-service-container-after>  
prmFullViewServiceContainerAfter because some items have both View Online and Find a Copy. If you use prmFullViewServiceContainerAfte, the help box will appear twice, one after View Online and one after Find a Copy. 
 
Find where to insert component on full view page

**********************************************  Custom Code in custom.js  **************************************

app.constant('reportProblemOptions', {
message: "Need help?",
probbutton: "Report a problem",
problinkbase: "https://lib.colostate.edu/about/contact-us/primo-report-a-problem/",
askbutton: "Ask a librarian",
asklink: "https://lib.colostate.edu/services/ask-us/"
});
 
 
app.controller('prmActionContainerAfterController', ['$scope', '$location','reportProblemOptions',
      function ($scope, $location, reportProblemOptions) {
        $scope.message = reportProblemOptions.message;
        $scope.probbutton = reportProblemOptions.probbutton;
        $scope.problink = reportProblemOptions.problinkbase;
$scope.askbutton = reportProblemOptions.askbutton;
$scope.asklink = reportProblemOptions.asklink;
      }]
    );
app.component('prmActionContainerAfter', {
bindings: { parentCtrl: '<' },
controller:'prmActionContainerAfterController',
    template: '\
    <div class="bar filter-bar layout-align-center-center layout-row margin-top-medium" layout="row" layout-align="center center" id="csu-primo-library-help">\
        <span class="margin-right-small">{{ message }}</span>\
        <a target="_blank" ng-href="{{ asklink }}">\
            <button class="button-with-icon zero-margin md-button md-button-raised md-primoExplore-theme md-ink-ripple" type="button" aria-label="Ask a librarian" style="color: #cc0000; font-weight: 700;">\
                <img alt="Ask a Librarian" width="24px" src="http://lib2.colostate.edu/includes/libguides/icons/primo_ask.png" />\
                <span style="text-transform: none;">{{ askbutton }}</span>\
                <div class="md-ripple-container"></div>\
            </button>\
        </a>\
        <a ng-href="{{ problink }}">\
            <button class="button-with-icon zero-margin md-button md-button-raised md-primoExplore-theme md-ink-ripple" type="button" aria-label="Report a problem" style="color: #cc0000; font-weight: 700;">\
                <img alt="Report a Problem" width="24px" src="http://lib2.colostate.edu/includes/libguides/icons/primo_report.png" />\
                <span style="text-transform: none;">{{ probbutton }}</span>\
                <div class="md-ripple-container"></div>\
            </button>\
        </a>\
    </div>\
    ' 
    });

Get PNX Information and pass to forms

We have not decided to do so yet because the View Online section has report problem link which will pull information from Alma and send to our existing report problem form. Just for reference, the CLIC site pull recordid and send to a Google Form using

$scope.problink = reportProblemOptions.problinkbase + $location.search().docid;

Check the full view URL

https://clicsearch.csp.edu/primo-explore/fulldisplay?docid=01CLIC_NETWORK_ALMA7154673300003692&context=L&vid=CSP&lang=en_US&search_scope=csp&adaptor=Local%20Search%20Engine&tab=default_tab&query=any,contains,harry%20potter&sortby=rank&offset=0

If we decided to do this we could pull docid from both local Alma and PCI

https://colostate-primosb.hosted.exlibrisgroup.com/primo-explore/fulldisplay?vid=01COLSU&search_scope=Everything&tab=default_tab&docid=TN_oxford10.1093~2Fmnras~2Fstv1721&lang=en_US&context=PC&adaptor=primo_central_multiple_fe&query=any,contains,earth%20transiting%20the%20sun%20as%20seen%20from%20jupiter&sortby=rank&offset=0

DOI: 10.1093/mnras/stv1721

https://colostate-primosb.hosted.exlibrisgroup.com/primo-explore/fulldisplay?docid=01COLSU_ALMA71302539370003361&context=L&vid=01COLSU&lang=en_US&search_scope=Everything&adaptor=Local%20Search%20Engine&tab=default_tab&query=any,contains,forest&sortby=rank

 

URL: https://libguides.colostate.edu/web_customization | Print Page