Magento 2 Field dependency in ui form

Question

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> 

Answer 1

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