How to Add Custom JS File in Magento 2 Admin Panel

Magento 2 uses the requireJS library, i.e., javascript file loader, to work with JS files. The developers may, however, require to use custom Javascript for additional features not offered by the default Magento 2.

For example, a custom module requires functionalities such as to select an image, crop an image, display charts, etc. There are many features that can be implemented using Javascript and improve the Magento 2 admin panel.

However, to do so, you need to follow the below steps to add custom JS file in Magento 2 admin panel:

Steps to Add Custom JS File in Magento 2 Admin Panel:

  1. Create app/code/Vendor/Module/view/adminhtml/requirejs-config.js file with the following code:
  2. Upload the JavaScript file at app/code/Vendor/Module/view/adminhtml/web/js/
  3. Put the following code in your .phtml file to load the JavaScript file
  4. Run the following commands:

Note: Don’t forget to replace Vendor, Module, js-file-alias, and js-file-name with their respective values.

Follow these steps to add Javascript file in the admin panel for Magento 2.

I’d like to know what functionality you added using this method in the Comments section below. Also, please mention any doubts on the topic and I’d be happy to help.

Feel free to post the solution on social media and share it with fellow developers.

Thanks.

4.9
(based on 16 Reviews)
How to Add Custom JS File in Magento 2 Admin Panel

Sanjay Jethva

Sanjay is a co-founder at Meetanshi. He is a Certified Magento Developer who loves creating Magento E-commerce solutions. Owing to his contributions in Magento Forums and posting solutions, he is among the top 50 contributors of the Magento community in 2019. When he is not engrossed with anything related to Magento, he loves to play cricket.

4 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *