Display message is showing HTML tags

[CDJ]

Hi Team,

I'm trying to display pop-up messages that include URLs using a UI Page. However, the messages are rendering with the HTML tags visible as plain text. Could someone suggest a solution for this issue?

UI Page :

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide">
  <div>
    <div class="headerMessage">
      ${gs.getMessage('AI System Acknowledgement Required')}
    </div>
    <br/>
    <div id="ai_ack_message">
      ${sysparm_message}
    </div>
    <br/>
    <footer align="right" class="modal-footer" style="padding-top: 15px;">
      <button class="btn btn-primary" onclick="acknowledgeAIMessage()">Acknowledge</button>
    </footer>
  </div>

  <script>
    function acknowledgeAIMessage() {
      var gdw = GlideDialogWindow.get();
      var fn = gdw.getPreference('onAcknowledge');
      if (fn) fn(); // Call the callback
    }
  </script>
</j:jelly>

Thanks in advance! 

[Maik Skoddow]

Hi @CDJ 

please use the following approach

<g:evaluate var="myMessage">
    myMessage = gs.getMessage('your_message_key');
 </g:evaluate>
 <g:no_escape>
    ${myMessage}
 </g:no_escape>

 Maik

[CDJ]

Hi @Maik Skoddow ,

Thanks for your input. I have tried the scripts and I'm getting Title , header message and button only but messages are not displaying.

<?xml version="1.0" encoding="utf-8"?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide">
  <div>
    <div style="font-size: 18px; font-weight: bold; margin-bottom: 10px;">
      AI System Acknowledgement Required
    </div>

    <g:evaluate var="myMessage">
      myMessage = jellyScript.getParameter("sysparm_message");
    </g:evaluate>

    <div id="ai_ack_message" style="font-size:14px; line-height:1.6;">
      <g:no_escape>
        ${myMessage}
      </g:no_escape>
    </div>

    <br/>

    <div style="text-align: right;">
      <button class="btn btn-primary" onclick="acknowledgeAIMessage()">Acknowledge</button>
    </div>
  </div>

  <script>
    function acknowledgeAIMessage() {
      var gdw = GlideDialogWindow.get();
      var fn = gdw.getPreference('onAcknowledge');
      if (fn) fn();
    }
  </script>
</j:jelly>

Client Script :

function onChange(control, oldValue, newValue, isLoading) {
  if (isLoading || newValue === oldValue) return;

  if (newValue === 'yes') {
    var changeType = g_form.getValue('type');
    var message = '';

    if (changeType === 'standard') {
      message =
        "<b>This request includes a new AI system and must be submitted as a Normal Change Request.</b><br><br>" +
        "Please cancel this request and resubmit using a Normal Change.<br><br>" +
        "Refer to: <a href='https://example.com/standard' target='_blank'>AI Management</a><br><br>" +
        "Contact: <a href='mailto:change@example.com'>change@example.com</a>";
    } else if (changeType === 'normal') {
      message =
        "<b>You have indicated this request includes a new AI system.</b><br><br>" +
        "Before submitting, complete the MRM questionnaire:<br>" +
        "<a href='https://example.com/normal' target='_blank'>Model Risk Management</a><br><br>" +
        "This change requires extra approval from the MRM CAB.<br>" +
        "Contact: <a href='mailto:mrm@example.com'>mrm@example.com</a>";
    } else {
      message = "Unknown change type.";
    }

    var dialog = new GlideModal('custom_ai_dialog');
    dialog.setTitle("AI System Acknowledgement");
    dialog.setPreference('sysparm_message', message);
    dialog.setPreference('onAcknowledge', function () {
      dialog.destroy();
      g_form.addInfoMessage("Acknowledged.");
    });
    dialog.render();
  }
}

Output :

[Ankur Bawiskar]

@CDJ 

try passing normal html tags first and then see for the big html

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Ankur Bawiskar]

@CDJ 

check this blog

"Simple Modal Confirm" UI Page 

If my response helped please mark it correct and close the thread so that it benefits future readers.