Left Menu Right Menu
April 28, 2020

Emergency Banner with JavaScript


Blake Galbreath (WSU)

Code Repository



Adds an emergency alert bar under the Primo search box that allows the inclusion of links.

Image of Banner in Primo

System Components

PBO, Package Manager

Skillset Requirements

PBO, JavaScript, and CSS


Has not been tested for accessibility.

Browser Support

Tested on Chrome and Firefox.

Mobile Support

Tested on iPhone.


1. In the custom.js file, add the following line of code within the anonymous function (that is,
before the closing brackets at the end of the file):

app.component('prmSearchBarAfter', {
template: '<br/><hr/><p style="text-align: center; font-size: 20px; color: white;">ADD EMERGENCY MESSAGE HERE <a href="https://www.orbiscascade.org/" style="color:#fff; text-decoration:underline">ADD LINK TEXT HERE</a> for more information.</p><hr/>'

2. Be sure to edit “ADD EMERGENCY MESSAGE HERE”, https://www.orbiscascade.org/, and
“ADD LINK TEXT HERE” with the content you want

3. In your local package, in the custom1.css file, add the following CSS to avoid issues with
advanced search displays.

/* Fix Non-Chrome Search Bar pushing prmSearchBarAfter */
prm-search-bar .layout-fill {
min-height: initial;
height: initial; }

/* Clear Advanced Search Screen Backdrop*/
prm-search-bar .advanced-search-backdrop {
background-color: transparent;

4. Zip and upload your package in the PBO.

5. Deploy your view.
Back to Blog
Comments (0)
Reply To Article