2

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.

dynamic rows empty

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.

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

  • It's hard to debug. Is there the source code on Github? – Khoa TruongDinh Feb 18 '17 at 6:29
0

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

0

@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

  • I'm glad this did help someone in the end, because I was pulling my hair out when preparing this for the first time. – Langley Aug 27 '18 at 6:06

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.