How to make drop-down dependent on another drop-down value in admin ui component Magento 2

Question

I want to update one drop-down option on the change of another drop-down using UI Component in Magento admin section.

Like: have one drop-down with color option ex: Red, Pink, Black, etc. and another drop-down has a size value which depends on color.

How can I dynamically update size option on the change of color using UI component in Magento admin?

Answer 1

You can do this using js

in your UI component form add this feild

<field name="color">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="disabled" xsi:type="boolean">false</item>
                <item name="conponent" xsi:type="boolean">Vendor_ModuleName/js/form/element/options</item>
                <item name="label" xsi:type="string" translate="true">Color</item>
                <item name="formElement" xsi:type="string">select</item>
                <item name="enabled" xsi:type="boolean">false</item>
                <item name="source" xsi:type="string">Magento\Catalog\Model\Product\AttributeSet\Options</item>
                <item name="dataScope" xsi:type="string">color</item>
            </item>
        </argument>
    </field>

Hope it will Help You

in your

Vendor\Module\Model\Size.php

<?php

namespace Vendor\Module\Model;

class Size implements ConfigProviderInterface
{
    protected $scopeConfig;

    public function __construct(
        ScopeConfigInterface $scopeConfig
    ) {
        $this->scopeConfig = $scopeConfig;
    }

    public function getConfig()
    {
        \\ Get Your Data from Backend and form an array
        $config =[
                  [
                     'label'=>'Large',
                     'value'=> '36'
                  ],
                  [
                     'label'=>'Medium',
                     'value'=> '32'
                  ],
                  [
                     'label'=>'Small',
                     'value'=> '32'
                  ]
               ];
        return $config;
    }
}

now in

app/code/Vendor/ModuleName/etc/adminhtml/di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="size_config_provider" xsi:type="object">Vendor\Modulename\Model\Size</item>
            </argument>
        </arguments>
    </type>
</config>

now in you

Vendor\Module\view\adminhtml\web\js\options.js

Add this Code

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 value=this._super().initialValue; 
        console.log('Selected Value: ' + value);
        var color= uiRegistry.get('index = color');
        var size= uiRegistry.get('index = size');
        var arrayValues1=window.size_config_provider;
        if (color=='blue' ) {
            size.append(new Option(arrayValues1));
        } else {
            size.append(new Option(arrayValues1));
        }



        return this._super();
    },
    onUpdate: function (value) { 
        console.log('Selected Value: ' + value);

        var color= uiRegistry.get('index = color');
        var size= uiRegistry.get('index = size');
        var arrayValues1=window.size_config_provider;
        if (color=='blue' ) {
            size.append(new Option(arrayValues1));
        } else {
            size.append(new Option(arrayValues1));
        }




        return this._super();
    },
});
});