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?
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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP