Magento 2 UI Component – Disabling a Field Based on Condition

fieldsetsmagento2modeluicomponent

I have a UI component defining some fields. How do I disable the field upon a certain condition? In other words, use <item name="disabled" xsi:type="boolean">true</item> only when a condition is met. Here's my field.

<field name="name">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Profile Name</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">profile</item>
                <item name="dataScope" xsi:type="string">name</item>
            </item>
        </argument>
    </field>

Best Answer

First set:

<item name="disabled" xsi:type="string">${ $.provider }:data.do_we_hide_it</item>

Suppose Vendor\Extension\Model\Notification\DataProvider is your data provider for UI:

<dataSource name="notification_edit_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Vendor\Extension\Model\Notification\DataProvider</argument>
        <argument name="name" xsi:type="string">notification_edit_data_source</argument>

Then in its getData function add the following lines:

public function getData(){
.....
.....
if(condition1)
    $this->loadedData[$entity_id]['do_we_hide_it'] = true;
else
    $this->loadedData[$entity_id]['do_we_hide_it'] = false;

See the core files vendor/magento/module-catalog/view/adminhtml/ui_component/category_form.xml line 377 and vendor/magento/module-catalog/Model/Category/DataProvider.php line 303 for an example.

Related Solutions

Magento 2 – Field Dependency in UI Form

I have added a js component in the status field

  <field name="status">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Statu

    s</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">status</item>
                        <item name="dataScope" xsi:type="string">status</item>
                        <item name="component" xsi:type="string">NameSpace_Modulename/js/form/element/options</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="0" xsi:type="array">
                                    <item name="label" xsi:type="string">Pending</item>
                                    <item name="value" xsi:type="string">0</item>
                                </item>
                                <item name="1" xsi:type="array">
                                    <item name="label" xsi:type="string">Allowed</item>
                                    <item name="value" xsi:type="string">1</item>
                                </item>
                                <item name="2" xsi:type="array">
                                    <item name="label" xsi:type="string">Not Allowed</item>
                                    <item name="value" xsi:type="string">2</item>
                                </item>
                        </item>
                    </item>
                </argument>
            </field>
            <field name="title">
                 <argument name="data" xsi:type="array">
                     <item name="config" xsi:type="array">
                         <item name="label" xsi:type="string">Title</item>
                         <item name="visible" xsi:type="boolean">true</item>
                         <item name="dataType" xsi:type="string">text</item>
                         <item name="formElement" xsi:type="string">textarea</item>
                         <item name="source" xsi:type="string">title</item>
                         <item name="required" xsi:type="boolean">true</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/options.js

define([
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/select',
    'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
    'use strict';
    return select.extend({      

        initialize: function (){

            var field1 = uiRegistry.get('index = title');
            var field2 = uiRegistry.get('index = custom_field');
            var status = this._super().initialValue;    
            if (status == 1) {
                field1.show();
                field2.show();
            } else{
               field2.hide();
               field1.hide();
            }
            return this;

        },      

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {

            var field1 = uiRegistry.get('index = title');
            var field2 = uiRegistry.get('index = custom_field');
            var field3 = uiRegistry.get('index = category_ids');
            if (value == 1) {
                field1.show();
                field2.show();
                field3.show();

            } else {
                field1.hide();
                field2.hide();
                field3.hide();

            }           
            return this._super();
        },
    });
});

Magento 2.1 – Hide and Show Field Based on Dropdown Selection

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.

Best Answer

Related Solutions

Magento 2 – Field Dependency in UI Form

Magento 2.1 – Hide and Show Field Based on Dropdown Selection

Related Topic