GlideDialogWindow HTML Via Variable

[stevejarman]

I'm creating a custom dialog, essentially following this article:

Displaying a Custom Dialog - ServiceNow Wiki

What I need to be able to do though, is pass some HTML code in via a variable and then display it, not as a string (e.g. <h1>Test</h1>) but as interpreted HTML.

So I might have this UI Page defined:

<g:ui_form>
       <g:evaluate var="jvar_base_html"
       expression="RP.getWindowProperties().get('base_html')" />
       ${jvar_base_html}
</g:ui_form>

I pass in "<h1>Test</h1>" as "base_html", and I want it to display "Test", rather than the string.

Hope that makes sense...

Is this possible?

[venkatiyer1]

Hi Steve,

When you use RP.getWindowProperties().get essentially you will be getting the string value only. To make it work like a html there are two ways to do it:

1. Either we do like the article i.e. define the h1 tag in the form itself. Something like the code below

<g:ui_form>
<g:evaluate var="jvar_base_html"       expression="RP.getWindowProperties().get('base_html')" />  

<h1>${jvar_base_html}</h1>

<g:ui_form>

Assuming that the base_html returns only the text within the h1 tag.

2. Take the html and append it to a say a div tag using jquery code.

<g:ui_form>

<g:evaluate var="jvar_base_html"   expression="RP.getWindowProperties().get('base_html')" />  

<div id="attachBaseHtml">

</div>

<script>

$j("#attachBaseHtml").html("${jvar_base_html}")

</script>

</g:ui_form>

[stevejarman]

The <h1>Test</h1> was just an example - the actual variable contains an entire page of HTML code.

I'll try the second option now and see how it goes.

[stevejarman]

Hmm... second option does the same thing unfortunately. It just prints the contents of the string. It doesn't render the HTML code contained within the string.

[stevejarman]

To clarify, here's my full code.

The UI Action:

function EmailContentDialog()
{ 
       var dialog = new GlideDialogWindow("email_content_dialog");
       dialog.setSize(750,300);
       dialog.setTitle("SEND PROGRESS EMAIL");
       dialog.setPreference("base_html", "<h1>I'm A Heading!</h1><p>This is the email that is going to be sent to the customer along with whatever comments you add below!</p>");
       dialog.setPreference("engineer_comments", ""); 
       dialog.render();
}

The UI Page:

<g:ui_form>
       <g:evaluate var="jvar_base_html" expression="RP.getWindowProperties().get('base_html')" />
       <g:evaluate var="jvar_engineer_comments" expression="RP.getWindowProperties().get('engineer_comments')" />

       <div id="baseHtml">
       </div>

       <table width="100%">
               <tr>
                       <td>
                               <center><b>Email Being Sent</b></center>
                       </td>
               </tr>                 
               <tr>
                       <td>                               
                       </td>
               </tr>
               <tr>
                       <td>
                               <g:ui_multiline_input_field name="engineer_comments" id="engineer_comments" label="Engineer Comments" 
                               value="${jvar_engineer_comments}" mandatory="false" />                               
                       </td>
               </tr>
               <tr id="dialog_buttons">
                       <td align="right">
                               <g:dialog_buttons_ok_cancel ok="return EmailContentDialog_Perform()" ok_type="button" cancel_type="button" />
                       </td>
               </tr>               
       </table>

       <script>
       jQuery("#baseHtml").html("${jvar_base_html}")
       </script>       
</g:ui_form>

The result: