Left Menu Right Menu
May 26, 2020

OaDOI Link


Jeremy McWilliams (Lewis and Clark College)

Code Repository



Provides link to Open Access content for articles, when available. This is similar to the
Unpaywall feature added in the 2019 November Primo release. Documentation explaining the
differences between this customization and the Unpaywall feature can be found

In a full display record, checks for the presence of a DOI. Queries the OADOI API (v2), and
upon the presence of an open access link, displays a bar with the link under the "View It"

OaDOI in Primo

System Components

PBO and Package Manager

Skillset Requirements

PBO and JavaScript


Not tested for accessibility.

Browser Support

Tested on Chrome, Firefox, Edge, IE11, and Safari.

Mobile Support

Tested on iPhone.



1. In your local package, in the custom.js file, include the module ‘oadoi’ in your app definition. For example:

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

If you are using other angular modules, include them in your app definition as well. For example:

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

2. Also in the custom.js file, add the following  code within the anonymous function (that is, before the closing brackets at the end of the file):

app.constant('oadoiOptions', {
  "imagePath": "custom/LCC/img/oa_50.png",
  "email": "youremail@address"

angular.module('oadoi', []).component('prmFullViewServiceContainerAfter', {
  bindings: { parentCtrl: '<' },
  controller: function controller($scope, $http, $element, oadoiService, oadoiOptions) {
    this.$onInit = function () {
      $scope.oaDisplay = false; /* default hides template */
      $scope.imagePath = oadoiOptions.imagePath;
      var email = oadoiOptions.email;
      var section = $scope.$parent.$ctrl.service.scrollId;
      var obj = $scope.$ctrl.parentCtrl.item.pnx.addata;

      if (obj.hasOwnProperty("doi")) {
        var doi = obj.doi[0];
        console.log("doi:" + doi);

        if (doi && section == "getit_link1_0") {
          var url = "https://api.oadoi.org/v2/" + doi + "?email=" + email;

          var response = oadoiService.getOaiData(url).then(function (response) {
            console.log("it worked");
            var oalink = response.data.best_oa_location.url;
            if (oalink === null) {
              $scope.oaDisplay = false;
              console.log("it's false");
              $scope.oaClass = "ng-hide";
            } else {
              $scope.oalink = oalink;
              $scope.oaDisplay = true;
              $element.children().removeClass("ng-hide"); /* initially set by $scope.oaDisplay=false */
              $scope.oaClass = "ng-show";
        } else {
          $scope.oaDisplay = false;
      } else {
        $scope.oaClass = "ng-hide";
  template: '<div style="height:50px;background-color:white;padding:15px;" ng-show="{{oaDisplay}}" class="{{oaClass}}"><img src="{{imagePath}}" style="float:left;height:22px;width:22px;margin-right:10px"><p >Full text available via: <a href="{{oalink}}" target="_blank" style="font-weight:600;font-size:15px;color;#2c85d4;">Open Access</a></p></div>'
}).factory('oadoiService', ['$http', function ($http) {
  return {
    getOaiData: function getOaiData(url) {
      return $http({
        method: 'GET',
        url: url,
        cache: true
}]).run(function ($http) {
  // Necessary for requests to succeed...not sure why
  $http.defaults.headers.common = { 'X-From-ExL-API-Gateway': undefined };

3. Be sure to edit the constant variables for the image path and email in this section of code.

app.constant('oadoiOptions', {
  "imagePath": "custom/LCC/img/oa_50.png",
  "email": "youremail@address"

You can use any image you want or you could save and place the following image in your custom/YOURINSTITUTIONID/img/filename.png directory:

OA Image

4. Save the changes made to your custom.js file.

5. Zip and upload your package in the PBO.

6. Deploy your view.

Back to Blog
Comments (0)
Reply To Article