Magento 2 Admin Configuration – How to Add Color Picker

magento2

How can I add color picker in Magento admin configuration options?

Best Answer

Finally I sorted it out:

Create system.xml

<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>Webspeaks\Color\Block\Color</frontend_model> <!-- Our block for attaching color picker to text box -->
                </field>
            </group>
        </section>
    </system>
</config>

Create the block file:

<?php
namespace Webspeaks\Color\Block;

class Color extends \Magento\Config\Block\System\Config\Form\Field {

    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param Registry $coreRegistry
     * @param array $data
     */
    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;
    }

}

Add JavaScript color picker library:

<!-- File: app/code/Webspeaks/Color/view/adminhtml/layout/adminhtml_system_config_edit.xml -->

<?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>

Complete source code: http://www.webspeaks.in/2016/03/add-color-picker-in-magento-2-admin-configuration-options.html

Related Solutions

Magento 2 Custom Module – Implement a Color Picker

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 "jscolor".

Get jscolor.js from above site and add inside Vendor/Modulename/view/adminhtml/web/js/jscolor.js

define js in your module xml head tag or create default.xml file inside Vendor/Modulename/view/adminhtml/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>      
        <script src="Vendor_Modulename::js/jscolor.js"/>
    </head>
</page>

Now set color picker in input like below:

$fieldset->addField('title_color', 'text', array(
      'label'     => __('Title Color'),
      'class'  => 'jscolor {hash:true,refine:false}',
      'required'  => false,
      'name'      => 'title_color',
  ));

This is working fine in magento 2.

Magento – Magento 2.1.1 – How to add color picker in admin configuration options

Finally, I got the output, Need to do two changes,

1)In the Test\Color\Block\Color.php,

Add the path in require.js , require(["jquery","jquery/colorpicker/js/colorpicker"],

    namespace Test\Color\Block;
    class Color 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);
        }
         /**
         @param  \Magento\Framework\Data\Form\Element\AbstractElement $element
         Input  : add color picker in admin configuration fields
         Output : 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","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;
        }
    }

2) In the app/code/Test/Color/view/adminhtml/layout/adminhtml_system_config_edit.xml. Please do remove .js file.

    <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"/>
        </head>
    </page>

Best Answer

Related Solutions

Magento 2 Custom Module – Implement a Color Picker

Magento – Magento 2.1.1 – How to add color picker in admin configuration options

Related Topic