How can I put a banner announcement in OneSearch?
Answer
We can put dismissable banner announcements in OneSearch on a per-view basis using the Primo VE customization package. The banner shows under the search bar.
The file that we need to edit is top-announcement.html in the html directory. Looking at what is currently in the file, it should be fairly clear how to edit the text of the banner message.
Note that the first template block is there to dynamically retrieve messages from a designated FAQ group in LibAnswers. That area should not be edited. If a current message is retrieved, it will be displayed in place of any custom content you have created. There is a comment indicating where you should place your own banner content.
To customize various aspects of the banner you can add properties to the $ctrl.showAnnounce function located in the ng-if attribute. All properties are optional. If you omit a property, default values are used.
| Property | data type | default value | notes |
|---|---|---|---|
| startDate | string | null (if you exclude this property, banner will show from current date) |
yyyy-mm-dd Banner will start showing on the date indicated here. |
| endDate | string | null (if you exclude this property, banner will continue to show indefinitely) |
yyyy-mm-dd The banner will stop showing the day after the date you set. Recommended! |
| cookieID | string | lrHideOSAnnce | Setting a distinct cookie name is recommended to ensure that if you change the announcement, the new one won't be hidden for users who dismissed a previous banner. To ensure that cookies are view-specific, the college acronym associated with the Primo VE view will be automatically appended to the cookie ID you set here. |
| daysToHide | integer | 14 | This number sets the expiration date of the cookie that prevents the banner from reappearing if a user has clicked the dismiss button. |
Here's an example of what showAnnounce might look like:
<md-content ng-class="$ctrl.fade" ng-if="$ctrl.showAnnounce({
startDate: '2021-04-22',
endDate: '2021-05-05',
cookieID: 'end-of-semester',
daysToHide: 30
});">
Make sure that each property except the last ends in a comma.
Styling
You may want to tweak the the background of md-top-announce in custom1.css. If you choose a dark background, more changes will be needed for font colors.
Multiple banners
If desired, you can include multiple md-content elements in top-announcement.html if you use distinct cookie IDs and date ranges. This would allow you to plan for banners coming up later in the semester.