I must say that I was highly impressed by sweet alert (which you can find here: ServiceNow Share ), which is amazing. I've always been bothered by just how bad the default JavaScript alert dialogs look compared to ServiceNow's actual UI. I wanted to introduce something similar, but without the need for importing a 3rd party library. As such, I created AlertNow, which is a wrapper for a native ServiceNow replacement for JavaScript's alert functionality. It uses a UI Page combined with ServiceNow's GlideModal class to elevate the user experience by replacing JavaScript's basic 'alert' functionality.
alertNow is a modular alert that is powered by ServiceNow's GlideModal class. There are several potential use cases:
1. Allows you to relay information to the user with a simple, attractive and configurable modal dialog based on a standard format.
2. Allows you to specify a URL for a server-side redirect after the dialog is closed, if desired.
How do I install it?
All you have to do is deploy the Update Set. After that, you can call AlertNow from any client-side script in the system.
How do I use it?
The parameters for AlertNow are easy - just pass it a native JavaScript object with some or all of the following properties:
You can provide either message or propName, but not both.
message - This is the content of the message body. Only plain text is allowed.
OR
propName - This parameter must contain the name of a sys_properties record in which you can specify a message. Use this if you would like to standardize your message using properties, or if you want to render HTML in your modal dialog, such as URLs. You can also specify additional styling in the property.
You may configure the font size of the main message with the following parameter:
fontSize - acceptable values are:
small
medium
large
x-large
Medium is the default size.
title - The title will display in the upper-left corner of the modal window.
header - This is the header that will display above the message body.
headerSize - You may specify the size of the header by passing one of the following values:
small
medium
large
Large is the default size.
image - An optional image to display above all text content. Simply pass the image URL. The size is based on the image's actual size by default.
imageWidth - allows you to specify the width of your image as a number.
imageHeight - allows you to specify the height of your image as a number.
url - An optional redirect URL. If present, the form will display both 'Ok' and 'Cancel' buttons. 'Cancel' will close the dialog, while 'Ok' will execute a redirect to your specified URL (server-side).
You may also omit either the cancel or OK buttons with the following parameters:
showCancel - boolean - true to show, false to hide. The default is true.
showOk - boolean - true to show, false to hide. The default is true.
You may call this alert from any client-side script in the system using:
alertNow(yourObject);
You can find AlertNow here: ServiceNow Share
Script examples:
alertNow({url: 'stats.do', message:'You must assign this task and update its Work notes before closing it.', header:'Task Not Closed', title:'My Title', image:'warning-shield.png'});
********************
alertNow({title:'Congratulations', header: 'Great Job!', message: 'Fantastic work. You submitted that form perfectly.', image: 'http://images.techtimes.com/data/images/full/163416/meaning-of-vault-boy-thumbs-up-jpg.jpg?w=600', imageHeight: '400', imageWidth: '200'});
********************
var myProperty = however you get properties via GlideAjax;
alertNow({propName: myProperty, header:'Contract Required', title:'My Title'});
Visual samples:
Update: v2.0 is now available
**************** - New with v2.0 - *****************
"hideClose":
- Allows you to hide the 'X' that appears in the top-right of the modal window.
- True to hide, false to show.
- Defaults to false.
"video":
- Allows you to embed a YouTube Video into your AlertNow messages.
- Simply pass the video's embed URL using this parameter.
- Note: The 'X' will always appear in the top-right corner when a video is present - and no buttons will be displayed underneath it.
I also changed the formatting slightly - there is now more white-space between the body elements and the UI Buttons.
Script example:
alertNow({title: 'Embedded Video', header:'Now with Video!', message: 'You can now embed YouTube videos in your alertNow messages.', video: 'https://www.youtube.com/embed/DCEBsuXmBrM'});
