Add color picker in Magento Admin Configuration Page

2 comments
Sometimes you may want to add color picker in the admin configuration page of your Magento module or extension. You may think this as a big task but believe me this is as simple as anything. Few lines of XML code will do it for you. Here are the exact steps to do this.

I hope you know how to add custom configuration options in Magento. If not, read this tutorial: Creating Custom Configuration Options in Magento Admin.
Namespace: Color
Module name: Picker

1. In adminhtml/default/default/layout directory, create the layout XML file for your module. Lets name it as picker.xml. Write following content in picker.xml:

<?xml version="1.0"?>
<layout version="0.1.1">
 <adminhtml_system_config_edit>
  <reference name="head">
   <action method="addJs"><file>jscolor/jscolor.js</file></action>
  </reference>
 </adminhtml_system_config_edit>
</layout>
2. Declare the layout file in your module's config.xml as:

<config>
...
 <adminhtml>
  <layout>
   <updates>
    <basket>
     <file>picker.xml</file>
    </basket>
   </updates>
  </layout>
 </adminhtml>
...
</config>
3. In your module's system.xml, add the color picker field as:

<config>
...
 <sections>
   <myconfig module="picker" translate="label">
   ...
   <groups>
    <my_group translate="label">
     ...
      <my_color>
       <label>Background Color</label>
       <frontend_type>text</frontend_type>
       <validate>color</validate> <!-- This is important -->
       <sort_order>1</sort_order>
       <show_in_default>1</show_in_default>
       <show_in_website>1</show_in_website>
       <show_in_store>1</show_in_store>
       <comment>Specify the background color.</comment>
      </my_color>
    <my_group>
   </groups>
   <myconfig>
 </sections>
...
</config>
This is it and you are done.

2 comments

Before following this I was thinking this as a tough part but now realized rather than to listen to others should look for a solution whether it is easy or hard.

Thank you soo much.. this article is really simple and helpfull..

We would love to hear from you...

back to top