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

adminhtmlmagento2.3uicomponent

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?

Best Answer

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();
    },
});
});
Related Topic