Magento 2.1 Ui Component : Hide and show field base on dropdown field

Question

I have a dropdown which shows day's status ;either close or open selectable form a dropdown. If the status is close , I want to collapse and hide the open and close timings within that particular field set.

Here is my code:

<fieldset name="monday_timings">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="collapsible" xsi:type="boolean">true</item>
            <item name="label" xsi:type="string" translate="true">Monday Timings</item>
            <item name="sortOrder" xsi:type="number">501</item>
        </item>
    </argument>    
    <field name="monday_status">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">NameSpace\ModuleName\Model\Timetable\Source\IsSpecial</item>
                <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Monday Status</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">item</item>
                <item name="dataScope" xsi:type="string">monday_status</item>
                <item name="sortOrder" xsi:type="number">19</item>
                <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            </item>
    </argument>
    </field>        
 <field name="monday_open_time">
<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="dataType" xsi:type="string">Timepicker</item>
        <item name="label" xsi:type="string" translate="true">Start Time</item>
        <item name="formElement" xsi:type="string">date</item>
        <item name="source" xsi:type="string">date</item>
        <item name="sortOrder" xsi:type="number">101</item>
        <item name="dataScope" xsi:type="string">monday_open_time</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="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            <item name="timeFormat" xsi:type="string">hh:mm:ss</item>
            <item name="showsTime" xsi:type="boolean">true</item>
        </item>
    </item>
</argument>
</field> 
 <field name="monday_close_time">
<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="dataType" xsi:type="string">Timepicker</item>
        <item name="label" xsi:type="string" translate="true">End Time</item>
        <item name="formElement" xsi:type="string">date</item>
        <item name="source" xsi:type="string">date</item>
        <item name="sortOrder" xsi:type="number">105</item>
        <item name="dataScope" xsi:type="string">monday_close_time</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="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            <item name="timeFormat" xsi:type="string">hh:mm:ss</item>
            <item name="showsTime" xsi:type="boolean">true</item>
        </item>
    </item>
</argument>
</field>
<field name="monday_break_time">
<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="dataType" xsi:type="string">Timepicker</item>
        <item name="label" xsi:type="string" translate="true">Break Time</item>
        <item name="formElement" xsi:type="string">date</item>
        <item name="source" xsi:type="string">date</item>
        <item name="sortOrder" xsi:type="number">103</item>
        <item name="dataScope" xsi:type="string">monday_break_time</item>            
        <item name="options" xsi:type="array">
            <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            <item name="timeFormat" xsi:type="string">hh:mm:ss</item>
            <item name="showsTime" xsi:type="boolean">true</item>
        </item>
    </item>
</argument>
</field> 
 <field name="monday_offbreak_time">
<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="dataType" xsi:type="string">Timepicker</item>
        <item name="label" xsi:type="string" translate="true">End Break</item>
        <item name="formElement" xsi:type="string">date</item>
        <item name="source" xsi:type="string">date</item>
        <item name="sortOrder" xsi:type="number">104</item>
        <item name="dataScope" xsi:type="string">monday_offbreak_time</item>            
        <item name="options" xsi:type="array">
            <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            <item name="timeFormat" xsi:type="string">hh:mm:ss</item>
            <item name="showsTime" xsi:type="boolean">true</item>
        </item>
    </item>
</argument>
</field>
</fieldset>

How can this be achieved ,any help would be appreciated. Thanks in advance for any assistance.

Answer 1

By default there are no option for this. You can create custom component and template for this. Try following way:

<field name="monday_status">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">NameSpace\ModuleName\Model\Timetable\Source\IsSpecial</item>
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">NameSpace_ModuleName/js/form/element/is-special</item>
            <item name="elementTmpl" xsi:type="string">NameSpace_ModuleName/form/element/is-special</item>
            <item name="label" xsi:type="string" translate="true">Monday Status</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">item</item>
            <item name="dataScope" xsi:type="string">monday_status</item>
            <item name="sortOrder" xsi:type="number">19</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

NameSpace/ModuleName/view/adminhtml/web/js/form/element/is-special.js

define([
    'jquery',
    'Magento_Ui/js/form/element/select'
], function ($, Select) {
    'use strict';

    return Select.extend({
        defaults: {
            customName: '${ $.parentName }.${ $.index }_input'
        },
        /**
         * Change currently selected option
         *
         * @param {String} id
         */
        selectOption: function(id){
            if(($("#"+id).val() == 0)||($("#"+id).val() == undefined)) {
                $('div[data-index="monday_open_time"]').hide();
                $('div[data-index="monday_close_time"]').hide();
                $('div[data-index="monday_break_time"]').hide();
                $('div[data-index="monday_offbreak_time"]').hide();
            } else if($("#"+id).val() == 1) {
                $('div[data-index="monday_open_time"]').show();
                $('div[data-index="monday_close_time"]').show();
                $('div[data-index="monday_break_time"]').show();
                $('div[data-index="monday_offbreak_time"]').show();
            }
        },
    });
});

NameSpace/ModuleName/view/adminhtml/web/template/form/element/is-special.html

<select class="admin__control-select" data-bind="
    event:{ change: selectOption(uid)},
    attr: {
        name: inputName,
        id: uid,
        disabled: disabled,
        'aria-describedby': noticeId
    },
    hasFocus: focused,
    optgroup: options,
    value: value,
    optionsCaption: caption,
    optionsValue: 'value',
    optionsText: 'label'"
/>

Clear cache.

Answer 2

It is also possible in UI component with the <switcherConfig>. You can refer magento sales rule module form UI component file. I had a same requirement and I did it by using following code.

<field name="allow_to_proceed" sortOrder="10" formElement="checkbox">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="source" xsi:type="string">page</item>
            <item name="default" xsi:type="number">0</item>
        </item>
    </argument>
    <settings>
        <dataType>boolean</dataType>
        <label translate="true">Allow Proceed to Checkout</label>
        <dataScope>allow_to_proceed</dataScope>
        <switcherConfig>
            <rules>
                <rule name="0">
                    <value>1</value>
                    <actions>
                        <action name="0">
                            <target>custom_module_rules_form.custom_module_rules_form.actions.skip_other_rules</target>
                            <callback>show</callback>
                        </action>
                        <action name="1">
                            <target>custom_module_rules_form.custom_module_rules_form.actions.remove_discount</target>
                            <callback>show</callback>
                        </action>
                    </actions>
                </rule>
                <rule name="1">
                    <value>0</value>
                    <actions>
                        <action name="0">
                            <target>custom_module_rules_form.custom_module_rules_form.actions.skip_other_rules</target>
                            <callback>hide</callback>
                        </action>
                        <action name="1">
                            <target>custom_module_rules_form.custom_module_rules_form.actions.remove_discount</target>
                            <callback>hide</callback>
                        </action>
                    </actions>
                </rule>
            </rules>
            <enabled>true</enabled>
        </switcherConfig>        
    </settings>
    <formElements>
        <checkbox>
            <settings>
                <valueMap>
                    <map name="false" xsi:type="number">0</map>
                    <map name="true" xsi:type="number">1</map>
                </valueMap>
                <prefer>toggle</prefer>
            </settings>
        </checkbox>
    </formElements>
</field>

Here <target> is your form_datacomponent_name.section_name.field_name .

Answer 3

You don't need to do anything extra default ui component give this functionality.

<field name="is_enable">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Is Enable</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="dataType" xsi:type="string">boolean</item>
                <item name="formElement" xsi:type="string">checkbox</item>
                <item name="prefer" xsi:type="string">toggle</item>
                <item name="valueMap" xsi:type="array">
                    <item name="true" xsi:type="number">1</item>
                    <item name="false" xsi:type="number">0</item>
                </item>
                <item name="default" xsi:type="number">0</item>
                <item name="source" xsi:type="string">from_general</item>
                <item name="dataScope" xsi:type="string">is_enable</item>
                <item name="notice" xsi:type="string" translate="true">
                    Here your message/comment go.
                </item>
                <item name="switcherConfig" xsi:type="array">
                    <item name="enabled" xsi:type="boolean">true</item>
                    <item name="rules" xsi:type="array">
                        <item name="0" xsi:type="array">
                            <item name="value" xsi:type="number">0</item>
                            <item name="actions" xsi:type="array">
                                <item name="0" xsi:type="array">
                                    <item name="target" xsi:type="string">vendor_module_form.vendor_module_form.general.field</item>
                                    <item name="callback" xsi:type="string">show</item>
                                </item>
                            </item>
                        </item>
                        <item name="1" xsi:type="array">
                            <item name="value" xsi:type="number">1</item>
                            <item name="actions" xsi:type="array">
                                <item name="0" xsi:type="array">
                                    <item name="target" xsi:type="string">vendor_module_form.vendor_module_form.general.field</item>
                                    <item name="callback" xsi:type="string">hide</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </field>  

You just have to assign your field, your form namespace, that's it!.

Answer 4

It works almost great. The only problem is that in case you edit item, it doesn't show expected fields because script run too soon.

setTimeout fix the issue:

selectOption: function(id){
    setTimeout(function() {
        if(($("#"+id).val() == 0)||($("#"+id).val() == undefined)) {
            $('div[data-index="monday_open_time"]').hide();
            $('div[data-index="monday_close_time"]').hide();
            $('div[data-index="monday_break_time"]').hide();
            $('div[data-index="monday_offbreak_time"]').hide();
        } else if($("#"+id).val() == 1) {
            $('div[data-index="monday_open_time"]').show();
            $('div[data-index="monday_close_time"]').show();
            $('div[data-index="monday_break_time"]').show();
            $('div[data-index="monday_offbreak_time"]').show();
        }
    }, 1);
},

Answer 5

I tried Himanshu's answer but it didn't work for me but this one worked:

<settings>
   <switcherConfig>
      <rules>
         <rule name="0">
            <value>0</value>
            <actions>
               <action name="0">
                   <target>vendor_module_form.vendor_module_form.general.field</target>
                   <callback>hide</callback>
               </action>
            </actions>
          </rule>
          <rule name="1">
            <value>1</value>
               <actions>
                  <action name="0">
                      <target>vendor_module_form.vendor_module_form.general.field</target>
                     <callback>show</callback>
                  </action>
               </actions>
          </rule>
       </rules>
       <enabled>true</enabled>
   </switcherConfig>
   <validation>
       <rule name="required-entry" xsi:type="boolean">true</rule>
   </validation>
</settings>

Hope that helps anyone!