Hi @Vivek Singh
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'"
/>
Reference from Stack-overflow.
https://magento.stackexchange.com/questions/157575/magento-2-1-ui-component-hide-and-show-field-base...
I have already implemented the same.
I hope it will help you!
