logo

NJP

Create a popup message on login

Import · Aug 27, 2020 · article

[Work in Progress] Please add any ideas and comments.

It was build long ago by ServiceNow Guru: a popup that appears after login in.

Since the files from servicenow guru are not available. I decided to build similar functionality myself.

We will reuse the UI Page, as that code is still available:

UI Page: ‘terms_and_conditions_dialog’

HTML

<g:ui_form>
   <!-- Get values from dialog preferences passed in -->
   <g:evaluate var="jvar_cancel_url"
     expression= "RP.getWindowProperties().get('cancel_url')" />
   <input type="hidden" id="cancel_url" value="${jvar_cancel_url}" />
   <table width="100%">
     <tr>
       <td>
          <div style="width:584px; height:400px; overflow:auto; border: 1px solid gray;">
             ENTER YOUR TERMS HERE...
          </div>
       </td>
     </tr>
     <tr>
       <td>
         <div style="margin-top: 10px;">
           <!-- Pull in 'ui_checkbox' UI Macro for accept checkbox -->
           <g:ui_checkbox id="accept_terms" name="accept_terms" value="false"/>
           <label for="load_demo">I accept these terms and conditions.</label>  
         </div>
       </td>
     </tr>
     <tr>
       <td colspan="2">
       </td>
     </tr>
     <tr id="dialog_buttons">
        <td colspan="2" align="right">
           <!-- Pull in 'dialog_buttons_ok_cancel' UI Macro for submit/cancel buttons -->
           <g:dialog_buttons_ok_cancel ok="return termsOK()" cancel="termsCancel()" ok_type="button" cancel_type="button"/>
        </td>
     </tr>
  </table>
</g:ui_form>

Client script

function termsOK(){
   //Gets called if the 'OK' dialog button is clicked
   //Make sure terms have been accepted
   var terms = gel('accept_terms').value;
   if(terms != 'true'){
      //If terms are false stop submission
      alert('Please accept the terms and conditions to continue your order.');
      return false;
   }
   //If accept checkbox is true do this...
   GlideDialogWindow.get().destroy(); //Close the dialog window
   //g_form.setValue('myvar', true); //Optionally set the value of a variable or field indicating acceptance
}

function termsCancel(){
   //Redirect gets called if the 'Cancel' dialog button is clicked
   if($('cancel_url').value != 'null'){
      window.location = $('cancel_url').value;
   }
   else{
      window.location = 'home.do'; //Redirect to default homepage
   }
}

In order for this to show up we have to create a UI Script and a Client callable Script include:

UI Script: 'showTermsOnLogin'

addLoadEvent(function () {
    if ((window.name !== 'gsft_main') || (window.parent.document.URL.indexOf("login.do") > -1)) {
        console.log("Prevent popup in this window or on this page.");
        return;
    }

    var ga = new GlideAjax('global.sessionUtil');
    ga.addParam('sysparm_name', 'handleSession');
    ga.getXML(function (serverResponse) {
        var answer = serverResponse.responseXML.documentElement.getAttribute("answer");
        if(answer == 'true'){
            showTerms();
        }
    });
});

var showTerms = function () {
    var dialog = new GlideDialogWindow('terms_and_conditions_dialog'); //Render the dialog containing the UI Page 'terms_and_conditions_dialog'
    dialog.setTitle('Terms and Conditions'); //Set the dialog title
    dialog.setSize(600, 600); //Set the dialog size
    dialog.removeCloseDecoration(); //Remove the dialog close icon
    dialog.setPreference('cancel_url', 'catalog_home.do?sysparm_view=catalog_default'); //Set optional cancel redirect URL
    dialog.render(); //Open the dialog
}

Script Include: sessionUtil

This will handle the saving and retrieving of the session variable we set. This will set for each unique session. By using this we only show the popup once each session.

var sessionUtil = Class.create();
sessionUtil.prototype = Object.extendsObject(AbstractAjaxProcessor, {
    handleSession: function(){
        var session = gs.getSession();
        if(session.getClientData('popup_triggered')){
            return false;
        }
        session.putClientData('popup_triggered', true);
        return true;
    },
    type: 'sessionUtil'
});

Any improvements or suggestions are welcome.

View original source

https://www.servicenow.com/community/developer-articles/create-a-popup-message-on-login/ta-p/2305530