Tech Blog

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

HAL is the institutional french Open Archive for scholarly 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 :*&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 () {                
        "headers": {
        'Content-Type': 'application/json',
        Accept: 'application/json',
        'X-From-ExL-API-Gateway': undefined 
       url:'*&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 =; 
  }]).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 :

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

and the template customHomepageHal.html in the html folder

<li ng-repeat="record in records"><a href="" target="_blanck"><span ng-bind-html="record.label_s"></span></a></li>
<li><a href="" target="_blanck"> ...</a></li>

If using the $sceDelegateProvider Angular provider, you may have to add the url ‘**’ in the array of the trusted resource URLs whitelist.

Finally the result looks this way

Leave a Reply