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

  • webkul.com/blog/… Check this Link – Rk Rathod Feb 28 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 at 11:23
  • dynamic ?? do you want to add multiple checkbox by a click or else?? – Ghulam.M Feb 28 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 at 13:51
1

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

  • that works I've also found another way which make more compact using checkboxset. up voted anyway. – Juliano Vargas Feb 28 at 14:56
  • @JulianoVargas could you please share that way for others. – i_ali55 Feb 28 at 15:03
  • @i_ali Done it! – Juliano Vargas Feb 28 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

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.