Adminhtml JavaScript – How to Add Custom JavaScripts to Adminhtml Config Page

adminhtmljavascript

I am working on a custom Magento extension.
I have created already a page in the admin panel where you can save some settings for the extension.

The url of the page where you can edit the module settings is looking like this:

http://mymagento.com/index.php/admin/system_config/edit/section/vivasparser/

Here is my config.xml file:

<config>
    <modules>
        <VivasIndustries_Smartparser>
            <version>0.1.0</version>
        </VivasIndustries_Smartparser>
    </modules>
    <global>
        <models>
            <smartparser>
                <class>VivasIndustries_Smartparser_Model</class>
            </smartparser>
        </models>
        <helpers>
            <smartparser>
                <class>VivasIndustries_Smartparser_Helper</class>
            </smartparser>
        </helpers>
     </global>
    <adminhtml>
        <acl>
            <resources>
                <all>
                    <title>Allow Everything</title>
                </all>
                <admin>
                    <children>
                        <system>
                            <children>
                                <config>
                                    <children>
                                        <vivasparser>
                                            <title>vivasparser - All</title>
                                        </vivasparser>
                                    </children>
                                </config>
                            </children>
                        </system>
                    </children>
                </admin>
            </resources>
        </acl>
          <layout>
            <updates>
              <smartparser>
                <file>smartparser.xml</file>
              </smartparser>
            </updates>
          </layout>
    </adminhtml>     
</config>

Here is my smartparser.xml file:

<layout>
  <adminhtml_catalog_product_edit
    <reference name="head">
      <action method="removeItem"><type>js</type><name>prototype/prototype.js</name></action>
      <action method="addJs"><script>my_extension/jquery.js</script></action>
      <action method="addJs"><script>my_extension/colorpicker.js</script></action>
      <action method="addJs"><script>prototype/prototype.js</script></action>
    </reference>
  </adminhtml_catalog_product_edit>
</layout>

Why the javascripts are not loaded ?
I am trying to find colorpicker.js in the output HTML source of the page but there is no such thing loaded anywhere.

Can you help me out load these javascripts into my admin panel config page ?

Thanks in advance!

Best Answer

in smartparser.xml the layout handle should be adminhtml_system_config_edit instead of adminhtml_catalog_product_edit.
Also you forgot a > on the line <adminhtml_catalog_product_edit.

Related Solutions

Magento Admin – Append Block to Admin Login Form

So the answer is that it should not be an observed event. Here is how I got it to work, in the config.xml I needed to update the adminhtml node.

<?xml version="1.0" encoding="utf-8"?>
<config>
  <modules>
    <Wsu_NewtworkSecurities>
      <version>0.1.0</version>
    </Wsu_NewtworkSecurities>
  </modules>
  <adminhtml>
    <layout>
      <updates>
        <wsu_newtworksecurities>
          <file>newtworksecurities.xml</file>
        </wsu_newtworksecurities>
      </updates>
    </layout>
  </adminhtml>
</config>

and in

app\design\adminhtml\default\default\layout\wsu\newtworksecurities.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <feildset>
        <reference name="head">
            <action method="addJs">
                <script>wsu/newtworksecurities/newtworksecurities.js</script>
            </action>
        </reference>
    </feildset>

    <adminhtml_index_login>
        <update handle="feildset" />
        <reference name="form.additional.info">
            <block type="wsu_newtworksecurities/feildset" name="newtworksecurities.feildset"
                   template="wsu/newtworksecurities/feildset.phtml" />
        </reference>
    </adminhtml_index_login>

    <wsu_newtworksecurities_error_index>
        <reference name="content">
            <block type="core/template" name="newtworksecurities.error" template="wsu/newtworksecurities/error.phtml"/>
        </reference>
    </wsu_newtworksecurities_error_index>

</layout>

Adminhtml – Add Custom Template for Custom Product Attribute

First of all...nice question. Got me really interested.
Here is an example on how you can create an attribute that has a custom renderer (template) and the value is saved serialized.
For this example I created an attribute that will have 2 text inputs, but you can basically put anything in there.

I recommend creating a custom module to handle your attribute. Let's call this extension Easylife_Attr.
You will need the following files.
app/etc/module/Easylife_Attr.xml - the declaration file.

<?xml version="1.0"?>
<config>
    <modules>
        <Easylife_Attr>
            <codePool>local</codePool>
            <active>true</active>
            <depends>
                <Mage_Catalog /><!-- should depend on mage_catalog-->
                <Mage_Adminhtml /><!-- should depend on mage_adminhtml-->
            </depends>
        </Easylife_Attr>
    </modules>
</config>

app/code/local/Easylife/Attr/etc/config.xml - the configuration file

<?xml version="1.0"?>
<config>
    <modules>
        <Easylife_Attr>
            <version>0.0.1</version>
        </Easylife_Attr>
    </modules>
    <global>
        <resources>
            <easylife_attr_setup>
                <setup>
                    <module>Easylife_Attr</module>
                    <class>Mage_Catalog_Model_Resource_Setup</class><!-- use the catalog setup so you can add your attribute -->
                </setup>
            </easylife_attr_setup>
        </resources>
        <models>
            <easylife_attr>
                <class>Easylife_Attr_Model</class>
            </easylife_attr>
        </models>
        <blocks>
            <easylife_attr>
                <class>Easylife_Attr_Block</class>
            </easylife_attr>
        </blocks>
    </global>
    <adminhtml>
        <events>
            <adminhtml_catalog_product_edit_prepare_form><!-- event needed to add a template to a certain attribute -->
                <observers>
                    <easylife>
                        <class>Easylife_Attr_Model_Observer</class>
                        <method>convertCustomValues</method>
                    </easylife>
                </observers>
            </adminhtml_catalog_product_edit_prepare_form>
        </events>
    </adminhtml>
</config>

app/code/local/Easylife/Attr/sql/easylife_attr_setup/install-0.0.1.php - the install script. It will add your attribute

<?php
$this->addAttribute('catalog_product', 'custom_values', array(
    'group'         => 'Custom values', //the tab name where the attribute will be placed
    'input'         => 'textarea', //this is not really important
    'type'          => 'text', //attribute type should be text to support long values
    'label'         => 'Custom values', //the attribute label
    'backend'       => 'easylife_attr/custom',  //a custom backend model that will handle serialization and deserialization
    'visible'       => true,
    'required'      => false,
    'visible_on_front' => true,
    'global'        => Mage_Catalog_Model_Resource_Eav_Attribute::SCOPE_GLOBAL, //scope can be anything but if it's not global you will need some changes to support store view values
));

Now the fun part.

app/code/local/Easylife/Attr/Model/Observer.php - the observe that will change the attribute template

<?php
class Easylife_Attr_Model_Observer {
    public function convertCustomValues($observer) {
        $form = $observer->getEvent()->getForm();
        $customValues = $form->getElement('custom_values');
        if ($customValues) {
            $customValues->setRenderer(
                Mage::app()->getLayout()->createBlock('easylife_attr/adminhtml_product_custom')
            ); //set a custom renderer to your attribute
        }
    }
}

app/code/local/Easylife/Attr/Block/Adminhtml/Product/Custom.php - the custom renderer block

<?php
class Easylife_Attr_Block_Adminhtml_Product_Custom
    extends Mage_Adminhtml_Block_Widget
    implements Varien_Data_Form_Element_Renderer_Interface {
    public function __construct()
    {
        $this->setTemplate('easylife_attr/product/custom.phtml'); //set a template
    }
    public function render(Varien_Data_Form_Element_Abstract $element) {
        $this->setElement($element);
        return $this->toHtml();
    }
}

app/design/adminhtml/default/default/template/easylife_attr/product/custom.phtml - the template for the attribute.

<?php
$_htmlId = $this->getElement()->getHtmlId();
$_htmlClass = $this->getElement()->getClass();
$_htmlName = $this->getElement()->getName();
$_readonly = $this->getElement()->getReadonly();
$value = $this->getElement()->getValue();
//get the values for the 2 text elements
$someField = (isset($value['some_field']) ? $value['some_field'] : '');
$otherField = (isset($value['other_field']) ? $value['other_field'] : '');

?>
<tr> <!-- should be wrapped in a tr element to fit in the admin template -->
    <td class="label"><?php echo $this->getElement()->getLabel(); ?></td>
    <td colspan="10" class="grid">
        <table cellspacing="0" class="data border">
            <col width="120" />
            <col />
            <thead>
            <tr class="headings">
                <th><?php echo $this->__('Some field')?></th>
                <th><?php echo $this->__('Other Field')?></th>
            </tr>
            </thead>
            <tbody id="<?php echo $_htmlId; ?>_container"></tbody>
            <tfoot>
            <tr>
                <td><input type="text" name="<?php echo $_htmlName; ?>[some_field]" value="<?php echo $someField?>"<?php echo ($_readonly) ? ' readonly="readonly"' : ''?>> </td>
                <td><input type="text" name="<?php echo $_htmlName; ?>[other_field]" value="<?php echo $otherField?>"<?php echo ($_readonly) ? ' readonly="readonly"' : ''?>></td>
            </tr>
            </tfoot>
        </table>
    </td>
</tr>

app/code/local/Easylife/Attr/Model/Custom.php - the model that handles the serialization and deserialization.

<?php
class Easylife_Attr_Model_Custom extends Mage_Eav_Model_Entity_Attribute_Backend_Abstract{
    public function beforeSave($object) 
    {
        //before sabing the product check if the attribute `custom_values` is array.
        //if it is, serialize it for saving in the db
        $attributeCode = $this->getAttribute()->getAttributeCode();
        $data = $object->getData($attributeCode);
        if (is_array($data)) {
            $data = array_filter($data);
            $object->setData($attributeCode, serialize($data));
        }
        return parent::beforeSave($object);
    }
    public function afterLoad($object) {
        //after loading the product, check if the value for custom_values is not an array. If it's not try to unserialize the value.
        $attributeCode = $this->getAttribute()->getAttributeCode();
        $data = $object->getData($attributeCode);
        if (!is_array($data)) {
            $object->setData($attributeCode, @unserialize($data));
        }
        return parent::afterLoad($object);
    }
}

That's it. Here is how the attribute would look in the backend:

Custom template attribute

Best Answer

Related Solutions

Magento Admin – Append Block to Admin Login Form

Adminhtml – Add Custom Template for Custom Product Attribute

Related Topic