primo-explore-wrlc-announce

Description

Add an announcement bar underneath the search bar. This module was created as a demo to try adding an independent feature to Primo. Borrowed CSS to size the bar from NYUs primo-explore-search-bar-sub-menu.

Screenshot

Install

1. Make sure you've installed and configured primo-explore-devenv.
2. Navigate to your template/central package root directory. For example:

   cd primo-explore/custom/MY_VIEW_ID
   

3. If you do not already have a package.json file in this directory, create one:

   npm init -y
   

4. Install this package:

   npm install primo-explore-wrlc-announce --save-dev
   

Usage

Once this package is installed, start up the primo-explore-devenv. This will collect the code and insert it into your view. After this is done, you'll need to add configuration to your custom.js file:

Add wrlcAnnounce as a dependency for your custom module definition.

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

Configure your API calls to retrieve announcements. primo-explore-wrlc-announce has the following configuration options

name	type	usage
announceAPI	string	A url that can be used to fetch your announcement data.
getShow	function	A function that returns TRUE if you want to show your announcement banner.
getMessage	function	A function that returns the message text you want to display.
getLink	function	A function that returns a link you want to add the the Message text.

Example

The following would be added to the custom.js file after the module installed. This example uses Google Sheets as the source for the announcement data.

    var app = angular.module('viewCustom', ['angularLoad', 'wrlcAnnounce']);
    
    app.constant('announceConfig', {
        announceAPI: 'https://spreadsheets.google.com/feeds/list/1ycVxLuY5LYwsFbGX-n_TlJPAF-wI73Lf_aJiZKzm0vI/1/public/values?alt=json',
        getShow: function(response) {
            return(response.data.feed.entry[0].gsx$show.$t);
        },
        getMessage: function(response) {
            return(response.data.feed.entry[0].gsx$message.$t);
        },
        getLink: function(response) {
            return(response.data.feed.entry[0].gsx$link.$t);
        }
    });