7

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>
8

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.

| improve this answer | |
  • 2
    This always disables the input. And if I set xsi:type="boolean" an exception appears: Exception #0 (InvalidArgumentException): Boolean value is expected – Andres Rojas Orozco Jul 6 '18 at 16:41
  • Actually, it unable to parse to boolean. – Knight017 Dec 18 '18 at 6:09
  • Hi, can you please upload m2.3 file location. Because, I didn't found anything in that. – Emipro Technologies Pvt. Ltd. May 7 '19 at 11:04
  • does not work, is not respecting the condition, is always disabled – Ilgner de Oliveira Oct 30 '19 at 15:48
10

I tried Konstantin's solution but for some reason, it didn't work for me.

I managed to make it work by using the following syntax:

<field name="name">
    <argument>
      ...
    </argument>
    <settings>
        <imports>
            <link name="disabled">${ $.provider}:data.do_we_hide_it</link>
        </imports>
    </settings>
</field>

Hope it helps.

Edit :

The argument node is not required but if it exists, settings node must be placed after. It is the last one in the xsd definition in M2.3. The xml comes in addition with the accepted answer.

| improve this answer | |
  • How to make field disabled only in edit form not in new form? – Dhaduk Mitesh May 15 '18 at 6:20
  • I used this option but an exception occured: Exception #0 (Magento\Framework\Exception\LocalizedException): Element 'settings': This element is not expected. – Andres Rojas Orozco Jul 6 '18 at 16:46
  • This one works for me, the solution from Konstantin Gerasimov is the one didn't work – Juliano Vargas May 21 '19 at 9:37
  • @AndresRojasOrozco and other people using this solution (that works just fine). The order of nodes is important, settings should be put after argument. You can check the vendor/magento/module-ui/view/base/ui_component/etc/definition/field.xsd where configurable refers to ui_settings.xsd in the same directory. I will try to amend the answer to have it fitting the reality. – Christophe Ferreboeuf Jul 3 '19 at 11:58
  • @Alessandro Ronchi How can we do this for FieldSet do you know? I've tried but it doesn't work! – Juliano Vargas Feb 25 at 12:48

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.