Magento 2 – Add Multiple Checkboxes in Admin UI Form Group Component

checkboxmagento2.2.2ui-form

How do I add dinamically add multiple checkbox bellow the a field

This is how you add one checkbox bellow a field

<fieldset name="field_set_name" sortOrder="100">
        <settings>
            <collapsible>true</collapsible>
            <label translate="true">Field Set Name</label>
        </settings>
        <container name="field_set_group" component="Magento_Ui/js/form/components/group" sortOrder="110">
            <argument name="data" xsi:type="array">
                <item name="type" xsi:type="string">group</item>
                <item name="config" xsi:type="array">
                    <item name="required" xsi:type="boolean">false</item>
                </item>
            </argument>
            <field name="1_field_name" sortOrder="10" formElement="input">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="source" xsi:type="string">source</item>
                    </item>
                </argument>
                <settings>
                    <label translate="true">1 Field Name</label>
                </settings>
            </field>
            <field name="2_field_name" component="Magento_Catalog/js/components/url-key-handle-changes" sortOrder="15" formElement="checkbox">
                <settings>
                    <dataType>boolean</dataType>
                </settings>
                <formElements>
                    <checkbox>
                        <settings>
                            <description translate="true">2 Field name</description>
                            <valueMap>
                                <map name="false" xsi:type="number">0</map>
                                <map name="true" xsi:type="number">1</map>
                            </valueMap>
                        </settings>
                    </checkbox>
                </formElements>
            </field>
        </container>
    </fieldset>

enter image description here

AND I need something like this:
enter image description here

Best Answer

Paste this Code in your ui-component

<fieldset name="custom_checkbox"class="Vendor\Module\Ui\Component\Form\CustomCheckbox">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">Custom Checkboxes</item>
        </item>
    </argument>
</fieldset>

Create a CustomCheckbox.php in

Vendor\Module\Ui\Component\Form\

<?php
namespace Vendor\Module\Ui\Component\Form;


use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentInterface;
use Magento\Ui\Component\Form\FieldFactory;
use Magento\Ui\Component\Form\Fieldset as BaseFieldset;

class CustomCheckbox extends BaseFieldset
{
    /**
     * @var FieldFactory
     */
    private $fieldFactory;

    public function __construct(
        ContextInterface $context,
        array $components = [],
        array $data = [],
        FieldFactory $fieldFactory)
    {
        parent::__construct($context, $components, $data);
        $this->fieldFactory = $fieldFactory;
    }

    /**
     * Get components
     *
     * @return UiComponentInterface[]
     * @throws \Magento\Framework\Exception\LocalizedException
     */
    public function getChildComponents()
    {
        // $stores = $this->getStoreData();
        $checkBoxes = [['value' => 1, 'label' => 'Checkbox 1'], ['value' => 2, 'label' => 'Checkbox 2'], ['value' => 3, 'label' => 'Checkbox 3']];

        foreach ($checkBoxes as $checkBox) {
            $storeName = $checkBox['label'];


            $fields[] =
                [
                    'label' => __('"' . $checkBox['label'] . '"'),
                    'formElement' => 'checkbox',
                    'value' => $checkBox['value'],
                ];
        }

        foreach ($fields as $k => $fieldConfig) {
            $fieldInstance = $this->fieldFactory->create();

            $name = $k;

            $fieldInstance->setData(
                [
                    'config' => $fieldConfig,
                    'name' => $name,
                ]
            );

            $fieldInstance->prepare();
            $this->addComponent($name, $fieldInstance);
        }

        return parent::getChildComponents();
    }
}

This code Worked for me fine :)

enter image description here

Related Topic