Magento2 XML – Fix Not Working in Widget.xml

magento2widgetxml

</depends> is not working in my below widget configuration inside widget.xml. Can any one help me on this. I want to display values based on pre selected value.

<parameters>
            <parameter name="available_options" xsi:type="select"  visible="true">
                <label translate="true">Choose Style Dropdown</label>
                <description translate="true">Image getting displayed in various sizes.</description>
                <options>
                    <option name="newsletter" value="newsletter">
                        <label translate="true">Email subscribe</label>
                    </option>
                    <option name="category_link" value="category_link">
                        <label translate="true">Link to a category</label>
                    </option>
                    <option name="product_page" value="product_page">
                        <label translate="true">Product detail page</label>
                    </option>
                </options>
            </parameter>
            <parameter name="id_path_product" xsi:type="block" visible="true" sort_order="10">
                <label translate="true">Link to a Specified Product</label>
                <depends>
                    <parameter name="available_options" value="product_page" />
                </depends>
                <block class="Magento\Catalog\Block\Adminhtml\Product\Widget\Chooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string" translate="true">Select Product...</item>
                        </item>
                    </data>
                </block>
            </parameter>
        </parameters>

Best Answer

The problem is that the JS that handles the show/hide functionality of dependency elements doesn't find anything in the case of xsi:type="block" fields.

One way to get around this is to override the JS to add support for the product chooser parameter.

In a custom module, add these files:

{module_dir}/view/adminhtml/web/requirejs-config.js

var config = {
    map: {
        "*": {
            "mage/adminhtml/form": "Your_Module/js/form"
        }
    }
};

and now we override the core JS with a JS file that has a few tweaks. copy the file from {magento_dir}/lib/web/mage/adminhtml/form.js to: {module_dir}/view/adminhtml/web/js/form.js and change the trackChange method (line 361) to the following:

    trackChange : function(e, idTo, valuesFrom)
    {
        // define whether the target should show up
        var shouldShowUp = true;
        for (var idFrom in valuesFrom) {
            var from = $(idFrom);
            if (from) {
                var values = valuesFrom[idFrom]['values'];
                var isInArray = values.indexOf(from.value) != -1;
                var isNegative = valuesFrom[idFrom]['negative'];
                if (!from || isInArray && isNegative || !isInArray && !isNegative) {
                    shouldShowUp = false;
                }
            }
        }

        // toggle target row
        var headElement = $(idTo + '-head'),
            isInheritCheckboxChecked = $(idTo + '_inherit') && $(idTo + '_inherit').checked,
            target = $(idTo);

        // Custom code to account for the chooser style parameters.
        if (target === null && headElement === null && idTo.substring(0, 16) === 'options_fieldset') {
            headElement = jQuery('.field-' + idTo).add('.field-chooser' + idTo);
        }

        // Target won't always exist (for example, if field type is "label")
        if (target) {
            var inputs = target.up(this._config.levels_up).select('input', 'select', 'td'),
                isAnInputOrSelect = ['input', 'select'].indexOf(target.tagName.toLowerCase()) != -1;
        } else {
            var inputs = false,
                isAnInputOrSelect = false;
        }
        if (shouldShowUp) {
            var currentConfig = this._config;
            if (inputs) {
                inputs.each(function (item) {
                    // don't touch hidden inputs (and Use Default inputs too), bc they may have custom logic
                    if ((!item.type || item.type != 'hidden') && !($(item.id+'_inherit') && $(item.id+'_inherit').checked)
                        && !(currentConfig.can_edit_price != undefined && !currentConfig.can_edit_price)) {
                        item.disabled = false;
                        jQuery(item).removeClass('ignore-validate');
                    }
                });
            }
            if (headElement) {
                headElement.show();
                if (target && headElement.hasClassName('open')) {
                    target.show();
                } else if (target) {
                    target.hide();
                }
            } else {
                if (target) {
                    target.show();
                }
                if (isAnInputOrSelect && !isInheritCheckboxChecked) {
                    if (target) {
                        target.disabled = false;
                    }
                    jQuery('#' + idTo).removeClass('ignore-validate');
                }
            }
        } else {
            if (inputs) {
                inputs.each(function (item){
                    // don't touch hidden inputs (and Use Default inputs too), bc they may have custom logic
                    if ((!item.type || item.type != 'hidden') && !($(item.id+'_inherit') && $(item.id+'_inherit').checked)) {
                        item.disabled = true;
                        jQuery(item).addClass('ignore-validate');
                    }
                });
            }
            if (headElement) {
                headElement.hide();
            }
            if (target) {
                target.hide();
            }
            if (isAnInputOrSelect && !isInheritCheckboxChecked) {
                if (target) {
                    target.disabled = true;
                }
                jQuery('#' + idTo).addClass('ignore-validate');
            }

        }
        var rowElement = $('row_' + idTo);
        if (rowElement == undefined && target) {
            rowElement = target.up(this._config.levels_up);
        }
        if (rowElement) {
            if (shouldShowUp) {
                rowElement.show();
            } else {
                rowElement.hide();
            }
        }
    }

now the product chooser field will behave as expected.

Related Topic