Skip to content

doesn’t work as expected in widget.xml in Magento 2

So I’m trying to create dependent field, that would appear if the respective drop-down value will be chosen. My widget.xml looks like this:

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget id="DemoWidget" class="DemoDemoWidgetBlockWidgetDemo" placeholder_image="Demo_DemoWidget::logo.png">
        <label translate="true">Demo Widget</label>
        <description translate="true">Demo widget</description>
        <parameters>
            <parameter name="is_enabled" xsi:type="select" visible="true" sort_order="10">
                <label translate="true">Is Enabled?</label>
                <options>
                    <option name="1" value="1">
                        <label>Yes</label>
                    </option>
                    <option name="0" value="0">
                        <label>No</label>
                    </option>
                </options>
            </parameter>
            <parameter name="link_url" xsi:type="block" visible="true" sort_order="20">
                <label translate="true">Link URL</label>
                <block class="DemoDemoWidgetBlockAdminhtmlWidgetUrlInput"></block>
                <depends>
                    <parameter name="is_enabled" value="1"></parameter>
                </depends>
            </parameter>
        </parameters>
    </widget>
</widgets>

Of course, it doesn’t work – I see both drop-down and block input, but changing the drop-down doesn’t work at all. I was trying to find a solution, and this one seemed to be very promising. However, after I implemented it, the admin panel shows me this error:
Element 'depends': This element is not expected.

It wasn’t the case before I followed the instruction from the above mentioned solution, so I assume it worked in a certain way. However, as far as I know, <depends> should be possible to use in widget.xml, so I’m very lost. Does anyone have any solution/ideas on how to fix that?

My requirejs-config.js, which is located ad DemoWidget/view/adminhtml/web(I also tried to move it to adminhtml folder, used a couple of versions of path to form, didn;t work):

var config = {
    map: {
        "*": {
            "mage/adminhtml/form": "DemoWidget/view/adminhtml/web/js/form"
        }
    }
};

And this is the trackChange() I used instead of original one in DemoWidget/view/adminhtml/web/js/form.js file:

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();
                 }
             }
         }