Solved: Re: custom js admin customer edit

agiorgini · ‎05-31-2018

Hello,

how do I load a custom js in adminhtml, in customer edit form?

thanks a lot

Rakesh Jesadiya · ‎05-31-2018

You need to create custom module.

In custom module, create customer_index_edit.xml file under Vendor/Modulename/view/adminhtml/layout/customer_index_edit.xml

Now keep content below,

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Vendor_Modulename::js/customer.js"/>
    </head>
</page>

Create customer.js file under Vendor/Modulename/view/adminhtml/web/js/customer.js

require([
    'jquery'
], function ($) {
    'use strict';

    $(document).ready(function(){
    	// custom js
    });

});

Run command,

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

If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial

View solution in original post

Rakesh Jesadiya · ‎05-31-2018

You need to create custom module.

In custom module, create customer_index_edit.xml file under Vendor/Modulename/view/adminhtml/layout/customer_index_edit.xml

Now keep content below,

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Vendor_Modulename::js/customer.js"/>
    </head>
</page>

Create customer.js file under Vendor/Modulename/view/adminhtml/web/js/customer.js

require([
    'jquery'
], function ($) {
    'use strict';

    $(document).ready(function(){
    	// custom js
    });

});

Run command,

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

If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial

Sunil Patel · ‎05-31-2018

Hello @agiorgini

Magento 2 does not adding js using layout xml.

you need to add using requirejs-config.js

var config = {    map: {
        '*': {            customAdmin: 'Namespace_Modulename/js/customAdmin'
        }
    },    deps: ["jquery"]
};

More info:- https://magento.stackexchange.com/questions/153378/magento-2-load-custom-javascript-with-requirejs

Hope it will help you.

If works then mark as solution.

Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

Manthan Dave · ‎05-31-2018

Hi @agiorgini

AKAIK - you must need to use requirejs-config-js concept of magento 2 in this case.

here assuming you are creating custom module so you need to create your custom js and needs to including in your requirejs-config-js file

As you wanted to use this in admin side - so you need to add requirejs in admin area

Below is the full path :

VendorName_ModuleName/view/adminhtml/requirejs-config.js file and add below code in it :

var config = {
    map: {
        '*': {
            customJs: 'Namespace_Modulename/js/customAdmin'
        }
    },
    deps: ["jquery"]
};

Now open your customer_edit template phtml file and load your custom js into it.

<script>
require(['jquery', 'Namespace_Modulename/js/customAdmin'],
    function ($) {
        return ...;
    }
);
</script>

you can refer this link for more details - http://inchoo.net/magento-2/custom-javascript-in-magento-2-with-requirejs/

if issue solved,Click Kudos & Accept as Solution

Sunil Patel · ‎06-01-2018

Hello @agiorgini

https://community.magento.com/t5/Magento-2-x-Programming/custom-js-admin-customer-edit/m-p/96316#M47...

Solution does not work for all cases with js merge.

Use Magento 2 best approach for same.

Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

Rakesh Jesadiya · ‎06-01-2018

https://community.magento.com/t5/Magento-2-x-Programming/custom-js-admin-customer-edit/m-p/96316#M47...

With above solutions there are not any merging issue will be happend. Its working for all cases of Js Merge, bundling and so on.

So Don't worry about Js Merging or any other stuff.

@agiorgini I have already test before posted this solutions for all cases.

If you have still any issue let me know.

If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial

Sunil Patel · ‎06-01-2018

@Rakesh Jesadiya

I already faced a similar issue.

Hope it will work

Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

Rajendra_pawar · ‎05-16-2019

It's working for me