Magento 2 — How to add a Color picker inside the admin system config?

www.hellomage.com

I am creating a module set up to demonstrate this.

First, register the module by creating a registration.php file inside app/code/HelloMage/ColorPicker

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'HelloMage_ColorPicker',
__DIR__
);

Then place the module.xml inside app/code/HelloMage/ColorPicker/etc

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="HelloMage_ColorPicker" setup_version="1.0.0"/>
</config>

Like in the title, we are going to place the color picker inside this module system configuration. to do that, let's define the system.xml file inside app/code/HelloMage/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="hellomage" translate="label" sortOrder="500">
<label>HelloMage Extensions</label>
</tab>
<section id="color_picker" translate="label" type="text" sortOrder="400" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Color Picker</label>
<tab>hellomage</tab>
<resource>HelloMage_ColorPicker::config</resource>
<group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>General</label>
<field id="button_bg_color" translate="label" type="text" sortOrder="19" showInDefault="2" showInWebsite="1" showInStore="1">
<label>Button background color</label>
<frontend_model>HelloMage\ColorPicker\Model\Config\Source\ColorPicker</frontend_model></field>
</group>
</section>
</system>
</config>

Also, place the permission file acl.xml inside app/code/HelloMage/ColorPicker/etc/

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
<acl>
<resources>
<resource id="Magento_Backend::admin">
<resource id="Magento_Backend::stores">
<resource id="Magento_Backend::stores_settings">
<resource id="Magento_Config::config">
<resource id="HelloMage_ColorPicker::config" title="HelloMage Color Picker" sortOrder="100" />
</resource>
</resource>
</resource>
</resource>
</resources>
</acl>
</config>

Also, define a config.xml to keep the default system configuration value

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
<default>
<color_picker>
<general>
<button_bg_color>fb7c02</button_bg_color>
</general>
</color_picker>
</default>
</config>

As you can see, I have defined a text field called button_bg_color inside system.xml. If you notice, I have called a class inside <frontend_model>HelloMage\ColorPicker\Model\Config\Source\ColorPicker</frontend_model> tags. This is the class responsible to carry the color picker properties and convert that to HTML.

Let's pick any color-picker js

I decided to go with https://github.com/mrgrain/colpick

Now back to the module, and put everything to render color picker

Like I mentioned above, below is the class that renders the color picker properties for the system field.

<frontend_model>

HelloMage\ColorPicker\Model\Config\Source\ColorPicker

</frontend_model>

<?php

namespace HelloMage\ColorPicker\Model\Config\Source;

use Magento\Backend\Block\Template\Context;
use Magento\Config\Block\System\Config\Form\Field;
use Magento\Framework\Data\Form\Element\AbstractElement;

/**
* Class
ColorPicker
*
@package HelloMage\ColorPicker\Model\Config\Source
*/
class ColorPicker extends Field
{
/**
*
@param Context $context
*
@param array $data
*/
public function __construct(
Context $context,
array $data = []
) {
parent::__construct($context, $data);
}

/**
*
@param AbstractElement $element
*
@return string
*/
protected function _getElementHtml(AbstractElement $element)
{
$html = $element->getElementHtml();
$value = $element->getData('value');

$html .= '<script type="text/javascript">
require(["jquery","HelloMage_ColorPicker/js/colpick"], function ($) {
$(document).ready(function (e) { let element = $("#' . $element->getHtmlId() . '");
element.css("background-color","#' . $value . '");

element.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;
}
}

as you can see, the colpick JS has been called in the above code. so we have to place the JS file inside adminhtml. Place the colpick.js inside the below path.

app/code/HelloMage/ColorPicker/view/adminhtml/web/js/

to support the JS, we need the CSS too. that also we have to keep inside the adminhtml. Please the colpick.css inside the below path.

app/code/HelloMage/ColorPicker/view/adminhtml/web/css/

to apply this CSS inside adminhtml_system_config_edit, we have to keep the adminhtml_system_config_edit.xml layout.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="HelloMage_ColorPicker::css/colpick.css"/>
</head>
</page>

when we wrap up everything, the module structure becomes like below.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store