Le’ts add a color picker to textbox through system.xml file located at
appcodeVendorExtensionetcadminhtml
<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>VendorExtensionBlockColor</frontend_model>
</field>
</group>
</section>
</system>
Now we have to create one Color.php file at below location under the hood of extension
appcodeVendorExtensionBlock
<?php
namespace VendorExtensionBlock;
class Color extends MagentoConfigBlockSystemConfigFormField {
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;
}
}
We need to implement JavaScript color picker library to adminhtml_system_config_edit.xml file available at appcodeVendorExtensionviewadminhtmllayout
<?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>
