As an extension developer sometimes you have to give admin the permission to control the ui of particular pages, it can include colors too, like background color, font color etc. Magento 2 uses jQuery colorpicker for that. Today we will see how we can add colorpicker in system configuration fields.
I am assuming you already know how to create module in magento2, so I am going to tell you what changes you have to make in your system configuration field to add colorpicker in that .
I’m assuming that the company name is Webkul and module name is MyColorPicker.
First in your system config file located at :
app/code/Webkul/MyColorPicker/etc/adminhtml/system.xml
<?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="webkul" translate="label" sortOrder="10">
<label>Webkul</label>
</tab>
<section id="mycolorpicker" translate="label" type="text" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
<label>My Color Picker Demo</label>
<!-- Assign section to tab -->
<tab>webkul</tab>
<resource>Webkul_MyColorPicker::config_facebookwallpost</resource>
<!-- create group for fields in section -->
<group id="parameter" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Colorpicker Settings</label>
<field id="wall_color" translate="label comment" sortOrder="116" type="text" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Wall Color</label>
<frontend_model>Webkul\MyColorPicker\Block\ColorPicker</frontend_model>
</field>
</group>
</section>
</system>
</config>
In the above code I have created a field in system configuration that will allow you to choose any color using jquery colorpicker. In the code you can see the <frontend _model> it is required to add colorpicker in the field.
Now create a layout file named “adminhtml_system_config_edit.xml” located in app/code/Webkul/MyColorPicker/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>
In the above code, we’re adding css file for colorpicker.
So now we will create this block class :
<?php
namespace Webkul\MyColorPicker\Block;
class ColorPicker extends \Magento\Config\Block\System\Config\Form\Field
{
/**
* Add color picker in admin configuration fields
* @param \Magento\Framework\Data\Form\Element\AbstractElement $element
* @return string script
*/
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;
}
}
In the above script you can see that we have returned the javascript from the ‘_getElementHtml’ method and form field it will simply add colorpicker on the field on change event .
That’s all for this article, try this it will work for sure and if you have any issues please comment below.
Thanks 🙂
3 comments
You can add color picker on the frontend just like in the admin:
require([“jquery”,”jquery/colorpicker/js/colorpicker”], function($){$(“#element”).ColorPicker({color:”#000000″, onChange:function(hsb,hex,rgb) {$(“#element”).css(“backgroundColor”, “#”+hex).val(“#”+hex);}})});
add the above code and the color picker will be added to the element with id #element and you also need to add the color picker css too.
require([“jquery”, “jquery/colorpicker/js/colorpicker”], function ($) {