0

i want to add color picker in widget

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

This above link is working for system config

enter image description here

same thing i want in widget as field

Any one have idea about this

Improve this question

4 Answers 4

Reset to default
2

Here's a simple version.

<?php

namespace DnTukadiya\HyvaWidgets\Block\Widget\Field;

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 = "#D1D5DB";
        $value = $element->getValue() ?? $defaultColor;
        $element->setData('after_element_html', "
        <div style='display:flex;flex-direction:row;gap:10px;justify-content:start;align-items:center;'>
            <input type='text' value='{$value}' id='{$element->getHtmlId()}' name='{$element->getName()}' oninput='document.querySelector(\"#{$element->getHtmlId()}-color-picker\").value = this.value'>
            <input type='color' id='{$element->getHtmlId()}-color-picker'  oninput='document.querySelector(\"#{$element->getHtmlId()}\").value = this.value'>
        </div>
        ");
        $element->setValue(null);
        return $element;
    }
}

enter image description here

Improve this answer
1

Try this:

  1. 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>
  1. 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 = "#8ec63f";
            $value = $element->getValue() ?: defaultColor;
            $element->setData('after_element_html', '
                <input type="text" 
                    style="height: 55px; width: 55px;"
                    value="' . $value . '" 
                    id="' . $element->getHtmlId() . '"
                    name="' . $element->getName() . '"
                >
                <script type="text/javascript">
                require(["jquery", "jquery/colorpicker/js/colorpicker"], function ($) {
                    $currentElement = $("#' . $element->getHtmlId() . '");
                    $currentElement.css("backgroundColor", "'. $value .'");
                    $currentElement.ColorPicker({
                        color: "' . $value . '",
                        onChange: function (hsb, hex, rgb) {
                            $currentElement.css("backgroundColor", "#" + hex).val("#" + hex);
                        }
                    });
                });
                </script><style>.colorpicker {z-index: 10010}</style>');
            $element->setValue(null);
            return $element;
        }
    }
  1. 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>

enter image description here

Improve this answer
0

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

Improve this answer
1
  • those things are not clear how to implement in widget..!
    – prabhakaran7
    Commented Mar 23, 2021 at 6:10
0

we need to add this code for the color picker

<div>
        <input type="color" id="head" name="head" value="#46E265" />
        <label for="head">choose color</label>
    </div>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.