Magento Add JS to Sales Order Create

Add Custom Javascript to Sales Order Create

This is a simple example of how you can add a JS file to the Sales Order Create page. Ofcourse, you can take it further and add css and other custom content.

For this, to follow best practices, you’ll have to create your own module if you don’t have already.

I’ll start from bottom up, to evidentiate the core need:

Create a layout file:
app/design/adminhtml/default/default/layout/mycustom/adminthml.xml

<?xml version="1.0"?>
<layout>
    <adminhtml_sales_order_create_index>
        <reference name="head">
            <action method="addJs">
                <script>mycustom/mycustom.js</script>
            </action>
        </reference>
    </adminhtml_sales_order_create_index>
</layout>

You can skip the mycustom folder if you’d like and name your js file as you want – but remember to change accordingly also in the next steps.

Now you need to reference the xml layout file you just created.

Create your module

Create app\code\local\Mycustom\Adminhtml\etc\config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Mycustom_Adminhtml>
          <version>0.0.1</version>
        </Mycustom_Adminhtml>
    </modules>
    <adminhtml>
        <layout>
            <updates>
                <mycustom>
                    <!-- this will look for the XML file in the app/design/adminhtml/default/default/layout folder -->
                    <file>mycustom/adminhtml.xml</file>
                </mycustom>
            </updates>
        </layout>
    </adminhtml>
</config>

Again, you can also skip the folder and name the xml file as you want.

Now you need to reference your module.
Create \app\etc\modules\Mycustom_Adminhtml.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Mycustom_Adminhtml>
            <active>true</active>
            <codePool>local</codePool>
            <depends>
                <Mage_Adminhtml/>
                <Mage_Sales />
            </depends>
        </Mycustom_Adminhtml>
    </modules>
</config>

Now you can create the js file:
\js\mycustom\mycustom.js

What to be aware of/check:
– Look into Configuration > Advanced > Advanced to see if your new module is listed and Enabled
– Log files in /var/log folder
– Typing errors
– Root of mentioned paths is /web/ of your Magento installation folder

Article written to support the answer in http://magento.stackexchange.com/questions/51528/i-need-to-add-some-form-validation-for-telephone-field-on-admin-side-for-magento
with the #magestackday event of #magestackday2015.