2

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

4
  • webkul.com/blog/… Check this Link Feb 28, 2019 at 11:04
  • @RonakRathod Thanks I understand this explain how to use select like product in category field I would like to display just an array of checkbox bellow the field? Feb 28, 2019 at 11:23
  • dynamic ?? do you want to add multiple checkbox by a click or else??
    – Ghulam.M
    Feb 28, 2019 at 13:24
  • @GeeEmm dynamic yes just display them from array like:[['value' => 1, 'label' => 'Checkbox 1'], ['value' => 2, 'label' => 'Checkbox 2'], ['value' => 3, 'label' => 'Checkbox 3']] Feb 28, 2019 at 13:51

2 Answers 2

3

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

3
  • that works I've also found another way which make more compact using checkboxset. up voted anyway. Feb 28, 2019 at 14:56
  • @JulianoVargas could you please share that way for others.
    – sudo55
    Feb 28, 2019 at 15:03
  • @i_ali Done it! Feb 28, 2019 at 15:05
0

Another solution that I found was the bellow:

<field name="customCheckBoxField">
            <argument name="data" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Checkboxes</item>
                <item name="options" xsi:type="object">Vendor\Module\Model\Config\Checkbox</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Custom Label</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">checkboxset</item>
                    <item name="source" xsi:type="string">module</item>
                    <item name="multiple" xsi:type="boolean">true</item>
                    <item name="dataScope" xsi:type="string">customCheckBoxField</item>
                </item>
            </argument>
        </field>

Then in Vendor\Module\Model\Config\Checkbox

 ...
 public function toOptionArray()
    {
        return [['value' => 1, 'label' => __('field 1')], 
                ['value' => 2, 'label' => __('field 2')], 
                ['value' => 3, 'label' => __('field 3')]
               ];
    }
 ...

This is a screen shot is a combination from Gee Emm and my Answer: enter image description here

1
  • While editing the entry, how can we show the checked checkboxes? Jun 14, 2019 at 18:38

Your Answer

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

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