The Now Platform® Washington DC release is live. Watch now!

Help
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
SlightlyLoony
Tera Contributor

The ServiceNow platform renders HTML based on data it retrieves from its database. Often we want to make decisions about what HTML to render based on that database information. The Jelly tags (its statements) that let you do that are its conditional tags, and they are the subject of today's post. Our little helper at right can't wait for some more Jelly, conditional or not!

In this post I'm going to show you how Jelly lets you choose whether particular HTML gets rendered. For this purpose, we're going to use a silly little exercise: if a variable named jvar_employee is true, we'll render some HTML that shows the name as an employee's name; if it's false, we'll render it as an alien's name. For now, don't worry about how the variables we're using have values set in them in real; we'll cover that in later posts — just concentrate on understanding how Jelly's conditional tags work. For the purpose of our exercise, we're just setting the variables to a constant value.

Probably the most common conditional tag you'll see is the if tag. Here's what our exercise problem looks like using this basic conditional tag:


<?xml version="1.0" encoding="utf-8"?>
<j:jelly>
<j:set/>
<j:set/>
<j:if>
Employee:$[SP]${jvar_name}
</j:if>
<j:if>
Alien:$[SP]${jvar_name}
</j:if>
</j:jelly>

You can paste this straight into a UI Page to try it out. Try changing the value assigned to jvar_employee in the set tag to see how the rendered HTML changes. In JavaScript, I might have written something like this:

if (employee)
output('employee stuff');
else
output('alien stuff');

I'd use that handy-dandy else statement. But in Jelly there is no else tag, so we have to write it by using inverted tests. The Jelly above is the equivalent of this sort of JavaScript:

if (employee)
output('employee stuff');
if (!employee)
output('alien stuff');

It's the same thing, really — just a bit more typing. In Jelly, you generally will use a JEXL expression inside the test attribute, just as I did in this example. This JEXL expression must evaluate to a boolean result (i.e., true or false), but otherwise there's no restriction on what is in the expression. It could be simple, like my example, or something much more complex with many terms, math, and comparisons. Generally you'll find that your Jelly is easier to read and understand if these JEXL expressions are relatively simple. In later posts, I'll show you some ways to do that.

By the way, I snuck something into the sample: I used $[SP] in a couple of places. For now, just think of this as a magic incantation to get a non-breaking space ( ) into your rendered HTML.

Jelly has several conditional tags; the if tag is just the most popular one. Here's another, usually called the choose/when/otherwise tags:

<?xml version="1.0" encoding="utf-8"?>
<j:jelly>
<j:set/>
<j:set/>
<j:choose>
<j:when>
Employee:$[SP]${jvar_name}
</j:when>
<j:otherwise>
Alien:$[SP]${jvar_name}
</j:otherwise>
</j:choose>
</j:jelly>

The choice of names for these tags is a bit unfortunate (and certainly unconventional!), but the way it works is often quite useful. This behaves like the good old if/else if/else conditional blocks that JavaScript programmers are very familiar with. The when tests are evaluated in the order that they are written until one evaluates to a true. When one of the whens tests true, the contained Jelly is evaluated — and then nothing further within the choose tag is evaluated. If none of the whens test true, then the (optional) otherwise tag is evaluated. That's exactly like a chain of JavaScript if statements like this:

if (x < 0)
// do stuff...
else if (x < 5)
// do other stuff...
else if (x < 100)
// do even other stuff...
else
// do desperately different stuff...

Finally, Jelly has one last conditional tag &nash; and if you know JavaScript, this will look very familiar:

<?xml version="1.0" encoding="utf-8"?>
<j:jelly>
<j:set/>
<j:set/>
<j:switch>
<j:case>
Employee:$[SP]${jvar_name}
</j:case>
<j:default>
Alien:$[SP]${jvar_name}
</j:default>
</j:switch>
</j:jelly>

It's our old friend, the switch statement, and Jelly's switch works almost exactly like the JavaScript version. The on JEXL expression is evaluated just once, before Jelly starts processing its contents. Then each case tag compares the result of the on expression to its value tag. In my example, the value tag is a constant — but it could have been a JEXL expression, too. While the switch tag looks a lot like the choose tag, there is an important difference in its behavior: the switch tag will evaluate all the enclosed case tags whose values match. There's one other small difference, too — the case tag has an optional attribute fallThru that defaults to false (which means I could have left it out of my example altogether). If you set this attribute to true, then Jelly will keep evaluating the stuff inside the following case or default tag. This is exactly what happens in JavaScript if you forget to put a break statement at the end of your code after a case statement. I don't think I've ever had a legitimate use for this "feature", though I've certainly troubleshot some subtle bugs cause by my leaving it out. Jelly defaults it to the way you'd normally use it (thank you, oh Jelly inventors!) but still lets you choose the weird, counter-intuitive way if you want to — you weirdo.

Ok, that's about enough Jelly for one day!

4 Comments