How to add color picker in widgets in magento 2.3

Question

i want to add color picker in widget

https://magento.stackexchange.com/a/190260/73525

This above link is working for system config

same thing i want in widget as field

Any one have idea about this

score 1 · Answer 1 · answered Nov 05 '21 at 12:11

Try this:

Add parameter to your widget:

    <parameter name="color" xsi:type="block" required="false" visible="true">
        <label translate="true">Color</label>
        <block class="Vendor\Module\Block\Widget\Color" />
    </parameter>

Create Block Class (z-index needs to be higher than modal)

    <?php
namespace Vendor\Module\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Color extends Template implements BlockInterface
{
    public function prepareElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $defaultColor = &quot;#8ec63f&quot;;
        $value = $element-&gt;getValue() ?: defaultColor;
        $element-&gt;setData('after_element_html', '
            &lt;input type=&quot;text&quot; 
                style=&quot;height: 55px; width: 55px;&quot;
                value=&quot;' . $value . '&quot; 
                id=&quot;' . $element-&gt;getHtmlId() . '&quot;
                name=&quot;' . $element-&gt;getName() . '&quot;
            &gt;
            &lt;script type=&quot;text/javascript&quot;&gt;
            require([&quot;jquery&quot;, &quot;jquery/colorpicker/js/colorpicker&quot;], function ($) {
                $currentElement = $(&quot;#' . $element-&gt;getHtmlId() . '&quot;);
                $currentElement.css(&quot;backgroundColor&quot;, &quot;'. $value .'&quot;);
                $currentElement.ColorPicker({
                    color: &quot;' . $value . '&quot;,
                    onChange: function (hsb, hex, rgb) {
                        $currentElement.css(&quot;backgroundColor&quot;, &quot;#&quot; + hex).val(&quot;#&quot; + hex);
                    }
                });
            });
            &lt;/script&gt;&lt;style&gt;.colorpicker {z-index: 10010}&lt;/style&gt;');
        $element-&gt;setValue(null);
        return $element;
    }
}

Add css to default.xml adminhtml (try without this step first, maybe you already have this css file)

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

score 0 · Answer 2 · answered Mar 23 '21 at 05:58

0

Do you check official documentation? https://devdocs.magento.com/guides/v2.4/ui_comp_guide/components/ui-colorpicker.html

answered Mar 23 '21 at 05:58

Bashev

69
6

those things are not clear how to implement in widget..! – prabhakaran7 Mar 23 '21 at 06:10

How to add color picker in widgets in magento 2.3

2 Answers2