0

I am fairly new to custom UI components and I'm attempting to build DynamicRows component in order to allow the user to add new rows for delivery method options on the product page.

I have created the .xml file in my [vendor]/[module]/view/adminhtml/ui_component directory:

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">
                deliveryoverride_deliverymethods_rows.deliveryoverride_deliverymethods_data_source
            </item>
            <item name="deps" xsi:type="string">
                deliveryoverride_deliverymethods_rows.deliveryoverride_deliverymethods_data_source
            </item>
        </item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">deliveryoverride_deliverymethods_rows</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>

    <dataSource name="deliveryoverride_deliverymethods_rows_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Test\DeliveryOverride\Model\DataProvider</argument>
            <argument name="name" xsi:type="string">deliveryoverride_deliverymethods_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">method_id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
    </dataSource>

    <fieldset name="delivery_methods_fieldset">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="label" xsi:type="string" translate="true">Delivery Method Override</item>
                <item name="sortOrder" xsi:type="number">20</item>
            </item>
        </argument>

        <dynamicRows name="delivery_method_dynamicrows">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="renderDefaultRecord" xsi:type="string">true</item>
                </item>
            </argument>
            <settings>
                <dndConfig>
                    <param name="enabled" xsi:type="string">false</param>
                </dndConfig>
                <visible>true</visible>
                <addButtonLabel translate="true">Add New</addButtonLabel>
                <label>Delivery Methods</label>
                <componentType>dynamicRows</componentType>
                <recordTemplate>record</recordTemplate>
            </settings>

            <container name="record" component="Magento_Ui/js/dynamic-rows/record">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="isTemplate" xsi:type="boolean">true</item>
                        <item name="is_collection" xsi:type="boolean">true</item>
                        <item name="componentType" xsi:type="string">container</item>
                        <item name="dataScope" xsi:type="string"/>
                    </item>
                </argument>
                <field name="method_name" sortOrder="1" formElement="input">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="label" xsi:type="string">Name</item>
                            <item name="visible" xsi:type="boolean">true</item>
                            <item name="dataType" xsi:type="string">text</item>
                            <item name="formElement" xsi:type="string">input</item>
                        </item>
                    </argument>
                    <settings>
                        <dataScope>method_name</dataScope>
                    </settings>
                </field>
                <actionDelete name="actionDelete" sortOrder="40">
                    <settings>
                        <label translate="false"/>
                    </settings>
                </actionDelete>
            </container>
        </dynamicRows>
    </fieldset>
</form>

The actual component shows on the product edit page and I can add rows etc, only the data from the database table is not pulling through.

I have my data provider set up like this:

<?php

namespace Test\DeliveryOverride\Model;

use Magento\Ui\DataProvider\AbstractDataProvider;
use Tsest\DeliveryOverride\Model\ResourceModel\DeliveryMethod\CollectionFactory;

class DataProvider extends AbstractDataProvider
{
    protected $loadedData;

    public function __construct(
        $name,
        $primaryFieldName,
        $requestFieldName,
        CollectionFactory $methodCollectionFactory,
        array $meta = [],
        array $data = []
    ) {
        $this->collection = $methodCollectionFactory->create();
        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
    }

    public function getData()
    {
        if (isset($this->loadedData)) {
            return $this->loadedData;
        }

        $methods = $this->collection->getItems();

        foreach ($methods as $method) {
            $this->loadedData[] = $method->getData();
        }

        return $this->loadedData;
    }
}

If i var_dump the output of $this->loadedData in the DataProvide class, it will outpout the data from the database tables so I know that's working.


UPDATE 9/4/2019 - 3:03pm

I can see the following in the output JSON data when I go to view source:

"config":{"data":{"delivery_method_dynamicrows":{"method_name":"monday 
delivery"}},"params": 
{"namespace":"deliveryoverride_deliverymethods_rows"

This part which says, "method_name":"mondaydelivery" proves that it's pulling in some data, as method_name is the name of the column and the actual data in that cell is "mondaydelivery" - yet the rows still aren't being populated for some reason.

Thank you guys for any help with this!

Best wishes

  • Please can someone offer any help on this :) I'm just against a bit of a deadline and it would be really useful to know what I've missed out here. I've followed as much of the dev docs as I can but it seems to be quite, "fragmented" with bits of important information misssed out etc. – SNAFU Apr 10 at 6:42

Your Answer

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

Browse other questions tagged or ask your own question.