6

I have created a ui component form. I want to display some fields based on status value. Display other fields only if status is 1. How Can I achieve it?

Here is my code

<field name="status">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">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">status</item>
                <item name="dataScope" xsi:type="string">status</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>  
    <field name="category_ids">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Magento\Catalog\Ui\Component\Product\Form\Categories\Options</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Category</item>
                    <item name="componentType" xsi:type="string">field</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="component" xsi:type="string">Magento_Catalog/js/components/new-category</item>
                    <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                    <item name="filterOptions" xsi:type="boolean">true</item>
                    <item name="showCheckbox" xsi:type="boolean">true</item>
                    <item name="disableLabel" xsi:type="boolean">true</item>
                    <item name="multiple" xsi:type="boolean">true</item>
                    <item name="levelsVisibility" xsi:type="number">1</item>
                    <item name="required" xsi:type="boolean">false</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                    <item name="listens" xsi:type="array">
                        <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="custom_field">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Custom Field</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">custom_field</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                    <item name="options" xsi:type="array">                       
                        <item name="0" xsi:type="array">
                            <item name="label" xsi:type="string">No</item>
                            <item name="value" xsi:type="string">0</item>
                        </item>
                        <item name="1" xsi:type="array">
                            <item name="label" xsi:type="string">Yes</item>
                            <item name="value" xsi:type="string">1</item>
                        </item>
                    </item>
                </item>
            </argument>
        </field> 
0

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

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.