UI page created to display checklist is not rendering.

[sharadhir]

Created new UI page to render few checklist items. But it is not loading empty even when it runs directly.

<j:jelly xmlns:j="jelly:core" xmlns:g="glide">

  <g:ui_form>

    <div style="padding:15px; font-family:Arial, sans-serif;">

      <h3>RCA Review Checklist</h3>

      <ul>

        <li>Have you selected the correct Configuration Item?</li>

        <li>Have you completed the Analysis Information?</li>

        <li>Have you created and linked a Known Error Article?</li>

      </ul>

      <button onclick="closeModal();" style="margin-top: 10px;">Close</button>

    </div>

    <script type="text/javascript">

      <![CDATA[

      function closeModal() {

        if (window.parent && window.parent.GlideModal) {

          window.parent.GlideModal.get().destroy();

        }

      }

      ]]>

    </script>

  </g:ui_form>

</j:jelly>

[Ankur Bawiskar]

@sharadhir 

where are you rendering that UI page?

what's your business requirement and what's not working?

try this UI page

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">


    <div style="padding:15px; font-family:Arial, sans-serif;">
      <h3>RCA Review Checklist</h3>
      <ul>
        <li>Have you selected the correct Configuration Item?</li>
        <li>Have you completed the Analysis Information?</li>
        <li>Have you created and linked a Known Error Article?</li>
      </ul>
      <button onclick="closeModal();" style="margin-top: 10px;">Close</button>
    </div>

    <script type="text/javascript">
      function closeModal() {
        if (window.parent &amp;&amp; window.parent.GlideModal) {
          window.parent.GlideModal.get().destroy();
        }
      }
    </script>

</j:jelly>

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[Its_Sagnic]

Hi @sharadhir ,

I faced exact same issue with one of my usecase.
Try the solution proposed below to Make your UI page work.

1. HTML Code :
This section defines the visual structure. Note that the <script> tags are removed to prevent the "empty page" rendering error caused by XML parsing conflicts.

<?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:ui_form>
<div style="padding:15px; font-family:Arial, sans-serif;">
<h3 style="margin-top:0;">RCA Review Checklist</h3>
<ul style="line-height: 1.6;">
<li>Have you selected the correct Configuration Item?</li>
<li>Have you completed the Analysis Information?</li>
<li>Have you created and linked a Known Error Article?</li>
</ul>

<div style="text-align: right; margin-top: 20px;">
<button type="button" class="btn btn-default" onclick="closeModal();">Close</button>
</div>
</div>
</g:ui_form>
</j:jelly>

2. Client Script :
Place this code in the Client Script field of the UI Page record. This field handles JavaScript safely without needing <script> or CDATA tags.

function closeModal() {
// 2026 Best Practice: Get the current modal instance and destroy it
var gm = GlideModal.get();
if (gm) {
gm.destroy();
} else {
// Fallback for older implementations or direct page access
window.parent.GlideModal.get().destroy();
}
}

If you are calling it from UI Action. check the Ui page name ( scopename_uipagename) and then Use it in GlideModal method.

var gm = new GlideModal('Scopename_YOUR_UI_PAGE_NAME_HERE'); // Put your page suffix here
gm.setTitle('RCA Review');
gm.render();

If you find the solution helpful please Like it.