Hjdcti

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 :)