1

I'm trying to build a CRUD module for Magento 2.
In this module, one of my entities has a "many to many" relation with the products.
For this, I need to add a section in my add/edit form where I can select the products.
I want to do this using form ui components, not with tabs.
I thought I could replicate the way the related products are done in the product add/edit form.
But there is a problem. I don't understand how is that added to the product form.
From what I saw, the product form uses ui components.
So how is the related products section added to the product edit screen?

10
  • which version are you using? In the current stable release the ui component for inserting a listing into another ui component is not implemented yet, but it should come in 2.1 I think. Maybe it's easier to develop against 2.1 here: github.com/magento/magento2/blob/develop/app/code/Magento/Ui/… May 24, 2016 at 16:14
  • I'm using 2.0.something. But there is something implemented for related products. I'm trying to mimic that behavior.
    – Marius
    May 24, 2016 at 16:21
  • I would recommend implementing it for 2.1, since the product admin implementation (like many others) changed drastically. Sure it depends when you need this ready. Have a look at the ui_component dir in 2.0 and 2.1: github.com/magento/magento2/tree/2.1/app/code/Magento/Catalog/… May 24, 2016 at 17:19
  • I don't need it for now. It is for learning purposes. I was trying to replicate the behavior for reated products but I do not know how this is done.
    – Marius
    May 24, 2016 at 17:46
  • in 2.0 it's added pretty oldschool in the Tabs Class: github.com/magento/magento2/blob/2.1/app/code/Magento/Catalog/… which makes an ajax call on the related controller which loads a block with a serialized grid. I'll bookmark this since I also want to try something like this in 2.1 soon, but currently I don't have the time unfortunately May 24, 2016 at 17:59

1 Answer 1

2

Based on the guidance from @DavidVerholen I managed to find out how the related products are added to the product add/edit page.
The ui component must have a data provider class associated to it.
For products this data provider is Magento\Catalog\Ui\DataProvider\Product\Form\ProductDataProvider.
This is assigned to the ui component in product_form.xml

<dataSource name="product_form_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Magento\Catalog\Ui\DataProvider\Product\Form\ProductDataProvider</argument>
        ....
    </argument>
    ....
</dataSource> 

But this data provider supports modifiers.
each modifier can do 2 things.

  • change the configuration of the ui component
  • change the data attached to the component.

The product form component has a lot of modifiers attached to it in adminhtml/di.xml.
One of these modifiers is the Related modifier

<virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool">
    <arguments>
        <argument name="modifiers" xsi:type="array">
            ....
            <item name="related" xsi:type="array">
                <item name="class" xsi:type="string">Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Related</item>
                <item name="sortOrder" xsi:type="number">110</item>
            </item>
            ...
        </argument>
    </arguments>
</virtualType>
<type name="Magento\Catalog\Ui\DataProvider\Product\Form\ProductDataProvider">
    <arguments>
        <argument name="pool" xsi:type="object">Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool</argument>
    </arguments>
</type>

the modifier for related is an instance of Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Related.
There are 2 methods in this modifier that are important.

  • modifyMeta: this one modifies the ui component structure by adding an other fieldset with related products, up-sells and cross-sells.
  • modifyData: retrieves the related products (and other relations) from the db and attaches the values to the data that should appear in the form.

I guess I could try the same approach on my ui component.

5
  • Is there any way to call my custom phtml in product edit form ? Or any way to use my custom render by using UI component ? @Marius
    – Keyur Shah
    Jun 28, 2016 at 6:18
  • @KeyurShah. I haven't figured that out yet.
    – Marius
    Jun 28, 2016 at 6:18
  • Do you have any reference for that ?, It's too much confusing for me @Marius
    – Keyur Shah
    Jun 28, 2016 at 6:20
  • you can take a look at how the modifiers are added via di.xml. Try to add your own modifier and check maybe one of the core modifiers adds a custom phtml to the form.
    – Marius
    Jun 28, 2016 at 6:27
  • Can i add field depends form ui component magento 2 by this
    – mrtuvn
    Aug 17, 2016 at 8:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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