Show/Hide a field in an admin form based on value of another field

Question

My module has 2 tabs. In one, there is a text field for an API Key. In the other, a select field gets populated based off an HTTP request that is made with the API Key. I have all this working fine. However, if the user has not entered an API key, I'd like to display a message to them about the need to do so, rather than showing the empty Options field.

Screen 1 - API Key

Screen 2 - Options

I'm hoping there is a way to do this purely through system.xml. I'd also be ok with just injecting some custom JavaScript onto the page, but I'd need instructions on how to do that as well.

Answer 1

It is also possible in UI component with the <switcherConfig>. You can refer magento sales rule module form UI component file. I had a same requirement and I did it by using following code.

<field name="allow_to_proceed" sortOrder="10" formElement="checkbox">
<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="source" xsi:type="string">page</item>
        <item name="default" xsi:type="number">0</item>
    </item>
</argument>
<settings>
    <dataType>boolean</dataType>
    <label translate="true">Allow Proceed to Checkout</label>
    <dataScope>allow_to_proceed</dataScope>
    <switcherConfig>
        <rules>
            <rule name="0">
                <value>1</value>
                <actions>
                    <action name="0">
                        <target>custom_module_rules_form.custom_module_rules_form.actions.skip_other_rules</target>
                        <callback>show</callback>
                    </action>
                    <action name="1">
                        <target>custom_module_rules_form.custom_module_rules_form.actions.remove_discount</target>
                        <callback>show</callback>
                    </action>
                </actions>
            </rule>
            <rule name="1">
                <value>0</value>
                <actions>
                    <action name="0">
                        <target>custom_module_rules_form.custom_module_rules_form.actions.skip_other_rules</target>
                        <callback>hide</callback>
                    </action>
                    <action name="1">
                        <target>custom_module_rules_form.custom_module_rules_form.actions.remove_discount</target>
                        <callback>hide</callback>
                    </action>
                </actions>
            </rule>
        </rules>
        <enabled>true</enabled>
    </switcherConfig>        
</settings>
<formElements>
    <checkbox>
        <settings>
            <valueMap>
                <map name="false" xsi:type="number">0</map>
                <map name="true" xsi:type="number">1</map>
            </valueMap>
            <prefer>toggle</prefer>
        </settings>
    </checkbox>
</formElements>

Here <target> is your form_datacomponent_name.section_name.field_name .

Answer 2

You don't need to do anything extra default ui component give this functionality. you can use this code & change field, form namespace vendor_module_form, fieldset general. That's all!!

<field name="is_enable">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Is Enable</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="dataType" xsi:type="string">boolean</item>
                <item name="formElement" xsi:type="string">checkbox</item>
                <item name="prefer" xsi:type="string">toggle</item>
                <item name="valueMap" xsi:type="array">
                    <item name="true" xsi:type="number">1</item>
                    <item name="false" xsi:type="number">0</item>
                </item>
                <item name="default" xsi:type="number">0</item>
                <item name="source" xsi:type="string">from_general</item>
                <item name="dataScope" xsi:type="string">is_enable</item>
                <item name="notice" xsi:type="string" translate="true">
                    Here your message/comment go.
                </item>
                <item name="switcherConfig" xsi:type="array">
                    <item name="enabled" xsi:type="boolean">true</item>
                    <item name="rules" xsi:type="array">
                        <item name="0" xsi:type="array">
                            <item name="value" xsi:type="number">0</item>
                            <item name="actions" xsi:type="array">
                                <item name="0" xsi:type="array">
                                    <item name="target" xsi:type="string">vendor_module_form.vendor_module_form.general.field</item>
                                    <item name="callback" xsi:type="string">show</item>
                                </item>
                            </item>
                        </item>
                        <item name="1" xsi:type="array">
                            <item name="value" xsi:type="number">1</item>
                            <item name="actions" xsi:type="array">
                                <item name="0" xsi:type="array">
                                    <item name="target" xsi:type="string">vendor_module_form.vendor_module_form.general.field</item>
                                    <item name="callback" xsi:type="string">hide</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </field>  

Answer 3

You can simply use the depends tag in the system.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="Sathya" translate="label" sortOrder="10">
            <label>Sathya</label>
        </tab>
        <section id="ProductSliderSection" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Product Slider</label>
            <tab>Sathya</tab>
            <resource>Sathya_ProductSlider::ProductSlider</resource>
            <group id="productSlider" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                <label>General Configuration</label>
                <field id="moduleEnable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Module</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="numberOfProducts" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Number of Product in the Slider</label>
                    <comment>No decimal points</comment>
                    <depends>
                        <field id="moduleEnable">1</field>
                    </depends>
                </field>
            </group>
        </section>
    </system>
</config>

Answer 4

This worked for me:

<field name="extension_attributes.use_custom_minimum_order_amount" formElement="checkbox" sortOrder="75">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="number">0</item>
                </item>
            </argument>
            <settings>
                <dataScope>extension_attributes.use_custom_minimum_order_amount</dataScope>
                <dataType>boolean</dataType>
                <label translate="true">Use custom minimum order amount</label>
                <switcherConfig>
                    <rules>
                        <rule name="0">
                            <value>0</value>
                            <actions>
                                <action name="0">
                                    <target>custom_module_form.custom_module_form.general.extension_attributes.minimum_order_amount</target>
                                    <callback>hide</callback>
                                </action>
                            </actions>
                        </rule>
                        <rule name="1">
                            <value>1</value>
                            <actions>
                                <action name="0">
                                    <target>custom_module_form.custom_module_form.general.extension_attributes.minimum_order_amount</target>
                                    <callback>show</callback>
                                </action>
                            </actions>
                        </rule>
                    </rules>
                    <enabled>true</enabled>
                </switcherConfig>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <valueMap>
                            <map name="false" xsi:type="number">0</map>
                            <map name="true" xsi:type="number">1</map>
                        </valueMap>
                        <prefer>toggle</prefer>
                    </settings>
                </checkbox>
            </formElements>
        </field>
        <field name="extension_attributes.minimum_order_amount" formElement="input" sortOrder="80">
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataScope>extension_attributes.minimum_order_amount</dataScope>
                <dataType>string</dataType>
                <label translate="true">Minimum order amount</label>
            </settings>
        </field>