How to Add Color Picker in Magento 2 Admin Configuration
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 🙂
Categories:
Uncategorized
View Comments
Comment or Ask a Question
Quick Links