7

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. enter image description here

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.

13

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.

  • Perfect, great job ! – Verdu Feb 2 '17 at 10:20
  • can you check this one magento.stackexchange.com/questions/191972/… – Verdu Sep 7 '17 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 '17 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 '17 at 9:12
  • Is it possible from $fieldset->addField() (in my block instead)? – Ankita Biswas Jul 4 at 11:33
5

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 at 6:11
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!.

  • 1
    is it possible to hide an enitire tab using switcher config? – aravind Aug 16 at 6:09
1

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

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 at 6:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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