Field dependencies in the system.xml configuration file allow certain fields to be displayed or hidden based on the values of other fields. This enhances the user experience and ensures that only relevant options are presented to the admin user.
Sometimes, that dependency is on more than one value. For example, you want to display a specific field only when some specific values are selected for any field.
Understanding Field Dependencies on Multiple Values in Magento 2
Field dependencies are useful when configuration options should only be visible if certain conditions are met. For example, if you have a dropdown that allows users to select a payment method, you may want to display additional fields only if a specific payment method is chosen.
Sometimes, the dependency is on more than one value. For example, certain fields should only be displayed if a specific payment method is selected and the payment mode is a sandbox.
How to Set Field Dependencies Based On Multiple Values In Magento 2
Magento provides a way to add dependency using the <depends> tag. Below is how to create multiple values dependency in Magento 2 using <depends> tag.
Step 1: Locate the system.xml file.
Step 2: To implement dependencies, you need to add attributes <depends> to the system.xml field, as shown below.
<field id="gateway_url" translate="label" type="text" sortOrder="4" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Gateway URL</label>
<depends>
<field id="country" separator="|">ca|us|uk</field>
</depends>
</field>
We use a “separator” to assign dependency on multiple values. In the above example, the “gateway_url” field will be only visible if the “country” field value is CA, US, or UK.
Just a reminder, the separator is used to assign dependencies for multiple values in the same field. If you need to add dependencies on multiple values of a different field in the system.xml file in Magento 2, you can use the following method.
<field id="gateway_url" translate="label" type="text" sortOrder="4" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Gateway URL</label>
<depends>
<field id="enabled">1</field>
<field id="country">ca</field>
</depends>
</field>
In the example provided, we added two child attributes under <depends> to establish the Gateway URL field’s dependency on two other fields. The code above will display the Gateway URL only if the “enable” attribute value is set to 1, and the country attribute value is set to “ca”.
I hope you will implement this dependency soon in your upcoming Magento projects. Feel free to contact us if you ever require our assistance with this.
Visit our blog post “How to Make System Configuration Attributes Read-Only in Magento 2” to learn how to disable input fields in the system.xml file.