Left Menu Right Menu
August 5, 2019

Login Warning for Permanent Favorites List


Developer

Jeremiah Kellogg (Eastern Oregon University)

Code Repository

https://github.com/alliance-pcsg/primo-explore-favorites-warning

Description

Favorites lists can be created by guest users, but once they end their session that list goes away. In order to make a favorites list permanent the user needs to login, however Primo has no built in warning to let guest users know this. This development offers a pop-up up modal that warns users to log in to Primo to save their favorites list permanently.

The warning appears whenever a user clicks on a button with a pin icon and they aren't logged in. This warning modal gives the option of logging in or dismissing the warning. Dismissing the warning ensures the modal won't pop up again during the user's current session.

Primo screen for item with warning button over add to favorites button.

Primo screen with new pop up warning over the top.


System Components

PBO, Package Manager

Skillset Requirements

PBO, JavaScript, CSS

Accessibility

Has not been tested for accessibility.

Browser Support

Tested on Chrome, Firefox, Edge, and Safari

Mobile Support

Tested on iPhone

Implementation


Steps

  1. In the PBO, make sure you have the "Inherit Central Package" box checked.
  2. In your local package, in the custom.js file, include the module 'showFavoritesWarning' in your app definition. For example:
var app = angular.module('viewCustom', ['showFavoritesWarning']);


If you are using other angular modules, include them in your app definition as well. For example:

var app = angular.module('viewCustom', ['toggleInstitutions', 'showFavoritesWarning']);

  1. Also in the custom.js file, add the following lines of code within the anonymous function (that is, before the closing brackets at the end of the file).

If your institution uses uses the Badges Information Modal in the Primo Toolkit you will need to hook into the same prmIconAfter compenent as that customization:

app.component('prmIconAfter', {template:'<badges-modal></badges-modal><fav-overlay></fav-overlay>'});

If your institution does not implement the Badges Information Modal module you can omit it like so:

app.component('prmIconAfter', {template:'<fav-overlay />'});

  1. If you want to customize text associated with warning, add the following block of code within the anonymous function and edit the values.
app.value('globalFavVars', {

    favWarnBarTxt:'Sign in to make your favorites list permanent',
    favWarnModalTitleText: 'Sign in to make your favorites list permanent',
    favWarnModalContentText:'You can create a favorites list as a Guest, but to save a list permanently you must be signed in';

});

  1. In your local package, in the custom1.css file, add the following CSS if you want to customize colors, padding, or text styles:
/* id for customizing the header box of the fav warning pop-up modal*/

#fav-modal-header{

    /*background-color: tomato;*/

}

/* id for customizing text and font attributes in fav warning pop-up modal header*/

#fav-modal-header-text {

      /*padding-top: 10px;*/

}

/* id for customizing modal content box below modal header */

#fav-modal-content {

      /*background-color: tomato;*/

}

/* id for customizing modal content text below header*/

#fav-modal-content-text {

     /*font-size: 10px;*/

}

  1. Zip and upload your package in the PBO.
  2. Deploy your view.
Back to Blog
Comments (0)
Reply To Article