1

I have one field in my custom admin form.I want to add a color picker to the field. Below is my code lines in main.php file.

$fieldset->addField(
        'state',
        'select',
        [
            'label' => __('State'),
            'title' => __('State'),
            'name' => 'state',
            'options' => \Ayakil\OrganizationClub\Block\Adminhtml\Organizationclub\Grid::getOptionArray6(),
            //'options' => $optionsc,
            'disabled' => $isElementDisabled
        ]
    );

$field = $fieldset->addField(
        'club_color',
        'text',
        [
            'name' => 'club_color',
            'label' => __('Color'),
            'title' => __('Color')
        ]
    );
    $renderer = $this->getLayout()->createBlock('Ayakil\OrganizationClub\Block\Adminhtml\Color');
    $field->setRenderer($renderer);

color.php file

<?php
namespace Ayakil\OrganizationClub\Block\Adminhtml;
class Color extends \Magento\Config\Block\System\Config\Form\Field {
public function __construct(
    \Magento\Backend\Block\Template\Context $context, array $data = []
) {
    parent::__construct($context, $data);
}

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;
}
}

My form is looking like below. enter image description here

How can i align the color field like state without using css.is there any ways to achieve it?

2

You can add Renderer in your Form.php file like this.

$fieldset->addType(
    'club_color',
    'Vendor\Module\Block\Adminhtml\Renderer\Color'
);

$field = $fieldset->addField(
    'club_color',
    'club_color',
    [
        'name' => 'club_color',
        'label' => __('Color'),
        'title' => __('Color')
    ]
);

And now you need to create your renderer file here in your module.

app/code/Vendor/Module/Block/Adminhtml/Renderer/Color.php

Content for this file is..

<?php
namespace Vendor\Module\Block\Adminhtml\Renderer;

class Color extends \Magento\Framework\Data\Form\Element\AbstractElement
{
    public function getElementHtml()
    {
        $html = parent::getElementHtml();
        $value = $this->getValue();
        $html .= '<script type="text/javascript">
        require(["jquery","jquery/colorpicker/js/colorpicker"], function ($) {
            $(document).ready(function () {
                var $el = $("#' . $this->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;
    }
}
?>

Hope this will help you!

  • 1
    THANK YOU, ITS WORKED FOR ME – Mujahidh Nov 6 at 14:08
  • 1
    You're welcome Buddy 😊👍 – Kishan Savaliya Nov 6 at 14:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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