Hey I am relatively new to APEX, started a few months ago, so anyways I read about this template plugin and I wanted to try it for my job. So i followed this tutorial: https://hartenfeller.dev/blog/oracle-apex-template-components-introduction , for creating a progress bar template. I did all their steps and its rendering the data in the main page, but this error keeps coming up in the console:
Error: Region element not found R8408819864128063107
at l.create (desktop_all.min.js?v=24.2.5:16:1800)
at r.templateReportRegionInit (widget.templateReport.min.js?v=24.2.5:4:3399)
at testing-template-components?session=9139866687309:214:926
at HTMLDocument.<anonymous> (testing-template-components?session=9139866687309:214:2564)
at e.init (desktop_all.min.js?v=24.2.5:22:5933)
at HTMLDocument.<anonymous> (testing-template-components?session=9139866687309:211:11)
at l (desktop_all.min.js?v=24.2.5:5:30120)
at c (desktop_all.min.js?v=24.2.5:5:30422).
From what I can understand its because I didnt include the APEX#DOM_ID thing in my component, but when I included it in my template like so:
Report Body:
<div class = "progress-list" id = "#APEX$DOM\_ID#">#APEX$ROWS#</div>
The id should be generated and no error should come. But somehow the same error came again. So I was like ‘if the dom id is there, whats the problem’ so I just checked in inspect element if the id is there but this is what i found:
ID is not even being generated. Is this is just a problem i have live with, cause it works currently. But earlier when tried something on my own this error keep popping up there also. Is there a solution?
Anyways this is my template code and the sql query i used to generate:
Partial:
{if APEX$IS_LAZY_LOADING/}
<div></div>
{if MY\_SECOND\_PLACEHOLDER%assigned/}<div></div>{endif/}
{else/}
<div class="skill-container" >
<span class="skill-label">#SKILL#</span>
<span class="skill-percentage">#PCT#</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: #PCT#%; background: {if COLOR\_INDEX%assigned/}var(--u-color-#COLOR\_INDEX#);{else/}var(--u-color-1);{endif/}"></div>
</div>
<div>#MY\_FIRST\_PLACEHOLDER#</div>
{if MY\_SECOND\_PLACEHOLDER/}<div>#MY\_SECOND\_PLACEHOLDER#</div>{endif/}
{endif/}
Report row:
<div #APEX$ROW\_IDENTIFICATION# style = "margin-top:1lh;">#APEX$PARTIAL#</div>
Report Body:
<div class = "progress-list" id = "#APEX$DOM\_ID#">#APEX$ROWS#</div>
Sql query:
SELECT 'JavaScript' as title
, 90 as skill
, 1 as i
FROM dual
UNION
SELECT 'SQL'
, 50
, 2
FROM dual