2

I've copied the instructions here: How to add CSS/JS/an Image to a module backend

modulename.xml

<config>
    <fields name="params">
        <fieldset name="basic" addfieldpath="/modules/mod_joomla4_module_custom_form_fields/fields">
            ~
            <field
                    name="myjavascript"
                    type="myjavascript"
                    label="My Javascript"
                    description="JFIELD_TITLE_DESC"
            />
            ~

models/fields/fields.xml

<?xml version="1.0" encoding="utf-8"?>
<field
        name="myjavascript"
        type="myjavascript"
        label="JGLOBAL_TITLE"
        description="JFIELD_TITLE_DESC"
        required="true"
/>

models/forms/myjavascript.php

<?php

    // Check to ensure this file is included in Joomla!
    defined('_JEXEC') or die('Restricted access');
    
    use Joomla\CMS\HTML\HTMLHelper;
    
    class JFormFieldMyjavascript extends Joomla\CMS\Form\FormField
    {
    
        protected $type = 'Myjavascript';
    
        protected function getLabel()
        {
            return;
        }
    
        protected function getInput()
        {
            // Custom JS
            HTMLHelper::_('script', 'media/mod_joomla4_module_custom_form_fields/mod_joomla4_module_custom_form_fields_backend.js', ['version' => 'auto', 'relative' => true]);
    
            // Custom CSS
            HTMLHelper::_('stylesheet', 'media/mod_joomla4_module_custom_form_fields/mod_joomla4_module_custom_form_fields_backend.css', ['version' => 'auto', 'relative' => true]);
    
            // Custom HTML
            $html = '<p>Hello, is it me you\'re waiting for</p>';
    
            return $html;
        }
    }

media/js/myjavascript.js

window.event("domready", function() {
    alert("An inline JavaScript Declaration");
});

media/css/myjavascript.css

.card-body h2 {
    font-family: "Comic Sans MS";
}
1

You haven't set the path's correctly for the HTMLHelper calls. You're using relative => true, which means the media and js/css are not required in the path.

So you'll want to use:

// JS
HTMLHelper::_('script', 'mod_joomla4_module_custom_form_fields/mod_joomla4_module_custom_form_fields_backend.js', ['version' => 'auto', 'relative' => true]);
    
// CSS
HTMLHelper::_('stylesheet', 'mod_joomla4_module_custom_form_fields/mod_joomla4_module_custom_form_fields_backend.css', ['version' => 'auto', 'relative' => true]);

As for the actual Javascript, window.event will throw an error, so I'd suggest using:

document.addEventListener('DOMContentLoaded', () => {
    alert('The DOM has loaded')
})

Update:

You're setting the following path for your field:

addfieldpath="/modules/mod_joomla4_module_custom_form_fields/fields"

However the actual file resides in:

models/forms/myjavascript.php

so you need to add the file to the path you've defined for the addfieldpath attribute.

11
  • I'm still not seeing a difference in the backend. Could it be because of where I'm saving the media files?
    – Eoin
    Oct 13 '20 at 15:49
  • Where are they saved?
    – Lodder
    Oct 14 '20 at 4:54
  • media/mod_modulename/css/modulename.css in the media folder in the module name
    – Eoin
    Oct 14 '20 at 12:42
  • So media/mod_joomla4_module_custom_form_fields/css/mod_joomla4_module_custom_form_fields_backend.css?
    – Lodder
    Oct 14 '20 at 13:50
  • Do you at least see Hello, is it me you're waiting for being displayed on the page?
    – Lodder
    Oct 14 '20 at 13:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.