1

I have an admin grid form. The form has a checkbox. If the checkbox is checked, an additional required field should appear. If the checkbox is unchecked, the additional field should disappear.

While saving the form when the checkbox is checked and the required field is empty there should be an error (required field empty).

While saving the form when the checkbox is unchecked there should be no error.

I was using Contao before. Contao has a feature like this (solved in 3 lines of code).

Does magento have such functionality?

1 Answer 1

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!!

Please accept answer if you found it as right answer

4
  • This answer solved the problem to show or hide the fields. Thank you. But, ... the values of the hidden fields are still in the post values. Do you also have a solution for this? May 11, 2021 at 16:01
  • @frank please try "disable" instead of "hide". May 12, 2021 at 3:49
  • "disabled" or "disable" instead of "hide". May 12, 2021 at 4:06
  • Thanks I tried that, but the values are still send as post values. So I tried to overwrite the existing values with null, but does not work. So I opened a new question for this topic. Thank you for your help! magento.stackexchange.com/questions/337057/… May 12, 2021 at 14:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.