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”

Leave a Reply