How does a backend config field <depends> condition work?

dmitry_fedyuk · December 26, 2015, 3:21pm

magento/magento2/blob/2.0.0/app/code/Magento/Config/etc/system_file.xsd#L356-L394


<xs:element name="depends">
    <xs:annotation>
        <xs:documentation>
            Describe which elements are regulator for current field/group
        </xs:documentation>
    </xs:annotation>


    <xs:complexType>
        <xs:sequence>
            <xs:element minOccurs="0" maxOccurs="unbounded" name="field">
                <xs:complexType>
                    <xs:annotation>
                        <xs:documentation>
                            Field resource. Recursive complex type. Define element is influence on current field
                        </xs:documentation>
                    </xs:annotation>


                    <xs:simpleContent>
                        <xs:extension base="xs:string">
                            <xs:attribute name="id" type="typeElementPath" use="required" />
                            <xs:attribute name="separator" type='xs:string' use='optional' />
                            <xs:attribute name="negative" type='xs:int' use='optional' />
                        </xs:extension>
                    </xs:simpleContent>
                </xs:complexType>
            </xs:element>
        </xs:sequence>
    </xs:complexType>


    <xs:unique name="uniqueDependsFieldId">
        <xs:annotation>
            <xs:documentation>
                Attribute id is unique under all regulatory elements per section/group/field
            </xs:documentation>
        </xs:annotation>
        <xs:selector xpath=".//field"/>
        <xs:field xpath="@id"/>
    </xs:unique>
</xs:element>

github.com

magento/magento2/blob/2.0.0/lib/web/mage/adminhtml/form.js#L325-L340


initialize : function (elementsMap, config)
{
    if (config) {
        this._config = config;
    }
    for (var idTo in elementsMap) {
        for (var idFrom in elementsMap[idTo]) {
            if ($(idFrom)) {
                Event.observe($(idFrom), 'change', this.trackChange.bindAsEventListener(this, idTo, elementsMap[idTo]));
                this.trackChange(null, idTo, elementsMap[idTo]);
            } else {
                this.trackChange(null, idTo, elementsMap[idTo]);
            }
        }
    }
},

github.com

magento/magento2/blob/2.0.0/lib/web/mage/adminhtml/form.js#L358


},


/**
 * Define whether target element should be toggled and show/hide its row
 *
 * @param object e - event
 * @param string idTo - id of target element
 * @param valuesFrom - ids of master elements and reference values
 * @return
 */
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) {

idTo is a dependent config field (which should be shown or hidden).
valuesFrom is the show conditions.

dmitry_fedyuk · December 26, 2015, 3:22pm