Ready to Learn?Ex Libris products all provide open APIs

Tech Blog

 

Adding JSON data into Primo html

We added our database lists to our Primo home page.
Our databases are maintained in a MySQL database and accessible through RESTful APIs as json data.

Here's a link to our Primo with the databases in dropdown lists:
https://primo-pmtna01.hosted.exlibrisgroup.com/primo-explore/search?institution=TCCDALMA&vid=TCCD2017&lang=en_US

This is the data returned from the MySQL database:
Titles, alphabetically: https://library.tccd.edu/databases/_get_titles
Sample JSON returned:
[{"db_name":"60 Minutes: 1997-2014","db_url":"https:\/\/ezp.tccd.edu\/login?url=http:\/\/search.alexanderstreet.com\/cbsv"},{"db_name":"Academic OneFile","db_url":"https:\/\/ezp.tccd.edu\/login?url=http:\/\/infotrac.galegroup.com\/itweb\/txshracd2560?db=AONE"}]

Subjects: https://library.tccd.edu/databases/_get_titles
Sample JSON returned:
[{"subject_name":"Almanacs, Directories and Handbooks","db_name":"Associations Unlimited","db_url":"https:\/\/ezp.tccd.edu\/login?url=http:\/\/galenet.galegroup.com\/servlet\/AU?locID=txshracd2560"},{"subject_name":"Almanacs, Directories and Handbooks","db_name":"Complete Directory for People with Disabilities","db_url":"https:\/\/ezp.tccd.edu\/login?url=http:\/\/gold.greyhouse.com\/login?customer=tarrantcounty&username=tarrantcounty&password=welcome&database=25"}]

In home_en_US.html, for Titles:

<ul class="w3-list tcc-list" style="list-style-type:none;">
    <li ng-controller="DBController2">
        <div class="w3-row">
            <div class="w3-col" style="width:63%;">
                <select name="titles"
                        id="titles"
                        class="db_list"
                        ng-model="selectedTitle"
                        ng-options="item.db_url as item.db_name for item in titles"
                        ng-change="getTitleLink(selectedTitle)">
                    <option value="">Article Databases - Alphabetical</option>
                </select>
            </div>
            <div class="w3-col" style="width:36%;padding-left:5px;">
                <a href="https://library.tccd.edu/databases/titles" class="tcc_button_small hvr-grow">Browse All</a>
            </div>
        </div>
    </li>
</ul>

In home_en_US.html, for Subjects:

<ul class="w3-list tcc-list" style="list-style-type:none;">
    <li ng-controller="DBController">
        <div class="w3-row">
            <div class="w3-col" style="width:63%;">
                <select name="subjects"
                        id="subjects"
                        class="db_list"        
                        ng-model="selectedSubject"
                        ng-options="item.db_url as item.db_name group by item.subject_name for item in subjects"
                        ng-change="getSubjectLink(selectedSubject)">
                    <option value="">Article Databases By Subject</option>
                </select>
            </div>
            <div class="w3-col" style="width:36%;padding-left:5px;">
                <a href="https://library.tccd.edu/databases/subjects" class="tcc_button_small hvr-grow">Browse by Subject</a>
            </div>
        </div>
    </li>
</ul>

In custom.js, for Titles:

    /** Database Titles Dropdown **/
app.controller('DBController2', ['$scope','$http','$window', function($scope,$http,$window) {
    $scope.selectedTitle = null;
    $scope.titles = [];
    
    $http({
        method: 'GET',
        url: "//library.tccd.edu/databases/_get_titles"
    }).then( function(result) {
        $scope.titles = result.data;
    });
    
    $scope.getTitleLink = function(url) {
        $window.open(url);
    };
}]);
    /** Database Titles Dropdown **/

In custom.js, for Subjects:

    /** Database Subjects Dropdown **/
app.controller('DBController', ['$scope','$http','$window', function($scope,$http,$window) {
    $scope.selectedSubject = null;
    $scope.subjects = [];
   
    $http({
        method: 'GET',
        url: "//library.tccd.edu/databases/_get_subjects_titles"
    }).then( function(result) {
        $scope.subjects = result.data;
    });
   
    $scope.getSubjectLink = function(url) {
        $window.open(url);
    };
}]);
    /** Database Subjects Dropdown **/

Finally, in order for Angular to access the json data on the server, I had to configure Apache to allow Cross Origin Resource Sharing for Primo.
I added this to the Apache config file, then apachectl graceful:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-from-exl-api-gateway, X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "GET"