How to Add Color Picker in Magento 2 System Configuration

img How to Add Color Picker in Magento 2 System Configuration

When it comes to building online E-commerce store, Magento is first pick of store owners due to its ability to mold Magento according to meet unique need of store owners. Sometimes you require to allow admin change the UI of frontend such as background color of pages, layout color etc. To implement this functionality, you need to add color picker in Magento 2 System configuration. So, today I’m sharing 3 steps guide to add Color Picker in Magento 2 System Configuration.

On the very first step, we need to add color picker to textbox through system.xml file located at
app\code\Vendor\Extension\etc\adminhtml

Background Color Vendor\Extension\Block\Color

<pre class="lang:default decode:true">
<config ...>
 <system>
     <section>
         <group id="my_color_group" ...>
             <field id="my_color_option" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Background Color</label>
                    <comment><![CDATA[Background color]]></comment>
                    <frontend_model>Vendor\Extension\Block\Color</frontend_model>
                    </field>
         </group>
     </section>
 </system>
</config>
</pre>

Once a code is added, now we have to create one Color.php file at below location under the hood of extension app\code\Vendor\Extension\Block

<pre class="lang:default decode:true">
<?php
namespace Vendor\Extension\Block;
 
class Color extends \Magento\Config\Block\System\Config\Form\Field {
 
 public function __construct(
    \Magento\Backend\Block\Template\Context $context, array $data = []
 ) {
        parent::__construct($context, $data);
 }
 
 protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element) {
     $html = $element->getElementHtml();
     $value = $element->getData('value');
 
     $html .= '<script type="text/javascript">
            require(["jquery","jquery/colorpicker/js/colorpicker"], function ($) {
                $(document).ready(function () {
                 var $el = $("#' . $element->getHtmlId() . '");
                    $el.css("backgroundColor", "'. $value .'");
 
                 // Attach the color picker
                    $el.ColorPicker({
                     color: "'. $value .'",
                        onChange: function (hsb, hex, rgb) {
                            $el.css("backgroundColor", "#" + hex).val("#" + hex);
                     }
                 });
             });
         });
         </script>';
     return $html;
 }
 
}
</pre>

At last, we need to implement JavaScript color picker library to adminhtml_system_config_edit.xml file available at app\code\Vendor\Extension\view\adminhtml\layout

<pre class="lang:default decode:true">
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
 <head>
     <css src="jquery/colorpicker/css/colorpicker.css"/>
     <link src="jquery/colorpicker/js/colorpicker.js"/>
 </head>
</page>
</pre>

Tadaa, now clear the cache and navigate to system configuration and you can see color picker option. You can even customize and use this code to place color picker anywhere in Magento.

Comment down below if you face any issue while implementing this code. And Yeah, don’t forget to hit below stars.
Happy Coloring!

Click to rate this post!

[Total: 10 Average: 4.4]

Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate 🎖️ Certified Magento Developer👨‍💻. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.🏏

Next How to Export Magento Sales Order Customer Data to Excel File Programmatically »

Previous « How to Set Tier Price Programmatically in Magento

View Comments

inrsaurabh says:

April 4, 2018 at 11:18 am

I applied color picker the way you suggested above and same is suggested on many places but the issues is some time it gives error in console and that time color picker wont work.

Do you know or suggest ho to overcome this.

https://magento.stackexchange.com/questions/220884/uncaught-typeerror-el-colorpicker-is-not-a-function-magento-2

Thank You.
inrsaurabh says:

May 12, 2018 at 10:57 am

I applied color picker the way you suggested above and same is suggested on many places but the issues is some time it gives error in console and that time color picker wont work.

Do you know or suggest ho to overcome this.

https://magento.stackexchange.com/questions/220884/uncaught-typeerror-el-colorpicker-is-not-a-function-magento-2

Thank You.