I need to add color picker on the admin panel of magento2.1. I have added the color picker for Magento-2.0x and it works well.

Could any one suggest me the idea for magento-2.1 ?


1 Answer 1


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
                            color: "'.$value.'",
                            onChange: function (hsb, hex, rgb) {
                                $el.css("backgroundColor", "#" + hex).val("#" + hex);

            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">
            <css src="jquery/colorpicker/css/colorpicker.css"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.