How To add renderer to magento admin form field in magento 2

Question

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.

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

Answer 1

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!