YouTube Like Loader

Just a simple script to add a YouTube like loading bar to the top of the page for AJAX Requests. Many users said they wanted a way to know when the system was “thinking”. There actually is a loading GIF in the top right (I noticed it in Fuji) but it’s a bit hard to see. This adds a very obvious loader to every page, even popups and CMS page.

This should go in a Global UI Script. Tweak as necessary!

if(self == top){
var loadingDiv = document.createElement("div");
var loadingInterval = false;
var loadingIntervalWidth = 0;
var stopLoading = false;

loadingDiv.style.width = "100%";
loadingDiv.style.position = "fixed";
loadingDiv.style.height = "2px"
loadingDiv.style.top = "0";
loadingDiv.style.left = "0";
loadingDiv.style.zIndex = "2000";
loadingDiv.style.background = "#29d";
loadingDiv.style.display = "none";

document.addEventListener("DOMContentLoaded", function(event) {
document.body.appendChild(loadingDiv)
});

function startProgress(){

if(loadingInterval == false){
stopLoading = false;
loadingDiv.style.display = "block";
loadingDiv.style.width = "0%";
loadingIntervalWidth = 0;
loadingInterval = setTimeout(incrementProgress, 50);

}
}

function incrementProgress(){

loadingIntervalWidth++;
loadingDiv.style.width = loadingIntervalWidth.toString() + "%";
if(loadingIntervalWidth < 100 && stopLoading == false){ loadingInterval =setTimeout(incrementProgress, 50); } else { loadingDiv.display = "none"; stopProgress() } } function stopProgress(){ stopLoading = true; loadingDiv.style.width = "100%"; loadingInterval = setTimeout(hideProgress, 100); } function hideProgress(){ loadingInterval = false; loadingIntervalWidth = 0; loadingDiv.display = "none"; loadingDiv.style.width = "0%"; clearTimeout(loadingInterval); } CustomEvent.observe('ajax.loading.start', function() { startProgress() }); CustomEvent.observe('ajax.loading.end', function() { stopProgress(); }); }

Using Jelly In ServiceNow Release Candidate Shipping

I am happy to announce I have started sending out the first Release Candidate for Using Jelly In ServiceNow.  I decided to keep the pricing as is at $25 USD for now until the final version comes out.

To purchase you can use the following form and I will send as soon as PayPal alerts me.  I try to do it immediately but sometimes it takes up to a day.

Update: I have started using Gumroad to distribute the book now instead of manually sending copies out via email.

Get the book now!

Table of Contents

0 Introduction
1 Jelly
1.1 Key Concepts
2 Jelly and ServiceNow
2.1 UI Pages
2.1.1 Page Template
2.2 UI Macros
2.2.1 Formatters
2.3 Other Jelly Scriptable Areas
3 Jelly Scripting
3.1 Jelly Tag Library
3.1.1 Variables
3.1.2 Output
3.1.3 JEXL Expressions
3.1.4 Conditions
3.1.5 Looping
3.1.6 Undocumented Jelly Tags
3.2 Glide Tag Library
3.2.1 Using References
3.2.2 Scripting Tags
3.2.2.1 Running JavaScript
3.2.2.2 Scripting Helpers
3.2.2.3 Using Functions and Macros
3.2.2.4 Miscellaneous Functions
3.2.3 UI Tags
3.2.3.1 HTML Elements
3.2.3.2 Form Elements
3.2.3.3 List Elements
3.2.3.4 Choice Lists
3.2.3.5 Content Management Components
3.2.3.6 Knowledge Base Components
3.2.3.7 Chart Components
3.2.3.8 Extended UI Components
3.2.3.9 Other ServiceNow Components
3.2.4 Undocumented Tags
3.3 Debugging
3.3.1 Debugging Tags
4 Advanced Usage
4.1 Glide and Jelly JavaScript Objects
4.1.1 Executing Jelly
4.1.2 Render Properties
4.1.3 Jelly Contexts
4.1.4 Evaluating Expressions
4.2 Creating UI Extensions
4.3 Decorators
4.4 Overriding Default Templates
4.5 System Properties
5 Jelly Examples
5.1 Core Concepts
5.1.1 Multiple Phases
5.1.2 Fizz Buzz
5.1.3 Fibonacci Numbers
5.1.4 Bubble Sort
5.1.5 Calling Functions
5.1.6 Towers of Hanoi
5.2 Static Page
5.2.1 Hello World
5.2.2 Simple Calculator
5.2.3 Output A List
5.2.4 Simple Form
5.2.5 Form Using Macros
5.3 Dynamic Page
5.3.1 Dynamic Calculator
5.4 Multi-Page Application
5.4.1 Simple Portal
5.4.2 Advanced Form
5.5 AJAX Application
5.5.1 AJAX Form
5.5.3 AJAX Form Widget
5.6 Custom Formatter
5.6.1 Custom Element
5.6.2 Form Widgets
5.7 Mobile Page
5.7.1 Mobile Only Page
5.7.2 Responsive Page
5.8 Frameworks and Libraries
5.8.1 Datatables List
5.8.2 Twitter Bootstrap
6 Index
6.1 Jelly Language Reference
6.2 JavaScript Objects Reference
6.3 LIcenses and Copyrights