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?

[stevejarman]

<script>
       document.getElementById("baseHtml").innerHTML = "${jvar_base_html}";
</script>

Doesn't work either. Gives the same result of printing the string.

[stevejarman]

So an even simpler case,

If the function passes this:

dialog.setPreference("base_html", "<h1>Heading</h1><p>Simple HTML</p>");

And the UI Page:

<g:evaluate var="jvar_base_html" expression="RP.getWindowProperties().get('base_html')" />
...
jQuery("#baseHtml").html("${jvar_base_html}");

Then it doesn't work (i.e. it prints the string as in the screenshot above).

BUT, this DOES work:

jQuery("#baseHtml").html("<h1>Heading</h1><p>Simple HTML</p>");

If anyone knows the answer, I'd really appreciate it. Getting this working will open up some big doors for us.

[stevejarman]

Alright... so I found a workaround. Still like to hear from anyone who knows a better way though.

Basically you can't seem to access the variable resulting from the g:evaluate directly within a script tag section in this way. So, what you CAN do is dump that into a temporary field:

<g:ui_multiline_input_field name="base_html_temp" id="base_html_temp" value="${jvar_base_html}" />

And then retrieve it like so:

jQuery("#baseHtml").html(jQuery("#base_html_temp").val());

And it will correctly render the HTML. Now I just need to figure out if there's a hidden input field type so the raw HTML string isn't visible on the dialog and everything will be working just fine.

[venkatiyer1]

Hi Steve,

You have made quite a progress after I replied back. Glad to see that. Guess that dollar and braces we add to access the g evaluate variable is causing some issues.   Yes you can create a input field with type hidden and store the value there access it from there.

<input id="base_html_temp" type="hidden" value="${jvar_base_html}" />

[mike_allgire]

I may be wrong in this, because I have just started using the GlideDialogWindow; however I believe that the issue is in your HTML tags being in the GlideDialogWindow function. They should be in your UI Page.

Javascript function

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

UI Page

<g:ui_form>   
               <g:evaluate var="jvar_base_html_head" expression="RP.getWindowProperties().get('base_html_head')" />   
               <g:evaluate var="jvar_base_html_subhead" expression="RP.getWindowProperties().get('base_html_subhead')" />   
               <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("<h1>${jvar_base_html_head}</h1><p>${jvar_base_html_subhead}</p>")   
               </script>           
       </g:ui_form>