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?

  • 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/… – David Verholen May 24 '16 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 '16 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/… – David Verholen May 24 '16 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 '16 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 – David Verholen May 24 '16 at 17:59
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.

  • 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 '16 at 6:18
  • @KeyurShah. I haven't figured that out yet. – Marius Jun 28 '16 at 6:18
  • Do you have any reference for that ?, It's too much confusing for me @Marius – Keyur Shah Jun 28 '16 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 '16 at 6:27
  • Can i add field depends form ui component magento 2 by this – mrtuvn Aug 17 '16 at 8:29

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.