{"id":597,"date":"2019-09-10T10:46:35","date_gmt":"2019-09-10T10:46:35","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/09\/10\/add-custom-js-file-in-magento-2-admin-panel\/"},"modified":"2025-06-02T14:24:39","modified_gmt":"2025-06-02T08:54:39","slug":"add-custom-js-file-in-magento-2-admin-panel","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-js-file-in-magento-2-admin-panel\/","title":{"rendered":"How to Add Custom JS File in Magento 2 Admin Panel"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Magento 2 uses the requireJS library, i.e.,&nbsp;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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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. You can also add a <a href=\"https:\/\/meetanshi.com\/blog\/add-custom-phtml-file-in-magento-2-admin\/\" target=\"_blank\" rel=\"noreferrer noopener\">custom Phtml file in Magento 2 admin panel<\/a> to create new layout.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, to do so, you need to follow the below steps to add custom JS file in Magento 2 admin panel:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to Add Custom JS File in Magento 2 Admin Panel:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. Create <strong>app\/code\/Vendor\/Module\/view\/adminhtml\/requirejs-config.js <\/strong>file with the following code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var config = {\n    paths: {\n        'js-file-alias': 'Vendor_Module\/js\/js-file-name'\n    },\n    shim: {\n        'js-file-alias': {\n            deps: ['jquery']\n        }\n    }\n};<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">2. Upload the <strong>JavaScript<\/strong> file at <strong>app\/code\/Vendor\/Module\/view\/adminhtml\/web\/js\/<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. Put the following code in your<strong> .phtml<\/strong> file to load the JavaScript file<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script>\n    requirejs(['jquery', 'js-file-alias'], function($){\n        \/\/ Your Code\n    });\n&lt;\/script><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">4. Run the following <strong>commands<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php bin\/magento setup:static-content:deploy -f<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>php bin\/magento cache:clean<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong> Don\u2019t forget to replace Vendor, Module, js-file-alias, and js-file-name with their respective values.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to add Javascript file in the admin panel for Magento 2. In the same way, you can also <a href=\"https:\/\/meetanshi.com\/blog\/update-total-using-js-file-in-magento-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">update total using JS in Magento 2<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Feel free to post the solution on social media and share it with fellow developers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Magento 2 uses the requireJS library, i.e.,&nbsp;javascript file loader, to work with JS files. The developers may, however, require to use custom Javascript for additional&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-597","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=597"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/597\/revisions"}],"predecessor-version":[{"id":16280,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/597\/revisions\/16280"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}