Magento 2 : Set dependency between two dropdown in ui form The Next CEO of Stack OverflowHow to use dependency in multiple dropdown?Dependency in admin form field in magento 2How to set default value for text and select field in admin new UI form in magento 2Magento 2 Field dependency in ui formIn Magento2 For Ui component Form select Field,Dependency with another FieldDynamic number of text fields when a value from dropdown is selected in Magento 2 system configuration backendHow to create a parent category dropdown in admin form in magento2.2Dropdown in admin formMagento 2 Admin Ui form fieldset dependencyHow to make a field dropdown with value in Dynamic Row magento 2 Admin

Return the Closest Prime Number

Is HostGator storing my password in plaintext?

Why do remote companies require working in the US?

What is meant by a M next to a roman numeral?

What is the point of a new vote on May's deal when the indicative votes suggest she will not win?

How do we know the LHC results are robust?

Why didn't Theresa May consult with Parliament before negotiating a deal with the EU?

How do scammers retract money, while you can’t?

Why didn't Khan get resurrected in the Genesis Explosion?

The King's new dress

Solution of this Diophantine Equation

Only print output after finding pattern

Unreliable Magic - Is it worth it?

How to Reset Passwords on Multiple Websites Easily?

Fastest way to shutdown Ubuntu Mate 18.10

What happens if you roll doubles 3 times then land on "Go to jail?"

Is the concept of a "numerable" fiber bundle really useful or an empty generalization?

When airplanes disconnect from a tanker during air to air refueling, why do they bank so sharply to the right?

How to safely derail a train during transit?

What's the point of interval inversion?

Text adventure game code

What can we do to stop prior company from asking us questions?

Horror movie/show or scene where a horse creature opens its mouth really wide and devours a man in a stables

Science fiction novels about a solar system spanning civilisation where people change their bodies at will



Magento 2 : Set dependency between two dropdown in ui form



The Next CEO of Stack OverflowHow to use dependency in multiple dropdown?Dependency in admin form field in magento 2How to set default value for text and select field in admin new UI form in magento 2Magento 2 Field dependency in ui formIn Magento2 For Ui component Form select Field,Dependency with another FieldDynamic number of text fields when a value from dropdown is selected in Magento 2 system configuration backendHow to create a parent category dropdown in admin form in magento2.2Dropdown in admin formMagento 2 Admin Ui form fieldset dependencyHow to make a field dropdown with value in Dynamic Row magento 2 Admin










2















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 ?










share|improve this question




























    2















    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 ?










    share|improve this question


























      2












      2








      2








      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 ?










      share|improve this question
















      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 ?







      magento2 ui-form dependency






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited yesterday









      ABHISHEK TRIPATHI

      1,9801726




      1,9801726










      asked yesterday









      Mehta PremMehta Prem

      395




      395




















          1 Answer
          1






          active

          oldest

          votes


















          1














          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="visibleValue" xsi:type="string">DE</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 :)






          share|improve this answer




















          • 1





            He'd be better off with an "imports" node.

            – Shawn Abramson
            yesterday











          Your Answer








          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "479"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f267537%2fmagento-2-set-dependency-between-two-dropdown-in-ui-form%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          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="visibleValue" xsi:type="string">DE</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 :)






          share|improve this answer




















          • 1





            He'd be better off with an "imports" node.

            – Shawn Abramson
            yesterday















          1














          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="visibleValue" xsi:type="string">DE</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 :)






          share|improve this answer




















          • 1





            He'd be better off with an "imports" node.

            – Shawn Abramson
            yesterday













          1












          1








          1







          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="visibleValue" xsi:type="string">DE</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 :)






          share|improve this answer















          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="visibleValue" xsi:type="string">DE</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 :)







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited 13 hours ago

























          answered yesterday









          Rohan HapaniRohan Hapani

          6,76331865




          6,76331865







          • 1





            He'd be better off with an "imports" node.

            – Shawn Abramson
            yesterday












          • 1





            He'd be better off with an "imports" node.

            – Shawn Abramson
            yesterday







          1




          1





          He'd be better off with an "imports" node.

          – Shawn Abramson
          yesterday





          He'd be better off with an "imports" node.

          – Shawn Abramson
          yesterday

















          draft saved

          draft discarded
















































          Thanks for contributing an answer to Magento Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f267537%2fmagento-2-set-dependency-between-two-dropdown-in-ui-form%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Sum ergo cogito? 1 nng

          三茅街道4182Guuntc Dn precexpngmageondP