Magento 2 - insertListing ui component

Question

I'm trying to create very simple form(just one text input) and add a fieldset with insertListing component(Magento_Ui/view/base/web/js/form/components/insert-listing.js). Component that is responsible for adding related/upsell and crossell products in product form.

For simplicity i copied the form modifier from catalog Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Related to my form (with minor tweaks like form name change to make it work)

This all works well. I see the fieldset, I can open the insertListing, select products, reopen the listing (and I see previously selected product). However the dynamic-rows-grid component that should display the selected products is empty, it never gets populated from the listing.

When I inspect the data source for the form I see that insertListing creates data in different part of the source than the dynamic rows reads from. It creates data within the type_form.type_form_data_source.data instead of type_form.type_form_data_source.

I'm however not sure how to fix this. The code looks the same as product form, looking into the generated json for the form it also looks the same. Please see the generated json:

pastebin link

Can anybody with more experience with ui components spot my mistake or point me into right direction?

Thank you

Answer 1

I was able to get it working, but still a bit confused why it wasnt working with the code posted. The difference is in insert listing configuration:

Original:

'config' => [
    'autoRender'         => false,
    'componentType'      => 'insertListing',
    'dataScope'          => $listingTarget,
    'externalProvider'   => $listingTarget . '.' . $listingTarget . '_data_source',
    'selectionsProvider' => $listingTarget . '.' . $listingTarget . '.product_columns.ids',
    'ns'                 => $listingTarget,
    'render_url'         => $this->urlBuilder->getUrl('mui/index/render'),
    'realTimeLink'       => true,
    'dataLinks'          => [
        'imports' => false,
        'exports' => true
    ],
    'behaviourType'      => 'simple',
        'externalFilterMode' => true,
        'imports'            => [
        'productId' => '${ $.provider }:data.product.current_product_id',
        'storeId'   => '${ $.provider }:data.product.current_store_id',
    ],
    'exports'            => [
        'productId' => '${ $.externalProvider }:params.current_product_id',
            'storeId'   => '${ $.externalProvider }:params.current_store_id',
    ],
    'storageConfig'      => [
        'provider' => 'type_form.type_form_data_source'
    ]
],

Updated

'config' => [
    'autoRender'         => false,
    'componentType'      => 'insertListing',
    'dataScope'          => $listingTarget,
    'externalProvider'   => $listingTarget . '.' . $listingTarget . '_data_source',
    'selectionsProvider' => $listingTarget . '.' . $listingTarget . '.product_columns.ids',
    'ns'                 => $listingTarget,
    'render_url'         => $this->urlBuilder->getUrl('mui/index/render'),
    'realTimeLink'       => true,
    'dataLinks'          => [
        'imports' => false,
        'exports' => true
    ],
    'behaviourType'      => 'simple',
        'externalFilterMode' => true,
        'imports'            => [
        'productId' => '${ $.provider }:data.product.current_product_id',
        'storeId'   => '${ $.provider }:data.product.current_store_id',
    ],
    'exports'            => [
        'productId' => '${ $.externalProvider }:params.current_product_id',
            'storeId'   => '${ $.externalProvider }:params.current_store_id',
    ],
    'storageConfig'      => [
        'provider' => 'type_form.type_form_data_source'
    ],
    'links' => [
        //'value' => '${ $.provider }:${ $.dataScope}'
        'value' => '${ $.provider }:' . $listingTarget
    ]
],

The commented out 'value' is default defined in \Magento\Ui\view\base\web\js\form\components\insert.js. My understanding of template literals is, that both lines should result in the same. But that is not the case? Does anybody know why?

Thanks

Answer 2

@Langley thank you sou much!

Your example code helps me to finally get my listing linked working, I was following the catalog related product as example but it doesn't use the link statement in the modal grid definition, you saved me after around 10 hours of debug, reading code and trying things.

About your question, I've debugged the save() method in insert-listing component, the value of dataProvider is evaluated to

data.test_related_product_listing

"test_related_product_listing" is the value of my dataProvider, so that is the reason because you need to use

'value' => '${ $.provider }:' . $listingTarget

Hopefully this helps someone else

Regards