Magento 2 Color Picker in system configuration
This tutorial is about addingColor Picker in Magento 2 admin configuration. In this article I will show how to add jquery color picker in Magento 2 system configuration. You can use following step to use this jquery color picker on frontend too. Magento 2 have default lib/web/jquery/colorpicker/js/colorpicker library so you don’t have to add any external library for that. Below are the steps of how to do it:
Lets start with the Image to demonstrate you what it looks like:
Here my Module Namespace is QaisarSatti.
And my module name is: HelloWorld
Lets have have a look at different steps below:
1. Create system.xml at app/code/QaisarSatti/HelloWorld/etc/adminhtml/system.xml
All admin config options for your module will go in this file. For color picker we will create a text field as below. Just for your information i have not added complete code here for sake of readability.
<label>Background Color</label>
<frontend_model>QaisarSatti\HelloWorld\Block\ColorPicker</frontend_model> <!-- block for adding color picker on text box -->
</field>
2. Create the QaisarSatti\HelloWorld\Block\ColorPicker.php
This code will enable color picker options with the text box.
namespace QaisarSatti\HelloWorld\Block;
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 $currentelement = $("#' . $element->getHtmlId() . '");
$currentelement.css("backgroundColor", "'. $value .'"); //adding already selected value
// Attach the color picker
$currentelement.ColorPicker({
color: "'. $value .'",
onChange: function (hsb, hex, rgb) {
$el.css("backgroundColor", "#" + hex).val("#" + hex);
}
});
});
});
</script>';
return $html;
}
}
Now
3. Add the color picker JavaScript library.
Now finally we need to add color picker JavaScript library to admin config pages. Magento 2 by default is shipped with Color picker jQuery plugin. This plugin is present in lib/web/jquery/colorpicker/ folder.
Create the app/code/QaisarSatti/HelloWorld/view/adminhtml/layout/adminhtml_system_config_edit.xml. This layout file will be called on all admin configuration pages. We will add our color picker JavaScript and CSS to this layout.
<?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"/>
</head>
</page>
Now clear the cache and refresh the page. You will see the color picker enabled in config option.
That’s it from this tutorial. I strongly believe there is always room for improvement.So i am open for any suggestion and feed back. Please feel free to leave hat you are thinking in the comments section below. Cheers.
Qaisar Satti
Hi, I'm Qaisar Satti! I've been a developer for over 20 years, and now I love sharing what I've learned through tutorials and guides. Whether you're working with Magento, PrestaShop, or WooCommerce, my goal is to make your development journey a bit easier and more fun. When I'm not coding or writing, you can find me exploring new tech trends and hanging out with the amazing developer community. Thanks for stopping by, and happy coding!
