Today we had a requirement on our Free Shipping Bar module to allow administrators / website owners to choose the background and text colour of the free shipping banner from Magento 2 admin panel configuration. This will allow them to select colour based on their website branding / colour scheme. It took us a while to crack this so we thought we should share with our Magento 2 developer.
Please see our step by step guide for getting colour picker as part of the Magento 2 custom admin form
Step 1 – Add the following code snippet in Scommerce\Shippingbar\Block\Adminhtml\Shippingbar\Edit\Tab\Design.php
$extraColor = $fieldset->addField(
'design_extra_color',
'text',
[
'name' => 'design_extra_color',
'label' => __('Extra Color'),
'title' => __('Extra Color'),
'required' => true
]
);
$value = $extraColor->getData('value');
$html = sprintf('<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20require(%5B%22jquery%22%2C%20%22jquery%2Fcolorpicker%2Fjs%2Fcolorpicker%22%5D%2C%20function%20(%24)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20%24el%20%3D%20%24(%22%23%25s%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24el.css(%22backgroundColor%22%2C%20%22%23%25s%22)%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Attach%20the%20color%20picker%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24el.ColorPicker(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%22%25s%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onChange%3A%20function%20(hsb%2C%20hex%2C%20rgb)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24el.css(%22backgroundColor%22%2C%20%22%23%22%20%2B%20hex).val(hex)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />', $extraColor->getHtmlId(), $value, $value);
$extraColor->setAfterElementHtml($html);
The important thing to note above is to add jquery color picker plugin with your input box with the help of setAfterElementHtml.
Step 2 – Create layout xml file app\code\Scommerce\Shippingbar\view\adminhtml\layout\shippingbar_index_edit.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\Layout\etc\page_configuration.xsd">
<head>
<css src="jquery\colorpicker\css\colorpicker.css"/>
</head>
</page>
The above class will show colour picker to your custom field of your Magento 2 module.
Hope this article helped you in some way. Please leave us your comment and let us know what do you think? Thanks.
