Skip to main content
  • 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 =;

                                  //check that record is full text

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

                                          //get value of full text open url

                                                                vm.targeturl =[1].linkURL;

                                                                //vm.targeturl =;

                                                                //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 = ''+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="{$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: Search Engine&tab=all&query=any,contains,risk&sortby=rank&offset=0