Displaying HTML with Jelly in a UI page

[jdurden]

So, I went into this project thinking this was going to be pretty straight forward. And, maybe it is. But what I thought should work intuitively isn't working as I anticipated and the information I'm finding online isn't working.

What I'm trying to do is display some HTML (on a UI Page) which is stored in a variable. Example...

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate>
var test = "<b>this is bold</b>";
</g:evaluate>

${test}
</j:jelly>

In case it's not clear, the desired outcome is to have a simple bold text "this is bold" display on the UI Page when visited. However, when you visit the page it looks like:

<b>this is bold</b>

Clearly the HTML is being encoded at some point in this whole thing and, despite searching forums and Google, I'm unsure how to fix it. Any ideas?


Thanks in advance!

[ravali6]

Adding HTML tags in the UI Page is possible. I myself have done it as well.
I usually follow this ..http://community.servicenow.com/blog/slightlyloony

See his blog, there is a lot of interesting stuff on the blog.

[jdurden]

Right, I know I can put HTML tags in the Jelly. But what I'm trying to do is put the HTML in a variable and output that way. And yea, great stuff at that link. I've been there many times.

[adiddigi]

What you are trying is a little bit counter intutive, and here is the reason why you aren't getting Bold;also I will tell you how to display it bold.

Consider this UI Page Sample :

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate var="jvar_str">
 test = "<b>Bold</b>";

         </g:evaluate>

<!-- Store the test variable as an input type, just to access it in the below Javascript -->
 <input id="ping" value="${test}"></input>

<!-- This is the div we will be using to make it a HTML Object -->
 <div id= "set"> </div>
 <script>

function addLoadEvent(){
/* Get the value stored in the ping */
var a = gel('ping').value;
/*Getting the div element*/
var htmlObject = gel('set');

/*setting the div element,  which inturn is a string, until you cast it as a HTML Object*/
htmlObject.innerHTML = a;


}
</script>
</j:jelly>

Let me first start by answering why it won't work:

When you write the statement

 test = "<b>Bold</b>"

inside the evaluate tag, this doesn't run at the client side, it runs on the server and so, test is going to be of type String. So when you print it, it will directly render it without actually displaying it Bold.

Now, the way in which you can convert a Serverside String into a Plain HTML is to convert it into a HTML Object. The straight forward way to do this is to make the String object innerHTML of a div(there are mmmmaaany ways though).
For doing this in a UI Page, You can do it in 2 ways, you either can use the "Client Script" section or have a

<script>

tag and a

addLoadEvent

, which loads at the start of Page(it will run once the server side scripts run, on the load of the page).

The comments are in the script.Try that UI page, and you will get your bold 🙂

[jdurden]

Thank you very much. I tested your code and it worked as you said. I'll start adapting mine to use this solution. Thank you for taking the time to leave such a detailed response!