2

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?

0

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();
    },
});
});
  • Can you please let me know how can I pass dynamic collection value in the option. – poojan sharma Jul 27 at 16:16
  • how much values you have?? – Waqar Ali Jul 27 at 20:40
  • its n number of dynamically added in Magento back-end – poojan sharma Jul 28 at 7:31
  • check my updated answer – Waqar Ali Jul 28 at 9:34
  • can you please let me know where I have to call option.js file also want to know code of <item name="conponent" xsi:type="boolean">Vendor_ModuleName/js/form/element/options</item>. – poojan sharma Aug 20 at 7:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.