How to add CSS/JS/an Image to a module backend

Question

I have long wondered how to change my admin particularly for my custom modules. For many cases using an XML file is fine and I can use the built-in Joomla! form fields.

In some cases, I'd like to style them, which I can do by adding classes and then adding the content to the template file. Which is 99.9% of the time Isis.

But I have always wondered how I would achieve this on any admin template. I would need to load a CSS or JS file somehow. I could do this with an addScript declaration, but I do not have a PHP file to add this to. I could use an Admin Plugin, but that doesn't seem like the right solution.

And finally, how would I add an image, or some HTML e.g. an explanation or instructions. I can use the description panel on some occasions, but on others, it would make sense to be next to the field itself.

Answer 1

I personally do this in my extensions by creating a custom field:

XML:

<fieldset name="something" label="Something" addfieldpath="/modules/mod_xxx/fields">
    <field type="testfield" />
</fieldset>

mod_xxx/fields/testfield.php:

<?php

defined('JPATH_PLATFORM') or die;

use Joomla\CMS\HTML\HTMLHelper;

class JFormFieldTest extends Joomla\CMS\Form\FormField
{

    protected $type = 'Test';

    protected function getLabel()
    {
        return;
    }

    protected function getInput()
    {
        // Custom JS
        HTMLHelper::_('script', 'mod_xxx/custom.js', ['version' => 'auto', 'relative' => true]);

        // Custom CSS
        HTMLHelper::_('stylesheet', 'mod_xxx/custom.css', ['version' => 'auto', 'relative' => true]);

        // Custom HTML
        $html = '<p>Hello</p>';

        return $html;
    }
}