I need to add color picker on the admin panel of magento2.1. I have added the color picker for Magento-2.0x and it works well.
Could any one suggest me the idea for magento-2.1 ?
-
magento.stackexchange.com/questions/40903/… works?– JacksonCommented Sep 23, 2016 at 6:07
-
let me check it– Vigna SCommented Sep 23, 2016 at 6:08
-
No it didn't help me– Vigna SCommented Sep 23, 2016 at 6:28
-
This will work for you magento.stackexchange.com/questions/91316/… or webkul.com/blog/add-color-picker-magento2-system-config– JacksonCommented Sep 23, 2016 at 6:30
-
No, it's not working, those all work for Magento2.0x and not for magento2.1– Vigna SCommented Sep 23, 2016 at 8:01
|
Show 1 more comment
1 Answer
Finally, I got the output, Need to do two changes,
1)In the Test\Color\Block\Color.php,
Add the path in require.js , require(["jquery","jquery/colorpicker/js/colorpicker"],
namespace Test\Color\Block;
class Color extends \Magento\Config\Block\System\Config\Form\Field
{
/**
* @param \Magento\Backend\Block\Template\Context $context
* @param array $data
*/
public function __construct(
\Magento\Backend\Block\Template\Context $context, array $data = []
)
{
parent::__construct($context, $data);
}
/**
@param \Magento\Framework\Data\Form\Element\AbstractElement $element
Input : add color picker in admin configuration fields
Output : 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 $el = $("#'.$element->getHtmlId().'");
$el.css("backgroundColor", "'.$value.'");
// Attach the color picker
$el.ColorPicker({
color: "'.$value.'",
onChange: function (hsb, hex, rgb) {
$el.css("backgroundColor", "#" + hex).val("#" + hex);
}
});
});
});
</script>';
return $html;
}
}
2) In the app/code/Test/Color/view/adminhtml/layout/adminhtml_system_config_edit.xml. Please do remove .js file.
<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>