APEX

I’m seeing an issue with dynamically setting an Interactive Grid column heading when CSP is enabled in APEX 24.2.7.

Goal:
Set the column heading dynamically from a hidden page item whose value is generated by SQL.

Column JavaScript Initialization Function:

function(options) {
options.heading.heading = apex.item("HEADER4").getValue();
return options;
}

Hidden Item HEADER4 SQL:

WITH w AS (
SELECT NVL(h, 8) AS h
FROM some_table
WHERE some_date = <calculated_date>
)
SELECT TO_CHAR(<calculated_date>, 'DY "<br>" DD-MON')
|| '<br><span #APEX_CSP_NONCE_ATTRIBUTE# style="font-weight:900;'
|| CASE
WHEN NVL((SELECT h FROM w), 8) = 0
THEN ' color:var(--ut-header-background-color);">('
ELSE '">('
END
|| NVL((SELECT h FROM w), 8)
|| ')</span>'
FROM dual;

Observed Behavior:

• Without CSP → heading and styles apply correctly.
• With CSP → heading HTML renders correctly, for example:

<span class="a-GV-headerLabel" id="day4_HDR">
WED <br> 23-JUL<br>
<span nonce="" style="font-weight:900; color:var(--ut-header-background-color);">(0)</span>
</span>

…but the inline style does not apply until I disable and re-enable it in browser dev tools.

Question:
Is this expected with CSP?
What is the correct way to apply custom styles to Interactive Grid headings when CSP is enabled?