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

adminconfigurationmagento2

How to add color picker in magento 2.1.1 admin system config custom module general settings

color picker error

Best Answer

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>
Related Topic