1

I am adding color picker in system configuration fields. My block class is at vendor/Module/Block/Color.php

<?php
namespace PME\SuccessPage\Block\Adminhtml\System\Config;

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

    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;
    }

}

I have added js libraries at: vendor/module/view/adminhtml/layout/adminhtml_system_config_edit.xml as

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

When I uncomment <frontend_model>vendor/module/Block/Color</frontend_model> in system.xml file save config button stops working!! My field in System.xml is:

<group id="design_section" translate="label" type="text" sortOrder="35" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Design Section</label>
                <field id="display" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Display Fields</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="link_color" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Background Color</label>
                    <comment><![CDATA[Background color]]></comment>
                    <frontend_model>vendor\module\Block\Color</frontend_model>
                    <depends>
                        <field id="display">1</field>
                    </depends>
                </field>
            </group>

This Save Config button does not work when i uncomment <frontend_model> tag in system.xml file

  • correction: adminhtml_system_config_edit.xml <?xml version="1.0" encoding="UTF-8"?> <page xmlns:xsi="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> – Ajwad Syed Jul 28 '18 at 1:11
  • correction: when form system.xml file I uncomment <frontend_model>vendor/module/Block/Color.php</frontend_model> in a field Save config button stops working – Ajwad Syed Jul 28 '18 at 1:14
  • might be this problem is due to js libraries added at vendor/module/view/adminhtml/layout/adminhtml_system_config_edit.xml – Ajwad Syed Jul 30 '18 at 21:52
  • My problem is solved by removing js library from vendor/module/view/adminhtml/layout/adminhtml_system_config_edit.xml – Ajwad Syed Aug 2 '18 at 18:48

Your Answer

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

Browse other questions tagged or ask your own question.