Add Custom JavaScript to Admin Theme

Question

Using Magento 2.4. I want to add some custom JS in the admin area.

app\code\ClientQuote\AdminTheme\view\adminhtml\requirejs-config.js

var config = {
    map: {
        '*': {
            adminTheme: 'ClientQuote_AdminTheme/js/client-admin'
        }
    },

    paths: {
        'custom-script': 'ClientQuote_AdminTheme/js/client-admin'
    }
};

I can see the above in the source of /static/adminhtml/Magento/backend/en_US/requirejs-config.js

app\code\ClientQuote\AdminTheme\view\adminhtml\web\js\client-admin.js

define([
    'prototype'
], function () {
    'use strict';

    alert("andrew");
    console.log('andrew');

});

Nothing is output.

Looking at the other scripts in requirejs-config.js they all seem to added in different ways.

Answer 1

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

1. Create app/code/ClientQuote/AdminTheme/view/adminhtml/requirejs-config.js file with the following code:

var config = { paths: { 'custom-script': 'ClientQuote_AdminTheme/js/custom-script' }, shim: { 'js-file-alias': { deps: ['jquery'] } } };

1. Upload the JavaScript custom-script.js file at app/code/ClientQuote/AdminTheme/view/adminhtml/web/js/

2. Put the following code in your .phtml file to load the JavaScript file

Note : add .phtml file via layout.xml

<script> requirejs(['jquery', 'custom-script'], function($){ // Your Code }); </script>

4. Run the following commands:

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean