ULMS Discovery : How to add a top alert box in Primo

Created by Gabriel Gardner (Unlicensed), last modified on Jul 21, 2020

This code will add an alert bar to Primo which appears at the very top of the screen. Modification of 3 files in the Primo Back Office custom package is required.

Modify custom.js

File path example: 01CALS_INST.zip\01CALS_INST\js\custom.js

Include this code in the custom.js file after the var app = angular line but before the closing })(); line.

Note: be sure to supply the correct code for your institution in the templateUrl path.

// add custom topAlert.html bar
app.component('prmTopbarAfter', {
templateUrl: 'custom/01CALS_INST/html/topAlert.html',
controller: ['$element', function ($element) {
this.$postLink = function () {
const $primoExploreMain = $element.parent().parent().parent();
const $el = $element.query(primo-explore-top-alert).detach();
$primoExploreMain.prepend($el);
};
}]
});
// end custom top bar

Modify custom1.css

File path example: 01CALS_INST.zip\01CALS_INST\css\custom1.css

Include this code anywhere after the @charset declaration. Be sure that the colors you choose pass web accessibility requirements.

/* css for topAlert.html alert box */
primo-explore-top-alert .bar.alert-bar {
font-size: 18px;
font-weight: 700;
border-color: #F89763;
background-color: #F89763 !important;
}

Add/modify topAlert.html

File path example: 01CALS_INST.zip\01CALS_INST\html\topAlert.html

The code below is the entirety of what is required in the topAlert.html file. Do not include normal HTML opening and closing tags such as <html>, <body>, etc.

Note: When you first do this, topAlert.html will not exist; you must create it.

<primo-explore-top-alert>
<div class="bar alert-bar" layout="row" layout-align="center center">
<span class="bar-text">
<span translate="Your alert message here."></span>
<a href="https://www.calstate.edu/examplelink" target="_blank" class="arrow-link md-primoExplore-theme">
<span>See more</span>
<span class="sr-only">(opens in a new window)</span>
<prm-icon external-link icon-type="svg" svg-icon-set="primo-ui" icon-definition="open-in-new">
</prm-icon>
</a>
</span>
</div>
</primo-explore-top-alert>

Credit

The code here comes from: https://github.com/barnabyalter of NYU Libraries. For source, see: https://gist.github.com/barnabyalter/1f38846a8e0d768831640ab73acc7a94