Magento – Magento 2.2.X How to create system.xml in admin panel and show & hide field based on parent (depends)

adminhtmlconfigurationmagento2uicomponent

Step 1 : Create a new module (app/code/)

Step 2 : Create system.xml
(app/code/vendor/module_name/etc/adminhtml/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="dckap_configuration" translate="label" sortOrder="10">
            <label>Dckap</label>
        </tab>
        <section id="configuration" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Dckap Configuration</label>
            <tab>dckap_configuration</tab>
            <resource>Dckap_AdminConfiguration::configuration_config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
                <label>General Configuration</label>
                <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>Enable</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="connection_settings_header" translate="label" type="select" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Hide Field</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                </field>
            </group>
        </section>
    </system>
</config>

step 3 : Create a config.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
    <default>
        <configuration>
            <general>
                <enable>1</enable>
            </general>
        </configuration>
    </default>
</config>

step 4 : Finally run setup:deploy commmand

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean
php bin/magento cache:flush

Best Answer

<field id="custom_price_step_enabled" translate="label" type="select" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
         <label>Enable Custom Price Steps</label>                   
         <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>            
<field id="custom_price_step" translate="label" type="textarea" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
       <depends>
           <field id="custom_price_step_enabled">1</field>
       </depends>
       <label>Custom Price</label>
</field>

In this case when custom price step Enable, Custom Price will display.