Jelly: It's a Crazy, Mixed-Up World...

[SlightlyLoony]

There's another aspect of Jelly that can easily confuse just about anybody. I've deliberately avoided showing it to this point, because I wanted you to have a solid understanding of the Jelly evaluate tag, and Phase 1 and Phase 2 behavior first. If you're not clear on these things, then don't click on the link below, for that way lies madness. Instead, go back and review the earlier posts in this series until those things make sense.

If you're ready, then...

Take a look at the Jelly template below. It's a contrived example, but it concisely demonstrates the high confusion factor:

<?xml version="1.0" encoding="utf-8"?>
<j:jelly>
       <g2:evaluate>
               var y = Math.random() * 100;
               y;
       </g2:evaluate>
       <g:evaluate>
               color = 'Red';
       </g:evaluate>
     

               This is a dumb test made just for you, $[gs.getUser().getFirstName()] $[gs.getUser().getLastName()].
   
 

               $('ack').onclick = function(event){
                       var e = $('ack');
                       e.style.color = '${color}';
               }
     
       <g2:evaluate/>
</j:jelly>

This Jelly template almost works. It puts up a message customized to the logged-in user, and if the user clicks on the message, it turns red. Woo hoo! The only part that's not working is that it's supposed to have a randomly-selected vertical and horizontal offset, and only the vertical is working. In addition to this functional problem, there's also a coding problem. We'll figure out what's wrong as we work our way through this thing.

One thing that makes this Jelly template confusing is that there are JavaScript bits that are running at three different times (Phase 1, Phase 2, and when the user clicks) and in two different places (the ServiceNow instance and the client's browser). That's a lot for a Jelly-head to keep track of — but keep track of it you must if you want to be able to understand (and create) Jelly templates that do useful things. Let's take it from the top:

       <g2:evaluate>
               var y = Math.random() * 100;
               y;
       </g2:evaluate>

     

               This is a dumb test made just for you, $[gs.getUser().getFirstName()] $[gs.getUser().getLastName()].
   

These are easy when you consider them one-at-a-time. Here a Phase 2 script is evaluted by the Jelly engine on the ServiceNow instance, computing a random vertical offset, putting the result into jvar_top. Just below, a Phase 2 JEXL expression puts the value of jvar_top into the margin-top piece of the style attribute. Piece of cake! But look what's also in that style attribute: another Phase 2 JEXL expression that's putting the value of jvar_left into the margin-left piece. That's a problem, because jvar_left hasn't even been defined at this point. Down a little further in the Jelly template, you can find this:

     

               This is a dumb test made just for you, $[gs.getUser().getFirstName()] $[gs.getUser().getLastName()].
   

       <g2:evaluate/>
</j:jelly>

Note that the Phase 2 evaluate tag that defines jvar_left appears after the Phase 2 JEXL expression that tried to use it. Jelly processes the templates from top-to-bottom, so this just plain will not work. But the fix is trivial: just move that evaluate tag to somewhere before the JEXL expression. Then it will work just fine.

Now let's look at the next part:

       <g:evaluate>
               color = 'Red';
       </g:evaluate>

     

               This is a dumb test made just for you, $[gs.getUser().getFirstName()] $[gs.getUser().getLastName()].
   

 

               $('ack').onclick = function(event){
                       var e = $('ack');
                       e.style.color = '${color}';
               }
     

The Phase 1 evaluate tag sets the JavaScript variable color to 'Red' (hey, I warned you that this was a contrived example!). Spot the coding problem? We didn't put a var at the start of it — and that means color will be a global variable (possibly accidently changing the value of a global value that already exists). That's generally considered to be a very bad practice; just get in the habit of putting that var in there. That Phase 1 evaluate tag is evaluated on the ServiceNow instance. Now look in the script tag toward the bottom. That tag is defining some JavaScript that will run in the client browser — but right in the middle of it there's a Phase 1 JEXL expression (${color}). When Phase 1 is finished, that script tag will look like this:

 

               $('ack').onclick = function(event){
                       var e = $('ack');
                       e.style.color = 'Red';
               }
     

That is, of course, what actually gets sent to the browser. So...a Phase 1 script that ran on the ServiceNow instance modified a script that runs on the client browser. All totally normal in the land of Jelly!

Whew. If you actually understand everything we've talked about in this series, you're getting dangerously close to being a Jelly-head. Soon you will feel an unnatural attraction to the jelly aisle in your local grocery store. Any questions?