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.<\/p>\n\n\n\n
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 .<\/p>\n\n\n\n
I’m assuming that the company name is Webkul and module name is MyColorPicker.<\/p>\n\n\n\n
First in your system config file located at :<\/p>\n\n\n\n
app\/code\/Webkul\/MyColorPicker\/etc\/adminhtml\/system.xml<\/p>\n\n\n\n
<?xml version="1.0"?>\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc\/system_file.xsd">\n <system>\n <tab id="webkul" translate="label" sortOrder="10">\n <label>Webkul<\/label>\n <\/tab>\n <section id="mycolorpicker" translate="label" type="text" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">\n <label>My Color Picker Demo<\/label>\n <!-- Assign section to tab -->\n <tab>webkul<\/tab>\n <resource>Webkul_MyColorPicker::config_facebookwallpost<\/resource>\n <!-- create group for fields in section -->\n <group id="parameter" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">\n\n <label>Colorpicker Settings<\/label>\n <field id="wall_color" translate="label comment" sortOrder="116" type="text" showInDefault="1" showInWebsite="1" showInStore="1">\n <label>Wall Color<\/label>\n <frontend_model>Webkul\\MyColorPicker\\Block\\ColorPicker<\/frontend_model>\n <\/field>\n <\/group>\n <\/section>\n <\/system>\n<\/config><\/pre>\n\n\n\nIn 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.<\/p>\n\n\n\n
Now create a layout file named “adminhtml_system_config_edit.xml” located in app\/code\/Webkul\/MyColorPicker\/view\/adminhtml\/layout\/<\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n <head>\n <css src=\"jquery\/colorpicker\/css\/colorpicker.css\"\/>\n <\/head>\n<\/page><\/pre>\n\n\n\nIn the above code, we’re adding css file for colorpicker.<\/p>\n\n\n\n
So now we will create this block class :<\/p>\n\n\n\n
<?php\n\nnamespace Webkul\\MyColorPicker\\Block;\n\nclass ColorPicker extends \\Magento\\Config\\Block\\System\\Config\\Form\\Field\n{\n \/**\n * Add color picker in admin configuration fields\n * @param \\Magento\\Framework\\Data\\Form\\Element\\AbstractElement $element\n * @return string script\n *\/\n protected function _getElementHtml(\\Magento\\Framework\\Data\\Form\\Element\\AbstractElement $element)\n {\n $html = $element->getElementHtml();\n $value = $element->getData('value');\n\n $html .= '<script type=\"text\/javascript\">\n require([\"jquery\",\"jquery\/colorpicker\/js\/colorpicker\"], function ($) {\n $(document).ready(function () {\n var thisElement = $(\"#' . $element->getHtmlId() . '\");\n thisElement.css(\"backgroundColor\", \"'. $value .'\");\n thisElement.ColorPicker({\n color: \"'. $value .'\",\n onChange: function (hsb, hex, rgb) {\n thisElement.css(\"backgroundColor\", \"#\" + hex).val(\"#\" + hex);\n }\n });\n });\n });\n <\/script>';\n return $html;\n }\n}<\/pre>\n\n\n\nIn 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 .<\/p>\n\n\n\n
That’s all for this article, try this it will work for sure and if you \u00a0have any issues please comment below.<\/p>\n\n\n\n
Thanks \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"