Magento 2 How to override adminhtml Js components

Question

Basically I want to override grid.js component file in Magento 2 Require config

view/adminhtml/require-config.js

Require config code.

var config = {
    map: {
        '*': {
            customScript:'Acx_Grid/js/custom'
        }
    }
};

I want to know process how to override J's component in backend.

Answer 1

You can change grid.js in 2 ways:

1. Override via requirejs-config.js :

   • It will replace the grid.js file in whole Magento.

   • Create a file at MyVendor/MyModule/view/adminhtml/requirejs-config.js with the following content:

   
   var config = {
       map: {
           "*": {
               "mage/adminhtml/grid": "MyVendor_MyModule/js/grid"
           }
       }
   }
   

2. For a specific grid only, you can change the phtml file which call the grid js.

   • Override the phtml in your Grid block as below.

     
     class Grid extends \Magento\Backend\Block\Widget\Grid\Extended
     {
         protected $_template = 'MyVendor_MyModule::widget/grid/extended.phtml';
     }
     

   • Copy the phtml file from the core form vendor/magento/module-backend/view/adminhtml/templates/widget/grid/extended.phtml into your own module at MyVendor/MyModule/view/adminhtml/template/widget/grid/extended.phtml.
   • Replace line 256 with your own js deps.push('mage/adminhtml/grid'); to deps.push('MyVendor_MyModule/js/grid');

Answer 2

create module for override js file
\app\code\Magento\custombackend\etc\module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Magento_custombackend" setup_version="0.0.1">
        <sequence>
            <module name="Magento_Sales"/>
        </sequence>
    </module>
</config>

\app\code\Magento\custombackend\view\adminhtml\requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Sales/order/view/post-wrapper': 'Magento_custombackend/js/order/view/post-wrapper'
        }
    }
};

\app\code\Magento\custombackend\registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,    
'Magento_custombackend',    __DIR__);
?>

\app\code\Magento\custombackend\view\adminhtml\web\js\order\view\post-wrapper.js

place your customized js here