TransWikia.com

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

Magento Asked by poojan sharma on December 21, 2021

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?

One 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">MagentoCatalogModelProductAttributeSetOptions</item>
                <item name="dataScope" xsi:type="string">color</item>
            </item>
        </argument>
    </field>

Hope it will Help You

in your

VendorModuleModelSize.php

<?php

namespace VendorModuleModel;

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="MagentoCheckoutModelCompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="size_config_provider" xsi:type="object">VendorModulenameModelSize</item>
            </argument>
        </arguments>
    </type>
</config>

now in you

VendorModuleviewadminhtmlwebjsoptions.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();
    },
});
});

Answered by Real Magento Man on December 21, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP