CODEWITHSUNDEEP
magentoinputcolorsadminpicker
Kais Elouragini
Kais Elouragini

Reputation: 53

color picker in magento admin panel

I want to add a color picker in Magento 1.7 CE Admin panel. Knowing that I already used the custom select model but I can't find how to add a custom color picker.

Can anyone help me out?

Thanks.

Upvotes: 2

Views: 6246

Answers (3)

Vishal Thakur
Vishal Thakur

Reputation: 1696

ADD COLOR PICKER IN MAGENTO ADMIN CONFIGURATION PAGE

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.

  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>

This is it and you are done. It will show like this in Admin System Config Field:-

enter image description here

Upvotes: 1

hsuastegui
hsuastegui

Reputation: 49

You can also add validate color to the field definition and it will show the color picker automatically having loaded the jscolor library in the admin.

                   <color_field>
                        <label>Color</label>
                        <frontend_type>text</frontend_type>
                        <validate>color</validate>
                        <sort_order>12</sort_order>
                        <show_in_default>1</show_in_default>
                        <show_in_website>1</show_in_website>
                        <show_in_store>1</show_in_store>
                    </color_field>

Upvotes: 0

Emil Stewart
Emil Stewart

Reputation: 488

Check out JSColor:

http://jscolor.com/

Its an open source and very easy to use Javascript library. All you have to do is import the library somewhere in your application, than you can simply create an input with the class "color". JSColor does the rest. I just used it in a recent Magento project, hopefully it will fit your needs as well.

UPDATE: To answer the poster's question a little more indepth, here is how I have implemented jscolor into my magento applications:

First make sure that you have pulled in JSColor's javascript file, I did this in my layout.xml for my module, you could do the same:

<layout version="0.1.0">
<default>
    <reference name="head">
        <action method="addJs">
            <script>jscolor/jscolor.js</script>
        </action>
    </reference>
</default>

Inside the html of your custom block, you can place your code for creating a jscolor input:

<input class="color {required:false, adjust:false, hash:true}">

Using JSColor is as easy as having a class assigned as color, plus any additional settings you want to set (see the jscolor docs).

Alternatively, if you are using a standard Magento admin panel form and you want to take advantage of premade Magento blocks, you could have your block extend Varien_Data_Form_Element_Text and do something like this:

$fieldset->addType('mycustomblock', 'Mycompany_Mymodule_Block_Adminhtml_Edit_Elements_Mycustomblock');

            $fieldset->addField(
            'mycustomblock',
            'mycustomblock',
            array(
                'label'     => Mage::helper('MyModule')->__($label),
                'required'  => true,
                'name'      => 'yourinputname',
                'class'     => 'color {required:false, adjust:false, hash:true}',
                'value'     => $value
            )
        );

Upvotes: 7

Related Questions