How to insert a custom HTML div (map-canvas) into an Admin View?

[GiuseppeBosco]

Hi everyone,

I'm trying to insert a simple HTML div

<div id="map-canvas" style="height: 400px; width: 100%; border: 1px solid #ddd;"></div>
inside an existing Admin View of my component (the detail view with the editing form).

I tried using JCB's "Custom Code" feature, selecting Comment Type: HTML and Target: JCB manual. I pasted the div's HTML code there, saved it, and then took the generated placeholder (e.g., ``).

Subsequently, I attempted to insert this placeholder directly into the layout definition area of my Admin View (where the form's HTML is managed). However, this attempt resulted in a frontend error page with a PHP syntax error: syntax error, unexpected token "<". It seems the system is interpreting the HTML as PHP.

I've also searched the online documentation and the forum, but I haven't found a specific guide on how to correctly include arbitrary HTML directly within an Admin View's layout without causing syntax errors.

What is the correct method to insert an HTML block like the map div into a JCB Admin View without encountering syntax errors?

[VictorMelkor]

Hi! You're on the right track using the Custom Code feature in JCB, but the issue seems to be about where and how the placeholder is being rendered in the layout.

Here's what to check:

1. Do not paste raw HTML directly in the layout PHP file
   If you paste raw HTML like <div>...</div> directly into a PHP template (without echo or escaping), you'll trigger a syntax error because the PHP parser expects valid PHP code or output statements. That’s likely the cause of the unexpected token "<" error.

2. Correct method using placeholders
   When using JCB's Custom Code (e.g., "JCB Manual" type), JCB replaces the {placeholder} in the layout with the HTML you inserted — but only if the layout system is parsing the placeholders correctly.

   Instead of:

   <div>My map</div>

   Use the placeholder generated by JCB:

   <?= $this->placeholderName ?>

   Or, depending on how the layout is structured:

   echo $this->placeholderName;

   Replace placeholderName with the actual key JCB created for your custom code block.

3. Use the correct insertion point
   Place the PHP placeholder inside the appropriate template file — usually inside the form rendering view under:

   /administrator/components/com_yourcomponent/views/yourview/tmpl/edit.php
   

4. Alternative: Add HTML via the override system
   If you're comfortable, you can override the view template and inject custom HTML directly via standard Joomla layout practices.

---

If you still get the < syntax error, paste here the exact snippet you added and how you're referencing the placeholder, and we can help fine-tune it.

Let us know how it goes!

[GiuseppeBosco]

I'm not sure I understood correctly. So, I insert the PHP code in admin view >> PHP? Isn't it necessary to use custom code?
I'm also wondering in which of the many PHP areas I should insert this code; I'd like to see it after my fields.

Then I was wondering, if I edit the file directly, won't it be overwritten when I compile the code?

Thanks for the reply.

[GiuseppeBosco]

I'm sorry, I just noticed that the editor had broken the HTML code.
I have edited the first post