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 ScommerceShippingbarBlockAdminhtmlShippingbarEditTabDesign.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 appcodeScommerceShippingbarviewadminhtmllayoutshippingbar_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:ViewLayoutetcpage_configuration.xsd"> <head> <css src="jquerycolorpickercsscolorpicker.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.
