Gsyfuy

I want to set dependency in UI form.

For ex : When I select first drop-down value then only display second drop-down.

How to do this ?

You should have two dropdown in ui form like this :

<field name="dropdown1">

    <argument name="data" xsi:type="array">

        <item name="options" xsi:type="object">VendorNameModuleNameModelConfigSourceOptions</item>

        <item name="config" xsi:type="array">

            <item name="label" xsi:type="string" translate="true">Dropdown 1</item>

            <item name="component" xsi:type="string">VendorName_ModuleName/js/form/element/options</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">dropdown1</item>

            <item name="sortOrder" xsi:type="number">100</item>

            <item name="validation" xsi:type="array">

                <item name="required-entry" xsi:type="boolean">true</item>

            </item>

        </item>

    </argument>

</field>



<field name="dropdown2">

    <argument name="data" xsi:type="array">

        <item name="config" xsi:type="array">

            <item name="label" xsi:type="string" translate="true">Dropdown 2</item>

            <item name="dataType" xsi:type="string">text</item>

            <item name="formElement" xsi:type="string">select</item>

            <item name="source" xsi:type="string">item</item>

            <item name="sortOrder" xsi:type="number">110</item>

            <item name="breakLine" xsi:type="boolean">true</item>

            <item name="visible" xsi:type="boolean">false</item>



        </item>

    </argument>

</field>

Above code, Which is parent dropdown, that's only visible value true. Child dropdown's value should be false.

Now, create your options file :

VendorNameModuleNameModelConfigSourceOptions

namespace VendorNameModuleNameModelConfigSource;



use MagentoFrameworkOptionArrayInterface;



class Options implements ArrayInterface

{

    /**

     * @return array

     */

    public function toOptionArray()

    {

        $options = [

            0 => [

                'label' => 'India',

                'value' => 'IN'

            ],

            1 => [

                'label' => 'Germany',

                'value' => 'DE'

            ],

        ];



        return $options;

    }

}

Now, create js for dependency :

app/code/VendorName/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({



        /**

         * On value change handler.

         *

         * @param {String} value

         */

        onUpdate: function (value) {

            console.log(value); // For display selected value



            var field1 = uiRegistry.get('index = dropdown2');

            if (field1.visibleValue == value) {

                field1.show();

            } else {

                field1.hide();

            }

            return this._super();

        },

    });

});

Cheers :)