3

I have a file: etc/adminhtml/system.xml where I have added some form fields. However I need to add a custom script being executed while someone types in one of the fields.

How can I include a .js in this page? It appears I can't simply include it like I would do in a simple xml magento 2 page

<head>
    <css src="Vendor_Module::test.css"/>
    <link src="Vendor_Module::test.js"/>
</head>
|improve this question|||||
  • 1
    This may help - magento.stackexchange.com/questions/131056/… – Ben Crook Jul 12 '17 at 16:16
  • It does. I actually used requirejs-config.js (I posted it as a reply below). However in my case I wish to include the .js file only in the system page of my module, not in every single page of the admin panel. Any ideas on that? – Irini Koutaki Jul 13 '17 at 13:33
  • I don't do any work in the admin so I can't help with that sorry, is there not layout XML you can use for the admin to target a specific page? – Ben Crook Jul 13 '17 at 13:41
  • I haven't found anything yet. The view/adminhtml/layout/adminhtml_system_config_edit.xml that was suggested in the first reply didn't work... I keep searching though – Irini Koutaki Jul 13 '17 at 13:43
  • I just added the file view/adminhtml/requirejs-config.js with my own code inside and it seems to be loaded in every single page of the admin panel. I don't like this practice, but it's the only thing working right now. I also get this error: Uncaught ReferenceError: config is not defined at requirejs-config.js:423 at requirejs-config.js:424 at requirejs-config.js:428 (anonymous) @ requirejs-config.js:423 (anonymous) @ requirejs-config.js:424 (anonymous) @ requirejs-config.js:428 – Irini Koutaki Jul 13 '17 at 14:25
4

Create in one of your extensions the file view/adminhtml/layout/adminhtml_system_config_edit.xml and put your content in there.
adminhtml_system_config_edit is the layout handle for the configuration page.

|improve this answer|||||
  • Thank you but can you be more detailed? I don't have any files on the view/adminhtml folder, as my only page is set at the etc/adminhtml/system.xml so how do I declare that the system.xml has an external test.js file? I tried what you said and added file view/adminhtml/layout/adminhtml_system_config_edit.xml with the code: <layout version="0.1.0"> <adminhtml_system_config_edit> <reference name="head"> <action method="addJs"><file>test.js</file></action> </reference> </adminhtml_system_config_edit> </layout> but it wasn't included in the output – Irini Koutaki Jul 12 '17 at 13:14
  • Maybe I should add the .js and .css in the etc/acl.xml file, or the etc/adminhtml/menu.xml file? – Irini Koutaki Jul 12 '17 at 15:40
  • 1
    you cannot add js and css files from the system or acl xml files. They serve different purposes. You can add resources from the layout files as explained in the answer. For every configuration page the layout files named adminhtml_system_config_edit.xml will be loaded. that's where you can add your custom js or custom css. – Marius♦ Jul 12 '17 at 15:46
  • OK but I would like some sample code please. Right now I tried to write some sample code in the view/adminhtml/layout/adminhtml_system_config_edit.xml but the .js file was not included – Irini Koutaki Jul 12 '17 at 16:07

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.