1

I want to add dynamic rows with a dropdown field.how to add into the catalog product insert area thanks in a advance.

enter image description here

6
  • what you want ? your question is not clear. from where you want to add these rows? and where you want to show them ? give complete information. Sep 30, 2018 at 19:50
  • Hello@HassanAliShahzad I want this fields into the backend catalog -> product new section Oct 1, 2018 at 5:06
  • You mean you want one drop-down in Admin section. Can you let me know the Label and values you want to add for this section? Also Is this field required ? Oct 1, 2018 at 5:15
  • Hurry up man ..... Oct 1, 2018 at 5:21
  • Please see question,.i want this dynamic rows component Oct 1, 2018 at 6:45

2 Answers 2

2

Here is how dynamic rows can be added by DataProvider.

Add DataProvider class as:

etc\adminhtml\di.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool">
    <arguments>
        <argument name="modifiers" xsi:type="array">
            <item name="customTab" xsi:type="array">
                <item name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Product\Form\Modifier\NewField</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>
    </arguments>
</virtualType>

And add DataProvider at:

Vendor\Module\Ui\DataProvider\Product\Form\Modifier:

namespace Vendor\Module\Ui\DataProvider\Product\Form\Modifier;
use Magento\Catalog\Model\Locator\LocatorInterface;
use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
use Magento\Ui\Component\Form\Fieldset;
use Magento\Ui\Component\Form\Field;
use Magento\Ui\Component\Form\Element\Input;
use Magento\Ui\Component\DynamicRows;
use Magento\Ui\Component\Container;
use Magento\Ui\Component\Form\Element\ActionDelete;
use Magento\Ui\Component\Form\Element\Select;
use Magento\Ui\Component\Form\Element\DataType\Text;
class NewField extends AbstractModifier
{
const FIELD_IS_DELETE = 'is_delete';
const FIELD_SORT_ORDER_NAME = 'sort_order';
const FIELD_NAME_SELECT = 'select_field';

private $locator;
public function __construct(
    LocatorInterface $locator
) {
    $this->locator = $locator;
}
public function modifyData(array $data)
{
    return $data;
}
public function modifyMeta(array $meta)
{
     $meta = array_replace_recursive(
        $meta,
        [
            'custom_fieldset' => [
                'arguments' => [
                    'data' => [
                        'config' => [
                            'label' => __('Custom Group'),
                            'componentType' => Fieldset::NAME,
                            'dataScope' => 'data.product.custom_fieldset',
                            'collapsible' => true,
                            'sortOrder' => 5,
                        ],
                    ],
                ],
                'children' => [
    "custom_field" => $this->getSelectTypeGridConfig(10)
],
            ]
        ]
    );
    return $meta;
}
protected function getSelectTypeGridConfig($sortOrder) {
return [
    'arguments' => [
        'data' => [
            'config' => [
                'addButtonLabel' => __('Add Value'),
                'componentType' => DynamicRows::NAME,
                'component' => 'Magento_Ui/js/dynamic-rows/dynamic-rows',
                'additionalClasses' => 'admin__field-wide',
                'deleteProperty' => static::FIELD_IS_DELETE,
                'deleteValue' => '1',
                'renderDefaultRecord' => false,
                'sortOrder' => $sortOrder,
            ],
        ],
    ],
    'children' => [
        'record' => [
            'arguments' => [
                'data' => [
                    'config' => [
                        'componentType' => Container::NAME,
                        'component' => 'Magento_Ui/js/dynamic-rows/record',
                        'positionProvider' => static::FIELD_SORT_ORDER_NAME,
                        'isTemplate' => true,
                        'is_collection' => true,
                    ],
                ],
            ],
            'children' => [
                static::FIELD_NAME_SELECT => $this->getSelectFieldConfig(1),
                static::FIELD_IS_DELETE => $this->getIsDeleteFieldConfig(3)
                //Add as many fields as you want

            ]
        ]
    ]
];
}
protected function getSelectFieldConfig($sortOrder)
{
    return [
        'arguments' => [
            'data' => [
                'config' => [
                    'label' => __('Options Select'),
                    'componentType' => Field::NAME,
                    'formElement' => Select::NAME,
                    'component' => 'Magento_Catalog/js/custom-options-type',
                    'elementTmpl' => 'ui/grid/filters/elements/ui-select',
                    // 'selectType' => 'optgroup',
                    'dataScope' => static::FIELD_NAME_SELECT,
                    'dataType' => Text::NAME,
                    'sortOrder' => $sortOrder,
                    'options' => $this->_getOptions(),
                    'visible' => true,
                    'disabled' => false,
                ],
            ],
        ],
    ];
}
protected function _getOptions()
{
    $options = [
        1 => [
            'label' => __('Option 1'),
            'value' => 1
        ],
        2 => [
            'label' => __('Option 2'),
            'value' => 2
        ],
        3 => [
            'label' => __('Option 3'),
            'value' => 3
        ],
    ];

    return $options;
}
protected function getIsDeleteFieldConfig($sortOrder)
{
    return [
        'arguments' => [
            'data' => [
                'config' => [
                    'componentType' => ActionDelete::NAME,
                    'fit' => true,
                    'sortOrder' => $sortOrder
                ],
            ],
        ],
    ];
}
}
1
2

In the ui_component admin form take a dynamic rows container.Please refer the following code:

<container name="dynamic_rows_container">
      <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
          <item name="component" xsi:type="string">Magento_Ui/js/dynamic-rows/dynamic-rows</item>
          <item name="template" xsi:type="string">ui/dynamic-rows/templates/default</item>
          <item name="componentType" xsi:type="string">dynamicRows</item>
          <item name="label" xsi:type="string" translate="true">Dynamic Rows</item>
          <item name="recordTemplate" xsi:type="string">record</item>
          <item name="addButtonLabel" xsi:type="string">Add Row</item>
          <item name="deleteProperty" xsi:type="boolean">false</item>
        </item>
      </argument>

      <container name="record">
        <argument name="data" xsi:type="array">
          <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Dynamic Rows</item>
            <item name="component" xsi:type="string" translate="true">Magento_Ui/js/dynamic-rows/record</item>
            <item name="isTemplate" xsi:type="boolean">true</item>
            <item name="is_collection" xsi:type="boolean">true</item>
            <item name="showFallbackReset" xsi:type="boolean">false</item>
          </item>
        </argument>

        <field name="row_id">
          <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
              <item name="label" xsi:type="string" translate="true">ID</item>
              <item name="visible" xsi:type="boolean">false</item>
              <item name="dataType" xsi:type="string">text</item>
              <item name="formElement" xsi:type="string">input</item>
              <item name="dataScope" xsi:type="string">row_id</item>
            </item>
          </argument>
        </field>

        <field name="option_label">
          <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
              <item name="dataType" xsi:type="string">text</item>
              <item name="label" xsi:type="string" translate="true">Option Label</item>
              <item name="formElement" xsi:type="string">input</item>
              <item name="dataScope" xsi:type="string">option_label</item>
              <item name="showFallbackReset" xsi:type="boolean">false</item>
              <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
              </item>
              <item name="sortOrder" xsi:type="string">10</item>
            </item>
          </argument>
        </field>

        <field name="option_value">
          <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
              <item name="dataType" xsi:type="string">text</item>
              <item name="label" xsi:type="string" translate="true">Option Value</item>
              <item name="formElement" xsi:type="string">input</item>
              <item name="dataScope" xsi:type="string">option_value</item>
              <item name="showFallbackReset" xsi:type="boolean">false</item>
              <item name="additionalClasses" xsi:type="array">
                <item name="cirklestudio_color_picker" xsi:type="boolean">true</item>
              </item>
              <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
              </item>
              <item name="sortOrder" xsi:type="string">20</item>
            </item>
          </argument>
        </field>

        <field name="option_price">
          <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
              <item name="dataType" xsi:type="string">text</item>
              <item name="label" xsi:type="string" translate="true">Option Price</item>
              <item name="formElement" xsi:type="string">input</item><item name="dataScope" xsi:type="string">option_price</item>
              <item name="showFallbackReset" xsi:type="boolean">false</item>
              <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
              </item>
              <item name="sortOrder" xsi:type="string">30</item>
            </item>
          </argument>
        </field>

        <field name="option_class_id">
          <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
              <item name="dataType" xsi:type="string">text</item>
              <item name="label" xsi:type="string" translate="true">SVG Element Id</item>
              <item name="formElement" xsi:type="string">input</item>
              <item name="dataScope" xsi:type="string">option_class_id</item>
              <item name="showFallbackReset" xsi:type="boolean">false</item>
              <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
              </item>
              <item name="sortOrder" xsi:type="string">40</item>
            </item>
          </argument>
        </field>

        <field name="logo">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="source" xsi:type="string">customproduct</item>
                    <item name="label" xsi:type="string" translate="true">Image</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="formElement" xsi:type="string">imageUploader</item>
                    <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                    <item name="previewTmpl" xsi:type="string">Zarathemes_Customproduct/image-preview</item>
                    <item name="required" xsi:type="boolean">false</item>
                    <item name="uploaderConfig" xsi:type="array">
                        <item name="url" xsi:type="url" path="customproduct/index/upload"/>
                    </item>
                </item>
            </argument>
        </field>

      <!--<field name="option_img">
          <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
              <item name="dataType" xsi:type="string">text</item>
              <item name="label" xsi:type="string" translate="true">Image</item>
              <item name="formElement" xsi:type="string">file</item>
              <item name="dataScope" xsi:type="string">option_img</item>
              <item name="showFallbackReset" xsi:type="boolean">false</item>
              <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">false</item>
              </item>
              <item name="sortOrder" xsi:type="string">50</item>
            </item>
          </argument>
        </field>

        <field name="option_img_del">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="number">60</item>
                    <item name="label" xsi:type="string">Delete image</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">checkbox</item>
                    <item name="valueMap" xsi:type="array">
                        <item name="true" xsi:type="number">1</item>
                        <item name="false" xsi:type="number">0</item>
                    </item>
                    <item name="source" xsi:type="string">option_img_del</item>
                </item>
            </argument>
        </field> -->

           <actionDelete>
            <argument name="data" xsi:type="array">
              <item name="config" xsi:type="array">
                <item name="componentType" xsi:type="string">actionDelete</item>

                       <item name="dataType" xsi:type="string">text</item>

                       <item name="fit" xsi:type="boolean">false</item>

                       <item name="label" xsi:type="string">Actions</item>

                       <item name="additionalClasses" xsi:type="string">data-grid-actions-cell</item>

                       <item name="template" xsi:type="string">Magento_Backend/dynamic-rows/cells/action-delete</item>

                   </item>

               </argument>

           </actionDelete>

           <field name="position">

               <argument name="data" xsi:type="array">

                   <item name="config" xsi:type="array">

                       <item name="dataType" xsi:type="string">number</item>

                       <item name="formElement" xsi:type="string">input</item>

                       <item name="componentType" xsi:type="string">field</item>

                       <item name="label" xsi:type="string" translate="true">Position</item>

                       <item name="dataScope" xsi:type="string">position</item>

                       <item name="visible" xsi:type="boolean">false</item>

                   </item>

               </argument>

           </field>

       </container>

   </container>
2
  • How to add label with dynamicRows as field (not as fieldset)? Do you know about that? In your ss, Hightlight Rows label display. I want to add that. Nov 6, 2019 at 9:43
  • @Harhik, how can we limit to 5 rows maximum Jan 27, 2021 at 14:14

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.