How To Add Color Picker In Magento2 System Config

As an extension developer sometimes you have to give admin the permission to control the ui of particular pages, it can include colors too , like background color, font color etc .Magento 2 uses jQuery colorpicker for that .Today we will see how we can add colorpicker in system configuration fields.

I am assuming you already know how to create module in magento2, so I am  going to tell you what changes you have to make in your system configuration field to add colorpicker in that .

I am assuming that the company name is Webkul and module name is MyColorPicker .

First in your system config file located at :

app/code/Webkul/MyColorPicker/etc/adminhtml/system.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="webkul" translate="label" sortOrder="10">
            <label>Webkul</label>
        </tab>
        <section id="mycolorpicker" translate="label" type="text" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>My Coloer Picker Demo</label>
            <!-- Assign section to tab -->
            <tab>webkul</tab>
            <resource>Webkul_MyColorPicker::config_facebookwallpost</resource>
            <!-- create group for fields in section -->
           <group id="parameter" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">

                <label>Colorpicker Settings</label>
                <field id="wall_color" translate="label comment"  sortOrder="116" type="text" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Wall Color</label>
                    <frontend_model>Webkul\MyColorPicker\Block\ColorPicker</frontend_model>
                </field>
            </group>
        </section>
    </system>
</config>

In the above code I have created a field in system configuration that will allow you to choose any color using jquery colorpicker .In the code you can see the <frontend _model> it is required to add colorpicker in the field.

So now we will create this block class :

Webkul\MyColorPicker\Block\ColorPicker

<?php
namespace Webkul\MyColorPicker\Block;

class ColorPicker extends \Magento\Config\Block\System\Config\Form\Field
{
    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param array                                   $data
     */
    public function __construct(
    \Magento\Backend\Block\Template\Context $context, array $data = []
    ) 
    {
        parent::__construct($context, $data);
    }

    /**
     * add color picker in admin configuration fields
     * @param  \Magento\Framework\Data\Form\Element\AbstractElement $element
     * @return string script
     */
    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $html = $element->getElementHtml();
        $value = $element->getData('value');

        $html .= '<script type="text/javascript">
            require(["jquery"], 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;
    }
}

In the above script you can see that we have returned the javascript from the ‘_ElementHtml’ method and form field it will simply add colorpicker on the field on change event .

That’s all for this article ,try this it will work for sure and if you  have any issues please comment below.

Thanks