Ready to Learn?Ex Libris products all provide open APIs

Tech Blog


Adding Altmetrics to your Primo Full Record Display

Laura Guy on March 8th, 2018

You can use the following code in your Primo NUI custom.js file to add an Altmetrics "donut" to your full record display. One advantage to this code is that you need not change your css code.  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.

(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 **/