Ready to Learn?Ex Libris products all provide open APIs

Tech Blog

 

How to embed HAL documents List in the Primo new UI Homepage ?

Geraldine Geoffroy on December 20th, 2018

HAL is the institutional french Open Archive for scholary documents, so the following lines will primary (perhaps) have an interest for the french customers that are using the Primo new UI.

The first matter is to use the HAL APi with custom parameters to retrieve the records you want to display. The use of the API is well documented here, and, for example, the request giving the titles and the internal HAL IDs of the 10 last deposits (wich are not thesis) with text files fot the UCA institution formatted in Json is :

https://api.archives-ouvertes.fr/search/UNIV-COTEDAZUR/?q=*&fl=label_s,halId_s&rows=10&sort=producedDate_s%20desc&fq=docType_s:* NOT THESE&fq=submitType_s:file&wt=json

So we can write a file called customHomepageHal.module.js in the js folder with a custom module that looks like this :

angular.module('customHomepageHal', []).controller('customHomepageHalController', ['$scope', '$http', function ($scope, $http) {
    this.$onInit = function () {                
       $http({
        "headers": {
        'Content-Type': 'application/json',
        Accept: 'application/json',
        'X-From-ExL-API-Gateway': undefined 
        },
       method:'GET',
       url:'https://api.archives-ouvertes.fr/search/UNIV-COTEDAZUR/?q=*&fl=label_s,halId_s&rows=5&sort=producedDate_s%20desc&fq=docType_s:* NOT THESE&fq=submitType_s:file&wt=json'
       }).then(function(response) {
            $scope.records = response.data.response.docs; 
                 });
             };
  }]).component('customHomepageHal', {
       bindings: {parentCtrl: '<'},
       controller: 'customHomepageHalController',
       templateUrl: 'custom/<your_view>/html/customHomepageHal.html'
  });

and import the module in the custom.js file :

  • in the header  : 
import { customHomepageHal } from './customHomepageHal.module';
  • and in the call of the modules for the app : 
var app = angular.module('viewCustom', ['angularLoad', 'customHomepageHal', ...]);

On the view side we have to add a card container in the homepage in wich the records will be displayed :

 <md-card>
     <md-card-title>
        <md-card-title-text>
            HAL Université Côte d'Azur : derniers documents mis en ligne
        </md-card-title-text>Voir tout
     </md-card-title>
     <md-card-content>
        <custom-homepage-hal></custom-homepage-hal>
     </md-card-content>
 </md-card>

and the template customHomepageHal.html in the html folder 

<ul>
<li ng-repeat="record in records"><a href="https://hal.univ-cotedazur.fr/record.halId_s" target="_blanck"><span ng-bind-html="record.label_s"></span></a></li>
<li><a href="https://hal.univ-cotedazur.fr/search/index/?q=%2A&docType_s=ART&submitType_s=file" target="_blanck"> ...</a></li>
</ul>

If using the $sceDelegateProvider Angular provider, you may have to add the url 'https://api.archives-ouvertes.fr**' in the array of the trusted resource URLs whitelist.

Finally the result looks this way