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 – Rk Rathod Feb 28 '19 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? – Juliano Vargas Feb 28 '19 at 11:23
  • dynamic ?? do you want to add multiple checkbox by a click or else?? – Ghulam.M Feb 28 '19 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']] – Juliano Vargas Feb 28 '19 at 13:51
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. – Juliano Vargas Feb 28 '19 at 14:56
  • @JulianoVargas could you please share that way for others. – sudo55 Feb 28 '19 at 15:03
  • @i_ali Done it! – Juliano Vargas Feb 28 '19 at 15:05
-1

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? – Varun Jyothi Jun 14 '19 at 18:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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