4

</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>

1 Answer 1

4
+50

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.

1
  • 1
    Ty for the answer but i had an issue, it worked for me after moving the {module_dir}/view/adminhtml/web/requirejs-config.js file in this directory instead {module_dir}/view/adminhtml/requirejs-config.js
    – Taschert
    Oct 19, 2017 at 15:35

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.