How to add field dependency in admin customer form UI component

Question

I'm trying to add field dependency with two custom fields added to admin customer form by extending customer_form.xml in local extension.

Here is one answer

Dependency in admin form field in magento 2, but for default admin from is not ui component.

Can it be done with just XML ?

Answer 1

First you will have to Create ’custom_form.xml’ in folder ‘Vendor/Module/view/adminhtml/ui_component’.

Within the form define your main field as mentioned below

 <field name="main_field">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Type</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">number</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="source" xsi:type="string">main_field</item>
                    <item name="dataScope" xsi:type="string">main_field</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                    <item name="options" xsi:type="array">
                            <item name="0" xsi:type="array">
                                <item name="label" xsi:type="string">Dependent Field 1</item>
                                <item name="value" xsi:type="string">0</item>
                            </item>
                            <item name="2" xsi:type="array">
                                <item name="label" xsi:type="string">Dependent Field 1</item>
                                <item name="value" xsi:type="string">2</item>
                            </item>
                    </item>
                </item>
            </argument>
    </field>

I have defined a select type drop down field with two options labelled “Dependent Field 1” and “Dependent Field 1”. Now to show and hide the fields according to the selected option type all you need to add is the just after the settings tag. We need to add rules to the switcher config which defines which component will be displayed on selection from the main field.

  <settings>
    <switcherConfig>
        <rules>
            <rule name="0">
                <value>0</value>
                <actions>
                    <action name="0">
                        <target>custom_form.custom_form.custom_form_details.dependent1</target>
                        <callback>show</callback>
                    </action>
                    <action name="1">
                        <target>custom_form.custom_form.custom_form_details.dependent2</target>
                        <callback>hide</callback>
                    </action>
                </actions>
            </rule>
            <rule name="1">
                <value>1</value>
                <actions>
                    <action name="0">
                        <target>custom_form.custom_form.custom_form_details.dependent1</target>
                        <callback>hide</callback>
                    </action>
                    <action name="1">
                        <target>custom_form.custom_form.custom_form_details.dependent2</target>
                        <callback>show</callback>
                    </action>
                </actions>
            </rule>
        </rules>
<enabled>true</enabled>

– define the registry key where the dependent field component is saved in the registry. Here custom_form is the name of the form and custom_form_details is the field set name. – a callable method available in the component. If you use a custom component, you can call that method.

After adding the switcher you need to define your dependent fields

<field name="dependent1">
<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="sortOrder" xsi:type="number">6</item>
        <item name="dataType" xsi:type="string">text</item>
        <item name="label" xsi:type="string" translate="true">Dependent Field 1</item>
        <item name="formElement" xsi:type="string">input</item>
        <item name="source" xsi:type="string">dependent1</item>
        <item name="dataScope" xsi:type="string">dependent1</item>
            <item name="validation" xsi:type="array">
            <item name="required-entry" xsi:type="boolean">true</item>
        </item>
    </item>
</argument>

6 text Dependent Field 2 input dependent2 dependent2 true

once defined the output will look like this!

Hope this will help you guys!!

Happy Coding!!