1

I want to add a dynamic form. I defined it in system.xml

<group id="config_first_default_dynamic_form" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
  <label>Quantity Ranges</label>
  <field id="config_default" translate="label" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Ranges</label>
    <frontend_model>Vendor\Module\Model\Config\FirstLabel</frontend_model>
    <backend_model>Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</backend_model>
  </field>
</group>

In FirstLabel.Php

/**
 * @return void
 */
public function _prepareToRender()
{
    $this->addColumn(
        'enabled_from',
        [
            'label' => __('Select date from'),
            'class' => 'required-entry',
            'renderer' => $this->getDateFromColumnRenderer(),
        ]
    );
    $this->addColumn(
        'background_color',
        [
            'label' => __('Select background color'),
            'class' => 'required-entry',
            'renderer' => $this->getColorBackgroundColumnRenderer(),
        ]
    );
    $this->addColumn('logo', ['label' => __('Logo'), 'size' => '100%', 'class' => 'required-entry']);
    $this->addColumn(
        'flag_show_selector',
        [
            'label' => __('Selected categories'),
            'class' => 'required-entry',
            'renderer' => $this->getCategoryColumnRenderer(),
        ]
    );

    $this->_addAfter = false;
    $this->_addButtonLabel = __('Add');
}

I have no problem with defining a selector or a multselect with categories:

protected function getCategoryColumnRenderer(): BlockInterface
{
    if (!$this->categoryRenderer) {
        $this->categoryRenderer = $this->getLayout()->createBlock(
            CategoryTable::class,
            ''
        );
    }
    return $this->categoryRenderer;
}

The problem appears when I want to add a color picker or datatime as a field or a field with an uploaded image. Anyone know how to add these fields to a dynamic form like in the picture below? Ultimately, the form is to have such fields and the datatime input or color picker is to be in them

1 Answer 1

0

Here is the code to add color picker:

Add below code inside _prepareToRender function

$this->addColumn(
'color_picker,
[
'label' => __('Color Picker'),
'renderer' => $this->getColorRenderer(),
]);

Add function getColorRenderer

private function getColorRenderer()
    {
        if (!$this->colorRenderer) {
            $this->colorRenderer = $this->getLayout()->createBlock(
                \Vendor\Module\Block\Adminhtml\Blocks\Edit\Tab\ColorRenderer::class,
                '',
                ['data' => ['is_render_to_js_template' => true]]
            );
        }
        return $this->colorRenderer;
}

Now add class ColorRenderer

<?php

namespace Vendor\Module\Block\Adminhtml\Blocks\Edit\Tab;

class ColorRenderer extends \Magento\Framework\View\Element\AbstractBlock
{
    protected function _toHtml()
    {
        $html = '<input type="text" name="' . $this->getInputName() . '" id="' . $this->getInputId() . '" ';
        $html .= '<script type="text/javascript">
                require(["jquery","jquery/colorpicker/js/colorpicker"], function ($) {
                    $(document).ready(function () {
                        var $el = $("#'.$this->getInputId().'");
                        // Attach the color picker
                        $el.ColorPicker({
                            onChange: function (hsb, hex, rgb) {
                                $el.css("backgroundColor", "#" + hex).val("#" + hex);
                            }
                        });
                    });
                });
                </script>';

        return $html;
    }
}

Now you should see color picker like below:

enter image description here

Your Answer

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

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