Gsyfuy

I am working on magento 2.1 backend module. Basically backend part is a form that contain tabs. I ahve here some standard inputs but also some dynamic rows etc. Everything is working fine except the last tab. Last tab is a MODAL that allow us to choose products that will not be available for the entity that we are editing/creating.

Basically idea of working is exactly same as on product edit form for related products, so: we have a button "Add related products", modal render with grid of products then we can select them and after click "Add selected products" we have them rendered in dynamic grid rows.

I was able to reproduce some part of this logic on my custom form:

• custom tab with button "Add unavailable products"


• after click modal render


• inside modal I have a product list


• when selecting product and clicking "Add selected products" modal disappear


• when opening modal again the list is filtered (does not contain previously selected elements)


• DYNAMIC GRID is not populated :(

I do not know where is the problem with dynamic grid :/ there are no errors in the console, no error logs, etc. Does anyone worked with those components or maybe have a idea what to do to make it works?

I saw some referrences into this doc:
http://devdocs.magento.com/guides/v2.1/ui-components/ui_dynamic_rows.html
but it is not working :/

This is how the tab looks like:

Some implementation details:

Main form is declared on adminhtml/ui_component/my_component_form.xml and looks like this:

<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">my_component_form.my_component_form_data_source</item>

        <item name="deps" xsi:type="string">my_component_form.my_component_form_data_source</item>

        <item name="namespace" xsi:type="string">my_component_form</item>

    </item>

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

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

        <item name="type" xsi:type="string">tabs</item>

        <item name="navContainerName" xsi:type="string">left</item>

    </item>

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

        <item name="back" xsi:type="string">MyModuleAgencyBlockAdminhtmlAgencyEditBackButton</item>

        <item name="delete" xsi:type="string">MyModuleAgencyBlockAdminhtmlAgencyEditDeleteButton</item>

        <item name="reset" xsi:type="string">MyModuleAgencyBlockAdminhtmlAgencyEditResetButton</item>

        <item name="save" xsi:type="string">MyModuleAgencyBlockAdminhtmlAgencyEditSaveButton</item>

        <item name="save_and_continue" xsi:type="string">MyModuleAgencyBlockAdminhtmlAgencyEditSaveAndContinueButton</item>

    </item>

    <item name="reverseMetadataMerge" xsi:type="boolean">true</item>

</argument>

<dataSource name="my_component_form_data_source">

    <argument name="dataProvider" xsi:type="configurableObject">

        <argument name="class" xsi:type="string">MyModuleAgencyUiComponentEditForm</argument>

        <argument name="name" xsi:type="string">my_component_form_data_source</argument>

        <argument name="primaryFieldName" xsi:type="string">agency_id</argument>

        <argument name="requestFieldName" xsi:type="string">agency_id</argument>

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

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

                <item name="submit_url" xsi:type="url" path="my_component/agency/save"/>

            </item>

        </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>

Last tab is added with Modifier class (like Related product), and my adminhtml/di.xml file looks like:

    <virtualType name="MyModuleAgencyUiComponentEditModifierPool" type="MagentoUiDataProviderModifierPool">

    <arguments>

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

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

                <item name="class" xsi:type="string">MyModuleAgencyUiComponentEditModifierUnavailableProducts</item>

                <item name="sortOrder" xsi:type="number">200</item>

            </item>

        </argument>

    </arguments>

</virtualType>

<type name="MyModuleAgencyUiComponentEditForm">

    <arguments>

        <argument name="pool" xsi:type="object">MyModuleAgencyUiComponentEditModifierPool</argument>

    </arguments>

</type>

<type name="MyModuleAgencyUiComponentEditModifierUnavailableProducts">

    <arguments>

        <argument name="scopeName" xsi:type="string">my_component_form.areas</argument>

    </arguments>

</type>

My getMeta method on DataProvider class (Form) is:

    public function getMeta()

{

    $meta = parent::getMeta();



    /** @var ModifierInterface $modifier */

    foreach ($this->pool->getModifiersInstances() as $modifier) {

        $meta = $modifier->modifyMeta($meta);

    }



    return $meta;

}

And last part -> my modifier class extends Related products class, and field construction looks like:

 class UnavailableProducts extends Related

{

...

...

...

  /**

     * {@inheritdoc}

     */

    protected function getButtonSet(Phrase $content, Phrase $buttonTitle, $scope)

    {

        $config = parent::getButtonSet($content, $buttonTitle, $scope);

        $modalTarget = $this->scopeName . '.' . 'unavailable' . '.' . $scope . '.modal';



        // We need to update some button config in order to make sure that the modal box is linked to the proper button

        $config['children']['button_' . $scope]['arguments']['data']['config']['actions'][0]['targetName'] = $modalTarget;

        $config['children']['button_' . $scope]['arguments']['data']['config']['actions'][1]['targetName'] = $modalTarget . '.' . $scope . '_product_listing';



        return $config;

    }





    public function modifyMeta(array $meta)

    {

        $meta = array_replace_recursive(

            $meta,

            [

                // Let's add a new fieldset group

                static::EASYCORE_AGENCY => [

                    'children' => [

                        'button_set' => $this->getButtonSet(

                            __('Products that are present here are not available for this agency'),

                            __('Add Unavailable Products'),

                            $this->scopePrefix . 'unavailable'

                        ),

                        'modal' => $this->getGenericModal(

                            __('Add Unavailable Products'),

                            $this->scopePrefix . 'unavailable'

                        ),

                        'unavailable' => $this->getGrid('unavailable')

                    ],

                    'arguments' => [

                        'data' => [

                            'config' => [

                                'label' => __('Unavailable products'),

                                'collapsible' => false,

                                'componentType' => Fieldset::NAME,

                                'dataScope' => static::DATA_SCOPE,

                                'sortOrder' => 200

                            ],

                        ],



                    ],

                ],

            ]

        );



        return $meta;

    }

If we take a look inside Related class we will see that on grid config there is value like:

'links' => [

     'insertData' => '${ $.provider }:${ $.dataProvider }'

],

I suspect that the problem is somewhere on grid or dynamic row configuration... But I am unable to find it on my own :/ Any help would be great.

Looks like dynamicRows dataScope & dataProvider is wrong. I faced same problem. After changing dataScope & dataProvider grid is populated.

<dynamicRows name="orders">

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

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

        <item name="dataScope" xsi:type="string">data.orders_tab.links</item>

        <item name="dataProvider" xsi:type="string">data.orders_tab.my_module_sales_order_listing</item>

    </item>

</argument>

<container name="record"/>

Before:

<item name="dataScope" xsi:type="string">data.links</item>

After:

<item name="dataScope" xsi:type="string">data.orders_tab.links</item>

orders_tab is name of tab where are dynamicRows & insertListing placed.