In this article, We will learn about Add Color Picker in Magento 2 Admin configuration using the system.xml file. Which one admin can select the value from the color picker to show dynamic color.
Step-1: Create adminhtml_system_config_edit.xml at app/code/Vendor/ColorPicker/view/adminhtml/layout
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="jquery/colorpicker/css/colorpicker.css"/>
</head>
</page>
Step-2: Create system.xml at app/code/Vendor/ColorPicker/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="Vendor" sortOrder="10">
<label>Vendor</label>
</tab>
<section id="colorpicker" translate="label" type="text" sortOrder="310" showInDefault="1" showInWebsite="0" showInStore="0">
<label>Colorpicker</label>
<tab>Vendor</tab>
<resource>Webkul_Colorpicker::configuration</resource>
<group id="colorpickerSetting" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
<label>ColorPicker Settings</label>
<field id="theme_color" translate="label" sortOrder="8" type="text" showInDefault="1" showInWebsite="0" showInStore="0">
<label>Theme Color</label>
<validate>required-entry</validate>
<frontend_model>Vendor\Colorpicker\Block\Colorpicker</frontend_model>
</field>
</group>
</section>
</system>
</config>
Step-3: Create Colorpicker.php at app/code/Vendor/ColorPicker/Block
<?php
namespace Vendor\Colorpicker\Block;
class Colorpicker extends \Magento\Config\Block\System\Config\Form\Field
{
/**
* [_getElementHtml used to get color from color picker]
*
* @param \Magento\Framework\Data\Form\Element\AbstractElement $element
* @return string
*/
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 thisElement = $("#' . $element->getHtmlId() . '");
thisElement.css("backgroundColor", "'. $value .'");
thisElement.ColorPicker({
color: "'. $value .'",
onChange: function (hsb, hex, rgb) {
thisElement.css("backgroundColor", "#" + hex).val("#" + hex);
}
});
});
});
</script>';
return $html;
}
}
Hope this will help you.
Thanks 🙂
Be the first to comment.