Tech Blog

Adding Altmetrics to your Primo Full Record Display

You can use the following code in your Primo NUI custom.js file to add an Altmetrics “donut” to your full record display. Note that you also need to add a snipped to your css code. That snippet is included here as well. If you are successful in adding the code, you should see something like this in your full record display:

Note that these screenshots are from Primo VE and your results may vary.


Here is the code.  You should be able to copy and paste it.  Pay attention to its location and the fact it needs to be placed beneath the initial “function” statement. and above the final })();

Always test code in a test environment first!

This code was provided through the kindness of our colleagues Antony Tomasovic and Knut Anton Bockman.  I did not write it.  I am not a coder.  I am simply making it available for others to use via this blog post.  As of this writing (March 2018) it is working for the Colorado School of Mines.


Please note that for some reason the software won’t let me include curly brackets in the very last line of the code. They seem to go away when I resave the file.

please change:




(function () {
    "use strict";
    'use strict';


/** Altmetrics **/
app.controller('FullViewAfterController', ['angularLoad', '$http', '$scope', '$element', '$timeout', '$window', function (angularLoad, $http, $scope, $element, $timeout, $window) {
    var vm = this;
    this.$http = $http;
    this.$element = $element;
    this.$scope = $scope;
    this.$window = $window;

    vm.$onInit = function () //wait for all the bindings to be initialised

        vm.parentElement = this.$element.parent()[0]; //the prm-full-view container

        try {
            vm.doi = vm.parentCtrl.item.pnx.addata.doi[0] || '';
        } catch (e) {

        if (vm.doi) {
            //If we've got a doi to work with check whether altmetrics has data for it.
            //If so, make our div visible and create a new Altmetrics service
            $timeout(function () {
            $http.get('' + vm.doi).then(function () {
                try {
                    //Get the altmetrics widget
                    angularLoad.loadScript('' + () {});
                    //Create our new Primo service
                    var altmetricsSection = {
                        scrollId: "altmetrics",
                        serviceName: "altmetrics",
                        title: "brief.results.tabs.Altmetrics"
          , 0, altmetricsSection);
                } catch (e) {
            }).catch(function (e) {
            }, 3000);
        //move the altmetrics widget into the new Altmetrics service section
        var unbindWatcher = this.$scope.$watch(function () {
            return vm.parentElement.querySelector('h4[translate="brief.results.tabs.Altmetrics"]');
        }, function (newVal, oldVal) {
            if (newVal) {
                //Get the section body associated with the value we're watching
                let altContainer = newVal.parentElement.parentElement.parentElement.parentElement.children[1];
                let almt1 = vm.parentElement.children[1].children[0];
                if (altContainer && altContainer.appendChild && altm1) {
    }; // end of $onInit
    //You'd also need to look at removing the various css/js scripts loaded by this.
    //refer to:
      vm.$onDestroy = function ()
        if (this.$window._altmetric) {
            delete this.$window._altmetric;
        if (this.$window._altmetric_embed_init) {
            delete this.$window._altmetric_embed_init;
        if (this.$window.AltmetricTemplates) {
            delete this.$window.AltmetricTemplates;

app.component('prmFullViewAfter', {
    bindings: { parentCtrl: '<' },
    controller: 'FullViewAfterController',
     template: '<div id="altm1" ng-if="$ctrl.doi" class="altmetric-embed" data-hide-no-mentions="true"  data-link-target="new" data-badge-type="medium-donut" data-badge-details="right" data-doi="{{$ctrl.doi}}"></div>'
/** Altmetrics **/


Here is the CSS you need to add to your custom1.css file:

/* altmetrics */

    background-color: #f3f3f3;
    padding-left: 3em;


5 Replies to “Adding Altmetrics to your Primo Full Record Display”

  1. The Henry Madden Library at Fresno State is interested in looking at this feature and we appreciate you sharing your code. There are two corrections that had to be made, in order for us to get it working. (One obvious and the other not.)

    1. The “app” variable must be created near the top of the file, after the “use strict” statement. Something as simple as: var app = angular.module(‘viewCustom’, [‘angularLoad’]);

    2. The data-doi parameter, in the last app.component statement, must have double curly-brackets (open & close braces) surrounding the “$ctrl.doi” variable string. It should look like this: data-doi=”{{$ctrl.doi}}”

    After these changes are applied to the example code above, you will see the Altmetrics changes appear on an Item Detail page.

    Thanks again for your library’s code contributions!

    By Steven Orr on March 26, 2018 at 5:55 PM

  2. hello!

    concerning your second suggestion, we bumped up against a strange problem in the software. each time I edit this document, the open and close braces (curly brackets) around the data-doi statement are deleted. it’s a bit of a pain to remember this but hopefully i will be able to stop editing this document soon. i apologize if this caused you and others problems.

    By Laura Guy on March 27, 2018 at 3:36 PM

  3. Hello again!

    you are correct about the “app” variable. i have a bunch of other code after the “use strict” statements so am hesitant to include it. i am hopeful your note here will be sufficient.

    By Laura Guy on March 27, 2018 at 3:39 PM

  4. Hi, I edited the ‘PrimoVe template view custom package’ as follows. The goal was to add both Altmetrics and PlumX visualisation to our PrimoVE full record display.

    app.controller('MyInstitutionComponentController', ['angularLoad', function (angularLoad) {
    var vm = this;
    vm.doi = vm.parentCtrl.item.pnx.addata.doi[0] || '';
    vm.$onInit = function () {
    angularLoad.loadScript('' + () {
    angularLoad.loadScript('').then(function () {});
    app.component('myInstitutionComponent', {
    bindings: {parentCtrl: '<'},
    controller: 'MyInstitutionComponentController',
    template: `

    AltMetrics&PlumX :

    ` }); app.component('prmFullViewAfter', { bindings: {parentCtrl: '<'}, template: `` });

    Best Regards,
    Pertti Föhr

Leave a Reply