switcherConfig not working with tab layout but works with collapsible

Question

I am trying to add a switcherConfig on one of my ui component field. Its a simple show/hide rule based on value of one field.

This code Works:

<?xml version="1.0" ?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">my_form.data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">General Information</item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
    <settings>
        <buttons>
            <button name="back" class="Custom\Vendor\Block\Adminhtml\Vendor\Edit\BackButton"/>
            <button name="delete" class="Custom\Vendor\Block\Adminhtml\Vendor\Edit\DeleteButton"/>
            <button name="save" class="Custom\Vendor\Block\Adminhtml\Vendor\Edit\SaveButton"/>
            <button name="save_and_continue" class="Custom\Vendor\Block\Adminhtml\Vendor\Edit\SaveAndContinueButton"/>
        </buttons>
        <namespace>my_form</namespace>
        <dataScope>data</dataScope>
    </settings>
    <fieldset name="general">
        <settings>
            <label>General</label>
        </settings>
        <field name="source_field" formElement="select" sortOrder="10">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Custom\Vendor\Model\Source\MyOptions</item>
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">source_field</item>
                </item>
            </argument>
            <settings>
                <switcherConfig>
                    <rules>
                        <rule name="0">
                            <value>0</value>
                            <actions>
                                <action name="0">
                                    <target>my_form.my_form.general.target_field</target>
                                    <callback>hide</callback>
                                </action>
                            </actions>
                        </rule>
                        <rule name="1">
                            <value>1</value>
                            <actions>
                                <action name="0">
                                    <target>my_form.my_form.general.target_field</target>
                                    <callback>show</callback>
                                </action>
                            </actions>
                        </rule>
                    </rules>
                    <enabled>true</enabled>
                </switcherConfig>
                <dataType>number</dataType>
                <label translate="true">Parent Field</label>
                <dataScope>parent_field</dataScope>
            </settings>
        </field>
        <field name="target_field" formElement="input" sortOrder="30">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">Form</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Name</label>
                <dataScope>name</dataScope>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                    <rule name="max_text_length" xsi:type="number">100</rule>
                </validation>
            </settings>
        </field>
    </fieldset>
</form>

This code does not work:

<?xml version="1.0" ?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">my_form.data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">General Information</item>
        <!-- <item name="template" xsi:type="string">templates/form/collapsible</item> -->
    </argument>
    <settings>
        <buttons>
            <button name="back" class="Custom\Vendor\Block\Adminhtml\Vendor\Edit\BackButton"/>
            <button name="delete" class="Custom\Vendor\Block\Adminhtml\Vendor\Edit\DeleteButton"/>
            <button name="save" class="Custom\Vendor\Block\Adminhtml\Vendor\Edit\SaveButton"/>
            <button name="save_and_continue" class="Custom\Vendor\Block\Adminhtml\Vendor\Edit\SaveAndContinueButton"/>
        </buttons>
        <namespace>my_form</namespace>
        <dataScope>data</dataScope>
        <layout>
            <navContainerName>left</navContainerName>
            <type>tabs</type>
        </layout>
    </settings>
    <fieldset name="general">
        <settings>
            <label>General</label>
        </settings>
        <field name="source_field" formElement="select" sortOrder="10">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Custom\Vendor\Model\Source\MyOptions</item>
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">source_field</item>
                </item>
            </argument>
            <settings>
                <switcherConfig>
                    <rules>
                        <rule name="0">
                            <value>0</value>
                            <actions>
                                <action name="0">
                                    <target>my_form.my_form.general.target_field</target>
                                    <callback>hide</callback>
                                </action>
                            </actions>
                        </rule>
                        <rule name="1">
                            <value>1</value>
                            <actions>
                                <action name="0">
                                    <target>my_form.my_form.general.target_field</target>
                                    <callback>show</callback>
                                </action>
                            </actions>
                        </rule>
                    </rules>
                    <enabled>true</enabled>
                </switcherConfig>
                <dataType>number</dataType>
                <label translate="true">Parent Field</label>
                <dataScope>parent_field</dataScope>
            </settings>
        </field>
        <field name="target_field" formElement="input" sortOrder="30">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">Form</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Name</label>
                <dataScope>name</dataScope>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                    <rule name="max_text_length" xsi:type="number">100</rule>
                </validation>
            </settings>
        </field>
    </fieldset>
</form>

This code works if I use collapsible layout but stops working when I change it to tabs layout. Did anyone face similar issue? Any suggestion on how to solve it?

Answer 1

You can try with a JS component to show/hide your field like below.

<?xml version="1.0" ?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">my_form.data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">General Information</item>
        <!-- <item name="template" xsi:type="string">templates/form/collapsible</item> -->
    </argument>
    <settings>
        <buttons>
            <button name="back" class="Custom\Vendor\Block\Adminhtml\Vendor\Edit\BackButton"/>
            <button name="delete" class="Custom\Vendor\Block\Adminhtml\Vendor\Edit\DeleteButton"/>
            <button name="save" class="Custom\Vendor\Block\Adminhtml\Vendor\Edit\SaveButton"/>
            <button name="save_and_continue" class="Custom\Vendor\Block\Adminhtml\Vendor\Edit\SaveAndContinueButton"/>
        </buttons>
        <namespace>my_form</namespace>
        <dataScope>data</dataScope>
        <layout>
            <navContainerName>left</navContainerName>
            <type>tabs</type>
        </layout>
    </settings>
    <fieldset name="general">
        <settings>
            <label>General</label>
        </settings>
        <field name="source_field" formElement="select" sortOrder="10">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Custom\Vendor\Model\Source\MyOptions</item>
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">source_field</item>
                    <item name="component" xsi:type="string">Custom_Vendor/js/form/components/toggle-field</item>
                </item>
            </argument>
            <settings>
                <dataType>number</dataType>
                <label translate="true">Parent Field</label>
                <dataScope>parent_field</dataScope>
            </settings>
        </field>
        <field name="target_field" formElement="input" sortOrder="30">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">Form</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Name</label>
                <dataScope>name</dataScope>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                    <rule name="max_text_length" xsi:type="number">100</rule>
                </validation>
            </settings>
        </field>
    </fieldset>
</form>

Create a js file: view/adminhtml/web/js/form/components/toggle-field.js

define([
    'jquery',
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/select'
], function ($, _, uiRegistry, select) {
    'use strict';
    return select.extend({
        initialize: function (){
            var status = this._super().initialValue;
            this.fieldDepend(status);
            return this;
        },
        onUpdate: function (value) {
            this.fieldDepend(value);
            return this._super();
        },
        fieldDepend: function (value) {
            setTimeout(function () {
                var targetField = uiRegistry.get('index = target_field');
                if (value == YOUR_VALUE) {
                    targetField.show();
                } else {
                    targetField.hide();
                }
            }, 100);
            return this;
        }
    });
});

Reference: https://dolphinwebsolution.com/dependent-fields-in-ui-component-forms-in-magento-2

Answer 2

I don't know if this can answer your problematic or not, but here is something i'm doing; it's done with system.xml but i think it would be the same behaviour with an ui component

                <group id="long_credit_fr" translate="label" showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="60">
                    <label>Long credit (FR)</label>
                    <field id="active" translate="label" sortOrder="10" type="select" showInDefault="1" showInWebsite="1" showInStore="1">
                        <label>Enable</label>
                        <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                        <frontend_model>Vendor\Module\Model\Config\Source\Disable</frontend_model>
                    </field>
                </group>

This is basically just a field from the config where we specify a frontend model in order to alter it.

Then in the model definition you can have something like that

protected function _getElementHtml(AbstractElement $element)
{

     $html = $element->getElementHtml();
     return $html;
}

And basically in that html method you can alter the whole html of the element like for example adding a css class like hide that will do what you are looking for. It might not be the cleanest way but it should be working I guess.