8

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>
  • Please share your grid code, current shared code is working fine. – kunj Oct 8 '18 at 9:21
8
+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

  • Thanks. This worked great, with a few modifications. – Joseph Leedy Oct 11 '18 at 19:03
  • @JosephLeedy, what modifications are you made. after adding this JS , still got the same error – Jaisa Jun 24 '19 at 12:21
  • @Jaisa if you take a look at the answer revisions, you'll see what I changed. – Joseph Leedy Jun 24 '19 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 '19 at 6:59
  • Great work.. thanks a lot for this. – Mohit Kumar Arora Jan 8 at 12:36

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.