Magento 2 : Set dependency between two dropdown in ui formAdmin form fetch values from dropdownHow to use dependency in multiple dropdown?Magento 2 Field dependency in ui formIn Magento2 For Ui component Form select Field,Dependency with another FieldUi-component form (Adding drop down field)in magento 2How can active second dropdown option for configurable product page in magento2Magento2: How can create individually custom dropdown of categories and subcategories?Show Address in two form registration magento 2Magento 2 Admin Ui form fieldset dependencyhow to create city state country dropdown UIComponent in magento 2 admin form

Was the picture area of a CRT a parallelogram (instead of a true rectangle)?

At which point does a character regain all their Hit Dice?

Will it be accepted, if there is no ''Main Character" stereotype?

Is it okay / does it make sense for another player to join a running game of Munchkin?

How could Frankenstein get the parts for his _second_ creature?

Generic lambda vs generic function give different behaviour

Efficiently merge handle parallel feature branches in SFDX

How does residential electricity work?

Teaching indefinite integrals that require special-casing

Lay out the Carpet

is this a spam?

Why are on-board computers allowed to change controls without notifying the pilots?

Curses work by shouting - How to avoid collateral damage?

How does it work when somebody invests in my business?

Is HostGator storing my password in plaintext?

Using parameter substitution on a Bash array

when is out of tune ok?

Is there any reason not to eat food that's been dropped on the surface of the moon?

Is there a good way to store credentials outside of a password manager?

How can I replace every global instance of "x[2]" with "x_2"

What defines a dissertation?

How do I define a right arrow with bar in LaTeX?

What's a natural way to say that someone works somewhere (for a job)?

Hostile work environment after whistle-blowing on coworker and our boss. What do I do?



Magento 2 : Set dependency between two dropdown in ui form


Admin form fetch values from dropdownHow to use dependency in multiple dropdown?Magento 2 Field dependency in ui formIn Magento2 For Ui component Form select Field,Dependency with another FieldUi-component form (Adding drop down field)in magento 2How can active second dropdown option for configurable product page in magento2Magento2: How can create individually custom dropdown of categories and subcategories?Show Address in two form registration magento 2Magento 2 Admin Ui form fieldset dependencyhow to create city state country dropdown UIComponent in magento 2 admin form













1















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




























    1















    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


























      1












      1








      1








      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 12 mins ago









      ABHISHEK TRIPATHI

      1,9801726




      1,9801726










      asked 26 mins ago









      Mehta PremMehta Prem

      325




      325




















          1 Answer
          1






          active

          oldest

          votes


















          0














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






          share|improve this answer






















            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









            0














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






            share|improve this answer



























              0














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






              share|improve this answer

























                0












                0








                0







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






                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="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










                answered 15 mins ago









                Rohan HapaniRohan Hapani

                6,70631865




                6,70631865



























                    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

                    Can not update quote_id field of “quote_item” table magento 2Magento 2.1 - We can't remove the item. (Shopping Cart doesnt allow us to remove items before becomes empty)Add value for custom quote item attribute using REST apiREST API endpoint v1/carts/cartId/items always returns error messageCorrect way to save entries to databaseHow to remove all associated quote objects of a customer completelyMagento 2 - Save value from custom input field to quote_itemGet quote_item data using quote id and product id filter in Magento 2How to set additional data to quote_item table from controller in Magento 2?What is the purpose of additional_data column in quote_item table in magento2Set Custom Price to Quote item magento2 from controller

                    How to solve knockout JS error in Magento 2 Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?(Magento2) knockout.js:3012 Uncaught ReferenceError: Unable to process bindingUnable to process binding Knockout.js magento 2Cannot read property `scopeLabel` of undefined on Product Detail PageCan't get Customer Data on frontend in Magento 2Magento2 Order Summary - unable to process bindingKO templates are not loading in Magento 2.1 applicationgetting knockout js error magento 2Product grid not load -— Unable to process binding Knockout.js magento 2Product form not loaded in magento2Uncaught ReferenceError: Unable to process binding “if: function()return (isShowLegend()) ” magento 2

                    Nissan Patrol Зміст Перше покоління — 4W60 (1951-1960) | Друге покоління — 60 series (1960-1980) | Третє покоління (1980–2002) | Четверте покоління — Y60 (1987–1998) | П'яте покоління — Y61 (1997–2013) | Шосте покоління — Y62 (2010- ) | Посилання | Зноски | Навігаційне менюОфіційний український сайтТест-драйв Nissan Patrol 2010 7-го поколінняNissan PatrolКак мы тестировали Nissan Patrol 2016рвиправивши або дописавши її