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

adminadminhtmlformsmagento2system.xml

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

enter image description here

Screen 2 – Options

enter image description here

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.

Best Answer

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 .

Related Topic