Skip to main content
added 1293 characters in body
Source Link
Mujahidh
  • 2.8k
  • 4
  • 38
  • 85

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

My form is looking like below. enter image description here

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

Source Link
Mujahidh
  • 2.8k
  • 4
  • 38
  • 85

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

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

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?