Зависимость поля формы пользовательского интерфейса Magento 2

Просто для обучения

У меня есть следующие поля в форме редактирования продукта администратора

<field name="gender">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Magento\Config\Model\Config\Source\Yesno</item>
                <item name="config" xsi:type="array">
                    <item name="scopeLabel" xsi:type="string">[GLOBAL]</item>
                    <item name="dataScope" xsi:type="string">gender</item>

                    <item name="sortOrder" xsi:type="number">20</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">radioset</item>
                    <!-- <item name="formElement" xsi:type="string">select</item> -->
                    <item name="label" xsi:type="string" translate="true">My Option</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                    <item name="source" xsi:type="string">product</item>
                </item>
            </argument>
        </field>
        <field name="region_id_data">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">product</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                    <item name="imports" xsi:type="array">
                        <item name="value" xsi:type="string">${$.provider}:data.product.gender:value</item>
                        <item name="visible" xsi:type="string">${$.provider}:data.product.gender:value</item>
                    </item>
                </item>
            </argument>
        </field>

, который отлично работает с опцией да нет (только логические значения), но я хочу добавить условие в следующем 

<item name="value" xsi:type="string">${$.provider}:data.product.gender:value</item>

Например, если значение равно 3, только тогда сделайте его видимым.

Можно ли добавить условие в этот XML-файл?

Обновление

Спасибо, @Ramkishan Suthar, Это большая помощь, но все же это не так работающий.

<fieldset name="testingproduct">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Testing Group</item>
                <item name="provider" xsi:type="string">product</item>
                <item name="dataScope" xsi:type="string">data.product</item>
                <item name="sortOrder" xsi:type="number">2</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="opened" xsi:type="boolean">true</item>
                <item name="ns" xsi:type="string">product_form</item>
            </item>
        </argument>
        <field name="gender">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Magento\Config\Model\Config\Source\Yesno</item>
                <item name="config" xsi:type="array">
                    <item name="scopeLabel" xsi:type="string">[GLOBAL]</item>
                    <item name="dataScope" xsi:type="string">gender</item>

                    <item name="sortOrder" xsi:type="number">20</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">radioset</item>
                    <!-- <item name="formElement" xsi:type="string">select</item> -->
                    <item name="label" xsi:type="string" translate="true">My Option</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                    <item name="source" xsi:type="string">product</item>
                </item>
            </argument>
            <settings>
                <switcherConfig>
                    <enabled>true</enabled>
                    <rules>
                        <rule name="0">
                            <value>0</value>
                            <actions>
                                <action name="0">
                                    <target>product_form.product_form.testingproduct.region_id_data</target>
                                    <callback>hide</callback>
                                </action>
                            </actions>
                        </rule>
                        <rule name="1">
                            <value>1</value>
                            <actions>
                                <action name="1">
                                    <target>product_form.product_form.testingproduct.region_id</target>
                                    <callback>hide</callback>
                                </action>
                            </actions>
                        </rule>
                    </rules>
                </switcherConfig>
            </settings>
        </field>
        <field name="region_id_data">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">product</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                    <item name="imports" xsi:type="array">
                        <item name="value" xsi:type="string">${$.provider}:data.product.gender:value</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="region_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">product</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                    <item name="imports" xsi:type="array">
                        <item name="value" xsi:type="string">${$.provider}:data.product.gender:value</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>

enter image description here

Author: Kaushal Suthar, 2019-03-28
Source

2 answers

Это можно сделать из xml. Пожалуйста, следуйте приведенному ниже коду.

<field name="field" sortOrder="50" formElement="select">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">csr</item>
                <item name="component" xsi:type="string">WebbyTroops_ShippingRules/js/form/element/fields</item>
            </item>
        </argument>
        <settings>
            <switcherConfig>
                <rules>
                    <rule name="0">
                        <value>cart-subtotal</value>
                        <actions>
                            <action name="0">
                                <target>shippingrules_form.shippingrules_form.conditions.value_cart</target>
                                <callback>show</callback>
                            </action>
                            <action name="1">
                                <target>shippingrules_form.shippingrules_form.conditions.value_customer</target>
                                <callback>hide</callback>
                            </action>
                            <action name="2">
                                <target>shippingrules_form.shippingrules_form.conditions.value_customergroup</target>
                                <callback>hide</callback>
                            </action>
                        </actions>
                    </rule>
                    <rule name="1">
                        <value>customer-entity_id</value>
                        <actions>
                            <action name="0">
                                <target>shippingrules_form.shippingrules_form.conditions.value_cart</target>
                                <callback>hide</callback>
                            </action>
                            <action name="1">
                                <target>shippingrules_form.shippingrules_form.conditions.value_customer</target>
                                <callback>show</callback>
                            </action>
                            <action name="2">
                                <target>shippingrules_form.shippingrules_form.conditions.value_customergroup</target>
                                <callback>hide</callback>
                            </action>
                        </actions>
                    </rule>
                    <rule name="2">
                        <value>customergroup-customer_group_id</value>
                        <actions>
                            <action name="0">
                                <target>shippingrules_form.shippingrules_form.conditions.value_cart</target>
                                <callback>hide</callback>
                            </action>
                            <action name="1">
                                <target>shippingrules_form.shippingrules_form.conditions.value_customer</target>
                                <callback>hide</callback>
                            </action>
                            <action name="2">
                                <target>shippingrules_form.shippingrules_form.conditions.value_customergroup</target>
                                <callback>show</callback>
                            </action>
                        </actions>
                    </rule>
                </rules>
                <enabled>true</enabled>
            </switcherConfig>
            <validation>
                <rule name="required-entry" xsi:type="boolean">true</rule>
            </validation>
            <dataType>text</dataType>
            <label translate="true">Field</label>
            <dataScope>field</dataScope>
        </settings>
        <formElements>
            <select>
                <settings>
                    <options class="WebbyTroops\ShippingRules\Model\Source\Fields"/>
                </settings>
            </select>
        </formElements>
    </field>

Здесь вы можете видеть, что я скрываю поля на основе значения столбца поля.

Здесь в целевом узле значение равно shippingrules_form.shippingrules_form.условия.значение_карта, shippingrules_form.shippingrules_form - это имя поставщика, условия - имя набора полей, а value_cart - имя файла, которое нам нужно показать или скрыть. Надеюсь, это будет полезно. Дайте мне знать, если вам понадобятся дальнейшие объяснения.

КСТАТИ, вы можете проверить sale_rule_form.xml модуля правил продаж для справки sales_rule_form.xml.

 2
Author: Ramkishan Suthar, 2019-03-28 13:06:16

Спасибо, @Ramkishansuthar, Сделано следующим образом

<fieldset name="testingproduct">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Testing Group</item>
                <item name="provider" xsi:type="string">product</item>
                <item name="dataScope" xsi:type="string">data.product</item>
                <item name="sortOrder" xsi:type="number">2</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="opened" xsi:type="boolean">true</item>
                <item name="ns" xsi:type="string">product_form</item>
            </item>
        </argument>
        <field name="gender">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Magento\Config\Model\Config\Source\Yesno</item>
                <item name="config" xsi:type="array">
                    <item name="scopeLabel" xsi:type="string">[GLOBAL]</item>
                    <item name="dataScope" xsi:type="string">gender</item>

                    <item name="sortOrder" xsi:type="number">20</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">radioset</item>
                    <!-- <item name="formElement" xsi:type="string">select</item> -->
                    <item name="label" xsi:type="string" translate="true">My Option</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                    <item name="source" xsi:type="string">product</item>
                </item>
            </argument>
            <settings>
                <switcherConfig>
                    <enabled>true</enabled>
                    <rules>
                        <rule name="0">
                            <value>0</value>
                            <actions>
                                <action name="0">
                                    <target>product_form.product_form.testingproduct.region_id_data</target>
                                    <callback>hide</callback>
                                </action>
                                <action name="1">
                                    <target>product_form.product_form.testingproduct.region_id</target>
                                    <callback>show</callback>
                                </action>
                            </actions>
                        </rule>
                        <rule name="1">
                            <value>1</value>
                            <actions>
                                <action name="0">
                                    <target>product_form.product_form.testingproduct.region_id_data</target>
                                    <callback>show</callback>
                                </action>
                                <action name="1">
                                    <target>product_form.product_form.testingproduct.region_id</target>
                                    <callback>hide</callback>
                                </action>
                            </actions>
                        </rule>
                    </rules>
                </switcherConfig>
            </settings>
        </field>
        <field name="region_id_data">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">product</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                    <item name="imports" xsi:type="array">
                        <item name="value" xsi:type="string">${$.provider}:data.product.gender:value</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="region_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">product</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                    <item name="imports" xsi:type="array">
                        <item name="value" xsi:type="string">${$.provider}:data.product.gender:value</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
 0
Author: Kaushal Suthar, 2019-03-28 13:37:02