Magento 2 Ui Form field dependency

magento.stackexchange https://magento.stackexchange.com/questions/267835

Question

Just for learning

I've following fields in my Admin Product edit form

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

Which is working fine on yes no option(boolean values only) but I want to add a condition in following 

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

Like if the value is 3 only then make it visible.

Is it possible to add a condition in this XML?

Update

Thanks, @Ramkishan Suthar, It is a great help but still, it's not working.

<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

Was it helpful?

Solution

It can be done from xml. Please follow below code.

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

Here you can see I have hide fields on the basis of value of Field column.

Here in target node value is shippingrules_form.shippingrules_form.conditions.value_cart, shippingrules_form.shippingrules_form is provider name, conditions is fieldset name and value_cart is filed name which we need to show or hide. Hope it will be helpful. Let me know if you need further explanation.

BTW you can check sale_rule_form.xml of sales rule module for reference sales_rule_form.xml.

OTHER TIPS

Thanks, @RamkishanSuthar, Done in following way

<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>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top