UI Page shows a blank screen after adding an inline script with && or <

seungchulkim · 15m ago

Hi Guys , I'd glad to share my knoledge ,

This is caused by Jelly two-phase parsing. The HTML field of a UI Page is parsed as XML twice.

<![CDATA[ ]]> protects your script in the first pass, but the first pass also removes the CDATA wrapper, so the second pass sees a bare & or < and the XML parse fails — the page renders empty, often with no visible error.

Step 1: Find the inline script in the HTML field

<script>
<![CDATA[
  if (a && b) { el.innerHTML = '<span>' + n + '</span>'; }
  for (var i = 0; i < list.length; i++) { /* ... */ }
]]>
</script>

Step 2 (recommended): Move the logic to the Client script field

The Client script field of the UI Page is not parsed by Jelly, so &&, < and HTML strings are safe there. Keep only markup in the HTML field.

Step 3: If the script must stay in the HTML field, write it without & and <

Replace with:

<script>
  if (a) { if (b) {                               // nested if instead of the AND operator
    var s = document.createElement('span');        // createElement instead of markup strings
    s.textContent = n;
    el.appendChild(s);
  } }
  for (var i = 0; i !== list.length; i++) { }     // !== instead of less-than (comments count too!)
</script>

Alternatively use the Jelly escapes ${AMP} and ${LT} (e.g. a ${AMP}${AMP} b). They work, but the code becomes hard to read and easy to break during later edits.

Step 4: Validate before saving

A quick local check: run the HTML through an XML parser twice — once as-is, once with the CDATA markers removed. If the second parse fails, the page will be blank.

import re, xml.dom.minidom as m
s = open('ui_page.xml').read()
m.parseString(s)                                          # phase 1
m.parseString(re.sub(r'<!\[CDATA\[|\]\]>', '', s))         # phase 2 (fails = blank page)

If this helped, please mark it as Helpful 👍