Dependent fields in UI component forms in Magento 2 without Javascript for boolean fields

In this article, we will discuss a simpler method of handling field dependencies when the parent fields are boolean (meaning the values are either 0 or 1). The switcher config discussed in the earlier tutorial can handle these cases as well, but the switcher config is bigger in size and the method I am going to show you in today’s article is much smaller.

Note: This method will only work on parent fields with boolean values and for values other than 0 or 1, you can use the switcher config method. The field can be a dropdown, a switcher, or any other field whose values are going to be either 0 o 1.

A basic form field defined in your ui_component/*_form.xml will look something as follows:

<field formElement="checkbox" name="is_active" sortOrder="100">
    ...
    <settings>
        ...
        <dataScope>is_active</dataScope>
        ...
    </settings>
    <formElements>
        <checkbox>
            <settings>
                <valueMap>
                    <map name="false" xsi:type="string">0</map>
                    <map name="true" xsi:type="string">1</map>
                </valueMap>
                <prefer>toggle</prefer>
            </settings>
        </checkbox>
    </formElements>
</field>

This is a switcher field, and if you are not aware of how it works, <formElements>...</formElements> in the above field XML has a valueMap which maps false value of the switcher to 0 and the true value to 1. So when the switcher is off it’s value in 0 and when it’s on the value is 1.

Next we want to change the visibility of the dependent field, let’s say a text field, based on the state of the switcher field. To do so, we will use the exports linking property of UI components in Magento 2.

exports property is used to copy a local value of the field to some external entity (in our case, the dependent text field). When the external entity property is not a function, the value of the property is set to the value exported, and when it is a function, the local value of the field is passed an argument to this function

Let us consider the name of our dependent field (text field) is description.

Inside the <settings>...</settings> node of the parent field XML config define the exports property shown below:

<exports>
    <link name="checked">${$.parentName}.description:visible</link>
</exports>

The general format is:

<link name="<!-- property of the current field you want to export -->">
    ${$.parentName}.<!--name of the external field-->:<!-- property of the external field you want the local value to be exported -->
</link>

You can do the same thing using the imports linking property of UI components in Magento 2. But this time, you will have to add the imports property to the dependent field (text field) and not the switch field. This is going to be the exact opposite of what we did before.

Let us consider our text field XML looks like this:

<field formElement="input" name="description" sortOrder="90">
    ...
    <settings>
        ...
        <dataScope>url</dataScope>
        <imports>
            <link name="visible">${$.parentName}.is_active:checked</link>
        </imports>
    </settings>
</field>

This time we import the external value of the checked property of the switch field to the local visible observable of the input field.

The general link format in this case is:

<link name="<!-- local property/function that needs to be called -->">
    ${$.parentName}.<!--name of the parent field-->:<!-- property of the parent field you want the local value to be imported at -->
</link>

The above examples show you how to toggle the visibility (show/hide) of the fields. You can use this same method to enable/disable the field (if you don’t want to hide them). To do so we use the disabled property in place of visible.

<!-- In the parent field <settings>...</settings> -->
<exports>
    <link name="checked">${$.parentName}.description:disabled</link>
</exports>

<!-- or -->

<!-- In the dependent field <settings>...</settings> -->
<imports>
    <link name="disabled">${$.parentName}.is_active:checked</link>
</imports>

You can use this same method to toggle visibility by overriding an existing field component to handle values other than boolean.

Hint: override the field component by passing defining a custom component <field component="{Vendor_Module}/js/**/{your-overridden-component-name}" ...>..</field> and use the imports or exports properties accordingly.

Feel free to contact us at support@hungersoft.com