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.

Sohel Rana · Accepted Answer · 2017-02-02 09:47:17Z

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.

can you check this one magento.stackexchange.com/questions/191972/… — Verdu, Sep 7, 2017 at 10:24
the above question you answered works great, but there is one flaw -take for example two scenarios 1. For the first time when we create a new entry the select is set to close it is Ok , it hides the rest of the associated fields. 2. Once we create an entry and save it , next we go to edit the same entry the select is set to Open ,but the underlying fields does not display /visible . To view the hidden fields we have to first switch to close and then when we select it open the fields appear. if the select is set to open by default the underlying hidden fields must be visible . — Verdu, Sep 22, 2017 at 9:12
On page load by default we get the values in the variable ($("#"+id).val() are undefined and zero. Is there any thing we are missing or how can we modify this shortcoming. — Verdu, Sep 22, 2017 at 9:12
Is it possible from $fieldset->addField() (in my block instead)? — Ankita Biswas, Jul 4, 2019 at 11:33

Maikel Koek · Accepted Answer · 2018-10-16 20:09:26Z

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 .

Is it possible from $fieldset->addField() (in my block instead)? — Adarsh Khatri, Jun 14, 2019 at 6:11

Himanshu · Accepted Answer · 2018-10-05 10:02:52Z

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

is it possible to hide an enitire tab using switcher config? — aravind, Aug 16, 2019 at 6:09

Łukasz Linczewski · Accepted Answer · 2018-01-23 23:44:21Z

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);
},

Juliano Vargas · Accepted Answer · 2019-05-17 11:22:02Z

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!

is it possible to hide an enitire tab using switcher config? — aravind, Aug 16, 2019 at 6:09

Stack Exchange Network

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

5 Answers 5

Your Answer

Not the answer you're looking for? Browse other questions tagged
magento-2.1
adminhtml
uicomponent
fieldsets
or ask your own question.

Linked

Hot Network Questions

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

5 Answers 5

Your Answer

Sign up or log in

Post as a guest

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

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
magento-2.1
adminhtml
uicomponent
fieldsets
or ask your own question.