TransWikia.com

Magento 2 - How to add color picker in admin configuration options?

Magento Asked by Arvind07 on March 1, 2021

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

4 Answers

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

Create the block file:

<?php
namespace WebspeaksColorBlock;

class Color extends MagentoConfigBlockSystemConfigFormField {

    /**
     * @param MagentoBackendBlockTemplateContext $context
     * @param Registry $coreRegistry
     * @param array $data
     */
    public function __construct(
    MagentoBackendBlockTemplateContext $context, array $data = []
    ) {
        parent::__construct($context, $data);
    }

    protected function _getElementHtml(MagentoFrameworkDataFormElementAbstractElement $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

Correct answer by Arvind07 on March 1, 2021

code/Vendor/Module/Block/Adminhtml/ColorPicker.php

<?php

namespace VendorModuleBlockAdminhtml;

use MagentoConfigBlockSystemConfigFormField;

class ColorPicker extends Field
{
    /**
     * add color picker in admin configuration fields
     * @param  MagentoFrameworkDataFormElementAbstractElement $element
     * @return string script
     */
    protected function _getElementHtml(MagentoFrameworkDataFormElementAbstractElement $element)
    {
        $html = $element->getElementHtml();
        $value = $element->getData('value');

        $html .= '<script type="text/javascript">
            require(["jquery"], function ($) {
                $(document).ready(function (e) {
                    $("#' . $element->getHtmlId() . '").css("background-color","#' . $value . '");
                    $("#' . $element->getHtmlId() . '").colpick({
                        layout:"hex",
                        submit:0,
                        colorScheme:"dark",
                        color: "#' . $value . '",
                        onChange:function(hsb,hex,rgb,el,bySetColor) {
                        $(el).css("background-color","#"+hex);
                        if(!bySetColor) $(el).val(hex);
                    }
                    }).keyup(function(){
                        $(this).colpickSetColor(this.value);
                    });
                });
            });
            </script>';

        return $html;
    }
}

code/Vendor/Module/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="vendor" translate="label" sortOrder="250" >
            <label>Vendor</label>
        </tab>
        <section id="Color" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Color</label>
            <tab>vendor</tab>
            <group id="design" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Color</label>
                <field id="color" translate="label" sortOrder="20" type="text" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Color</label>
                    <frontend_model>VendorModuleBlockAdminhtmlColorPicker</frontend_model>
                </field>
            </group>
        </section>
    </system>
</config>

Answered by Ashraf Hatia on March 1, 2021

Tested in Magento version 2.2.4 and 2.2.5 ... 2.3.2

I don't know about all but in above Magento versions from the admin, if we go to the Store->Configuration and then check the View page source we can see below js

adminhtml/Magento/backend/en_US/Dotdigitalgroup_Email/js/node_modules/colpick/colpick.js

If you open the js you will know it's a color picker js. So why not use the color picker js which is already loading on the page. No need to add any external JS or CSS.

My solution is as below.

Replace [Vendor] with your Namespace and [Module] with your Modulename.

[Vendor]/[Module]/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="[vendor]" sortOrder="297">
            <label>[Vendor]</label>
        </tab>
        <section id="[vendor]_[module]" type="text" sortOrder="100" showInDefault="1" showInWebsite="0" showInStore="0">
            <class>separator-top</class>
            <tab>[vendor]</tab>
            <label>[Your Label]</label>
            <resource>[Vendor]_[Module]::core_config</resource>
            <group id="[your-group-id]" translate="label" type="text" sortOrder="250" showInDefault="1">
                <field id="[your-field-id]" translate="label" type="text" sortOrder="1" showInDefault="1">
                    <label>Choose Color</label>
                    <frontend_model>[Vendor][Module]BlockColorPicker</frontend_model>
                </field>
            </group>
        </section>
    </system>
</config>

For the color picker, all you need is add a field

<field id="[your-field-id]" translate="label" type="text" sortOrder="1" showInDefault="1">
     <label>Choose Color</label>
     <frontend_model>[Vendor][Module]BlockColorPicker</frontend_model>           
</field>

Create [Vendor]/[Module]/Block/ColorPicker.php

<?php

namespace [Vendor][Module]Block;

class ColorPicker extends MagentoConfigBlockSystemConfigFormField
{
    /**
     * @param MagentoBackendBlockTemplateContext $context
     * @param array $data
     */
    public function __construct(
    MagentoBackendBlockTemplateContext $context,
    array $data = []
    ) 
    {
        parent::__construct($context, $data);
    }

    /**
     * add color picker in admin configuration fields
     * @param  MagentoFrameworkDataFormElementAbstractElement $element
     * @return string script
     */
    protected function _getElementHtml(MagentoFrameworkDataFormElementAbstractElement $element)
    {
        $html = $element->getElementHtml();
        $value = $element->getData('value');

        $html .= '<script type="text/javascript">
            require(["jquery"], function ($) {
                $(document).ready(function (e) {
                    $("#'.$element->getHtmlId().'").css("background-color","#'.$value.'");
                    $("#'.$element->getHtmlId().'").colpick({
                        layout:"hex",
                        submit:0,
                        colorScheme:"dark",
                        color: "#'.$value.'",
                        onChange:function(hsb,hex,rgb,el,bySetColor) {
                        $(el).css("background-color","#"+hex);
                        if(!bySetColor) $(el).val(hex);
                    }
                    }).keyup(function(){
                        $(this).colpickSetColor(this.value);
                    });
                });
            });
            </script>';

        return $html;
    }
}

That's it. It solved my problem. So if that js is loading on the page It should definitely work. It is working for me.

Answered by Klaus Mikaelson on March 1, 2021

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>EmizentechNewsletterBlockColor</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 EmizentechNewsletterBlock;
class Fontcolor extends MagentoConfigBlockSystemConfigFormField {

/**
 * @param MagentoBackendBlockTemplateContext $context
 * @param Registry $coreRegistry
 * @param array $data
 */
public function __construct(
    MagentoBackendBlockTemplateContext $context, array $data = []
) {
    parent::__construct($context, $data);
}

protected function _getElementHtml(MagentoFrameworkDataFormElementAbstractElement $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>

Answered by Emizen Tech on March 1, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP