9

I've successfully added a custom tab with a grid to the Customer Edit form in the Magento admin. The tab uses the <insertListing> tag in its layout XML to render the grid, which works as it should. When I try to save the customer, though, the form validation throws an error. I've debugged this and it appears that when the validate() method of tab_group.js tries to call the tab's validate method it returns undefined. I've compared this to the Store Credit tab, which was created using the deprecated Grid blocks, and for that element it returns an empty array. Is there something I missed in my configuration?

Error:

tab_group.js:68 Uncaught TypeError: Cannot read property 'valid' of undefined
    at tab_group.js:68
    at Function.findIndex (underscore.js:644)
    at Function._.find._.detect (underscore.js:206)
    at UiClass.validate (tab_group.js:67)
    at Array.some (<anonymous>)
    at UiClass.onValidate (tab_group.js:86)
    at setNested (objects.js:43)
    at Object.nested (objects.js:117)
    at UiClass.set (element.js:305)
    at updateValue (links.js:80)
(anonymous) @ tab_group.js:68
(anonymous) @ underscore.js:644
_.find._.detect @ underscore.js:206
validate @ tab_group.js:67
onValidate @ tab_group.js:86
setNested @ objects.js:43
nested @ objects.js:117
set @ element.js:305
updateValue @ links.js:80
(anonymous) @ events.js:87
trigger @ events.js:84
trigger @ events.js:162
validate @ form.js:333
save @ form.js:261
dispatch @ jquery.js:5226
elemData.handle @ jquery.js:4878

Tab Layout XML (view/base/ui_component/customer_form.xml):

<?xml version="1.0"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="downloaded_blueprints" sortOrder="1000">
        <settings>
            <label translate="true">Downloaded Blueprints</label>
        </settings>
        <insertListing name="downloaded_blueprints_listing">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">blueprint_download</item>
                </item>
            </argument>
            <settings>
                <externalProvider>${ $.ns }.downloaded_blueprints_listing_data_source</externalProvider>
                <autoRender>true</autoRender>
                <dataScope>downloaded_blueprints_listing</dataScope>
                <ns>downloaded_blueprints_listing</ns>
                <exports>
                    <link name="customerId">${ $.externalProvider }:params.customer_id</link>
                </exports>
                <imports>
                    <link name="customerId">${ $.provider }:data.customer.entity_id</link>
                </imports>
            </settings>
        </insertListing>
    </fieldset>
</form>
1
  • Please share your grid code, current shared code is working fine.
    – kunj
    Oct 8, 2018 at 9:21

1 Answer 1

9
+50

This is the bug. So you can added mixin on it. Try following way:

VendorName/ModuleName/view/adminhtml/requirejs-config.js


var config = {
    "config": {
        'mixins': {
            'Magento_Ui/js/form/components/tab_group': {
                'VendorName_ModuleName/js/mixin/form/components/tab_group': true
            }
        }
    }
};

VendorName/ModuleName/view/adminhtml/web/js/mixin/form/components/tab_group.js


define([
    'underscore'
], function (_) {
    'use strict';

    return function (TabGroup) {
        return TabGroup.extend({
            /**
             * Delegates 'validate' method on element, then reads 'invalid' property
             * of params storage, and if defined, activates element, sets
             * 'allValid' property of instance to false and sets invalid's
             * 'focused' property to true.
             *
             * @param {Object} elem
             */
            validate: function (elem) {
                // Pass through if element is not fieldset
                if (elem.index !== 'downloaded_blueprints') {
                    return this._super();
                }

                var result = elem.delegate('validate'),
                    invalid;

                invalid = _.find(result, function (item) {
                    if (item === undefined) {
                        return 0;
                    }

                    return !item.valid;
                });

                if (invalid) {
                    elem.activate();
                    invalid.target.focused(true);
                }

                return invalid;
            }
        });
    }
});

Remove pub/static/* and Deploy static content

5
  • 1
    Thanks. This worked great, with a few modifications. Oct 11, 2018 at 19:03
  • @JosephLeedy, what modifications are you made. after adding this JS , still got the same error
    – Jaisa
    Jun 24, 2019 at 12:21
  • @Jaisa if you take a look at the answer revisions, you'll see what I changed. Jun 24, 2019 at 16:18
  • Hello @JosephLeedy, I am getting the same error in enterprise, I applied this change but it still displays the same error even after removing pub/static var generation and cleaning the cache. Would you please help me? I am using M2.3.1
    – Pribhav
    Jul 2, 2019 at 6:59
  • Great work.. thanks a lot for this. Jan 8, 2020 at 12:36

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.