Skip to main content
ExLibris
  • Subscribe by RSS
  • Ex Libris Knowledge Center

    How to create a ‘Report a Problem’ button below the ViewIt iframe

    Created By: Duncan Wilson
    Created on: 2/14/2019



    To create a button that can be used for patrons to report issues with accessing e-resources in Primo then the prmFullViewServiceContainerAfter directive can be used.

    app.component('prmFullViewServiceContainerAfter', {

       bindings: {parentCtrl: '<'},

                   controller: function($scope){

                                  var vm = this;

                                  var vn = this;

                                  vm.targeturl = '';

                                  vn.availability = '';

       

             

                                                                vn.availability = vn.parentCtrl.item.delivery.displayedAvailability;

                                  //check that record is full text

                                                 if ((vn.availability === 'not_restricted')||(vn.availability === 'fulltext')){

                                          //get value of full text open url

                                                                vm.targeturl = vm.parentCtrl.item.delivery.link[1].linkURL;

                                                                //vm.targeturl = vm.parentCtrl.item.link.openurlfulltext;

                                                                //trim off first 15 characters in dev env as address is localhost,

                                                                //this might not be necessary to in production

                                                                vm.targeturl = vm.targeturl.substring(15);

                                                                vm.targeturl = 'http://eu.alma.exlibrisgroup.com/vie...'+vm.targeturl;

                                                                vm.targeturl = encodeURIComponent(vm.targeturl);

                                                 }

                                  },

                  

                   template : '<div ng-if="$ctrl.targeturl"><getit-link-service><button class="help-button md-button md-primoExplore-theme md-ink-ripple" type="button" data-ng-click="buttonPressed($event)" aria-label="Report a Problem" aria-hidden="false"><a ng-href="http://www.salford.ac.uk/library/access-to-e-resources/resource-help?referralurl={$ctrl.targeturl}}" target="_blank">Report a Problem</a></button></getit-link-service></div>'

     

    });          

     

    Then to prevent the button displaying in multiple places there’s a piece of CSS which controls where the tag ‘getit-link-service’ (defined in the component template) is displayed :

     

    /*styling for e-resource help button outside iframe */

     

    div > getit-link-service {

       display: none;

    }

     

    #getit_link1_0 div > getit-link-service {

       display: inline !important;

    }

    .help-button {

    background-color : #c60c30;

    color: #ffffff;

    text-transform: capitalize;

    }

    .help-button a {

    color : #ffffff;

    text-decoration: none !important;

    background-color: transparent !important;

    }

    .help-button a: hover {

     

    background-color : #c60c30;

    text-decoration: none !important;

    box-shadow:none !important;

    }

    See, for example:

    https://sal-primo-staging.hosted.exlibrisgroup.com/primo-explore/fulldisplay?docid=44SAL_ALMA_DS2121542130001611&context=L&vid=SAL_MAIN_TEST_ACCESS&lang=en_US&search_scope=LSCOP_SAL&adaptor=Local Search Engine&tab=all&query=any,contains,risk&sortby=rank&offset=0