3

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

color picker error

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
                        $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>
  • This is verified in Magento 2.1.7. Thanks – CompactCode Aug 25 '17 at 14:28
0
  1. Create system.xml at app/code/Webspeaks/Color/etc/adminhtml/system.xml

All admin config options for your module will go in this file. For color picker we will create a text field as below. Note: I have not added complete code for sake of readability.

<!-- File: app/code/Webspeaks/Color/etc/adminhtml/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>
  1. Create the Webspeaks\Color\Block\Color.php

This block will enable color picker options with the text box.

<?php
#File: app/code/Webspeaks/Color/Block/Color.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"], 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;
    }

}
  1. Add the color picker JavaScript library

Now finally we need to add color picker JavaScript library to admin config pages. Magento 2 by default is shipped with Color picker jQuery plugin. This plugin is present in lib/web/jquery/colorpicker/ folder. Create the app/code/Webspeaks/Color/view/adminhtml/layout/adminhtml_system_config_edit.xml. This layout file will be called on all admin configuration pages. We will add our color picker JavaScript and CSS to this layout.

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

This is the code for it. And if you want reference then I got it from HERE.

  • It's not working for magento2.1 will work on magento2.0x – Vigna S Sep 23 '16 at 7:59
  • I done it in new magento and its works so I gave you solution. – Mayur Sep 23 '16 at 8:04
  • On Magento version 2.1? – Vigna S Sep 23 '16 at 8:06
  • Yes in Magento 2.1.1 – Mayur Sep 23 '16 at 8:08
  • Thank you for your answer its not working in Magento 2.1.0 and Magento 2.1.1 its working only upto magento 2.0.9 – paramuduraisamy Sep 23 '16 at 9:36
0

Follow below step

Create system.xml at Below Path

app/code/Emizentech/Newsletter/etc/adminhtml

<?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="emizentechnewsletter" translate="label" sortOrder="700">
        <label>Emizentech Newsletter Pop-up</label>
    </tab>
    <section id="emizentechnewsletter" translate="label" sortOrder="500" showInDefault="1" showInWebsite="1" showInStore="1">
        <class>separator-top</class>
        <label>Emizentech Newsletter Configuration</label>
        <tab>emizentechnewsletter</tab>
        <resource>Emizentech_Newsletter::config</resource>


        <group id="txt" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">


            <label>Emizentech</label>


            <field id="colorsample" translate="label" type="text" sortOrder="4" showInDefault="1" showInWebsite="0" showInStore="1">
                <label>Font color for newsletter popup</label>
                <comment><![CDATA[Text color]]></comment>
                <frontend_model>Emizentech\Newsletter\Block\Color</frontend_model> <!-- Our block for attaching color picker to text box -->
            </field>
        </group>


    </section>
</system>

</config>

Create Color.php File at below Path

<?php

namespace Emizentech\Newsletter\Block;
class Fontcolor 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 color picker CSS library:

Create adminhtml_system_config_edit.xml at Below Path

app/code/Emizentech/Newsletter/view/adminhtml/layout

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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