Welcome to Kishan Savaliya's Magento 2 Blog.In this blog post, I will show you how to add Color Picker in system.xml Configuration. If you don't know how to create system configuration then this post can be useful to you. Using this way you can provide admin user to access this settings and they can choose their UI controls, like suppose if you are developing an extension for menu and you want to provide setting in backend so store owner can change background and font color of menu based on their needs then you can create this in system configuration. So you can create color picker and they can choose color based on their requirements.
So let's start.. First of all, you need your custom module to add color picker in your system.xml configuration, so if you do not have any custom module and if you don't know how to start new module, follow this article.
If you have any module then go to you Magento 2 root directory and navigate inside your custom module and inside your module navigate to etc/adminhtml.
app/code/SK/ColorPickerSystemConfiguration/etc/adminhtml/system.xmlContent for this file is..
<?xml version="1.0"?>
<!--
/**
* @package SK\ColorPickerSystemConfiguration
* @author Kishan Savaliya <kishansavaliyakb@gmail.com>
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
<system>
<tab id="sk_color_picker" translate="label" sortOrder="15">
<label><![CDATA[Color Picker System Configuration]]></label>
</tab>
<section id="sk_configuration" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Color Picker System Configuration</label>
<tab>sk_color_picker</tab>
<resource>SK_ColorPickerSystemConfiguration::config</resource>
<!-- Color Picker System Configuration -->
<group id="colorpicker" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Color Picker System Configuration</label>
<field id="background_color" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Background Color</label>
<frontend_model>SK\ColorPickerSystemConfiguration\Block\Config\Source\ColorPicker</frontend_model>
<comment>sk_configuration/colorpicker/background_color</comment>
</field>
</group>
<!-- Color Picker System Configuration -->
</section>
</system>
</config>Now, We defined Frontend Model in Background Color field in above system.xml configuration file. So let's create that file here.
app/code/SK/ColorPickerSystemConfiguration/Block/Config/Source/ColorPicker.phpContent for this file is..
<?php
/**
* @package SK\ColorPickerSystemConfiguration
* @author Kishan Savaliya <kishansavaliyakb@gmail.com>
*/
namespace SK\ColorPickerSystemConfiguration\Block\Config\Source;
class ColorPicker extends \Magento\Config\Block\System\Config\Form\Field
{
protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $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;
}
}Now run below commands once in your terminal..
php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flushThat's it. Now you can open you Magento 2 Backend and check above new configuration here. Store > Settings > Configuration and find you tab and open that section.
Now in your configuration field you can choose color there and save setting and you can use this system configuration value in your storefront, If you want to know how to get system.xml configuration value in storefront then this article can be useful to you.
Magento will use below JS file so you don't need to add any library..
lib/web/jquery/colorpicker/js/colorpicker.jsHope you may like this article and can understand this easily. You can add comments below in case if you have any questions regarding this article or if I missed anything here. I will check and get back to you with proper solution.
If you enjoyed this blog post, share it with friends!
