Magento 2.1 Ui Component : Hide and show field base on dropdown field
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.
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
.
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!.