Created
August 20, 2020 09:41
-
-
Save shiftenterdev/383adbceb832b3ffd46a75dd95419f43 to your computer and use it in GitHub Desktop.
Magento 2 admin ui-component dependable select field
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- vendor/module/view/adminhtml/ui_component/custom_form.xml --> | |
<field name="customer_id" formElement="select" sortOrder="8"> | |
<argument name="data" xsi:type="array"> | |
<item name="options" xsi:type="object"> | |
Strativ\CustomerConnector\Ui\Component\Listing\Column\Customer\Options | |
</item> | |
<item name="config" xsi:type="array"> | |
<item name="source" xsi:type="string">true</item> | |
<item name="label" xsi:type="string" translate="true">Customer Email</item> | |
<item name="component" xsi:type="string"> | |
Strativ_CustomerConnector/js/form/components/customer-address | |
</item> | |
<item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item> | |
<item name="filterOptions" xsi:type="boolean">true</item> | |
<item name="multiple" xsi:type="boolean">false</item> | |
<item name="disableLabel" xsi:type="boolean">true</item> | |
<item name="dataType" xsi:type="string">int</item> | |
<item name="url" xsi:type="url" path="customerconnector/ajax/address"/> | |
<item name="validation" xsi:type="array"> | |
<item name="required-entry" xsi:type="boolean">true</item> | |
</item> | |
<item name="dataScope" xsi:type="string">customer_id</item> | |
</item> | |
</argument> | |
</field> | |
<field name="billing_address_id" sortOrder="20" formElement="select"> | |
<argument name="data" xsi:type="array"> | |
<item name="options" xsi:type="object"> | |
Strativ\CustomerConnector\Ui\Component\Listing\Column\CustomerAddress\Options | |
</item> | |
<item name="config" xsi:type="array"> | |
<item name="label" xsi:type="string">Billing Address</item> | |
<item name="source" xsi:type="string">true</item> | |
<item name="dataType" xsi:type="string">int</item> | |
<item name="dataScope" xsi:type="string">billing_address_id</item> | |
<item name="validation" xsi:type="array"> | |
<item name="required-entry" xsi:type="boolean">true</item> | |
</item> | |
</item> | |
</argument> | |
<settings> | |
<visible>false</visible> | |
</settings> | |
</field> | |
<field name="shipping_address_id" sortOrder="30" formElement="select"> | |
<argument name="data" xsi:type="array"> | |
<item name="options" xsi:type="object"> | |
Strativ\CustomerConnector\Ui\Component\Listing\Column\CustomerAddress\Options | |
</item> | |
<item name="config" xsi:type="array"> | |
<item name="label" xsi:type="string">Shipping Address</item> | |
<item name="source" xsi:type="string">block</item> | |
<item name="dataType" xsi:type="string">int</item> | |
<item name="dataScope" xsi:type="string">shipping_address_id</item> | |
<item name="validation" xsi:type="array"> | |
<item name="required-entry" xsi:type="boolean">true</item> | |
</item> | |
</item> | |
</argument> | |
<settings> | |
<visible>false</visible> | |
</settings> | |
</field> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// view/adminhtml/web/js/form/components/customer-address.js | |
define([ | |
'underscore', | |
'uiRegistry', | |
'Magento_Ui/js/form/element/ui-select', | |
'jquery', | |
'domReady!', | |
'mage/url' | |
], | |
function (_, uiRegistry, select, $, url) { | |
'use strict'; | |
return select.extend({ | |
/** | |
* Init | |
*/ | |
initialize: function () { | |
this._super(); | |
let value = this.value(); | |
this.setAjaxData(value, this.url); | |
return this; | |
}, | |
/** | |
* On value change handler. | |
* @param value | |
* @returns {*} | |
*/ | |
onUpdate: function (value) { | |
this.setAjaxData(value, this.url); | |
return this._super(); | |
}, | |
/** | |
* Get ajax options | |
* @param value | |
* @param url | |
* @returns {setAjaxData} | |
*/ | |
setAjaxData: function (value, url) { | |
setTimeout(function () { | |
if ((value !== undefined) && !Array.isArray(value)) { | |
let billingAddressField = uiRegistry.get('index = billing_address_id'); | |
let billingValue = billingAddressField.value(); | |
let shippingAddressField = uiRegistry.get('index = shipping_address_id'); | |
let shippingValue = shippingAddressField.value(); | |
$.ajax({ | |
type: "POST", | |
url: url, | |
data: {customer_id: value}, | |
async: false, | |
success: function (array) { | |
billingAddressField.setOptions(array).show(); | |
shippingAddressField.setOptions(array).show(); | |
} | |
}); | |
if(shippingValue !== undefined){ | |
shippingAddressField.value(shippingValue); | |
} | |
if(billingValue !== undefined){ | |
billingAddressField.value(billingValue); | |
} | |
} | |
}); | |
return this; | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// view/adminhtml/web/js/form/element/select-address.js | |
define([ | |
'underscore', | |
'uiRegistry', | |
'Magento_Ui/js/form/element/select', | |
'Magento_Ui/js/modal/modal' | |
], function (_, uiRegistry, select, modal) { | |
'use strict'; | |
return select.extend({ | |
/** | |
* On value change handler. | |
* | |
* @param {String} value | |
*/ | |
onUpdate: function (value) { | |
console.log(value); // For display selected value | |
var field1 = uiRegistry.get('index = address_id'); | |
if (field1.visibleValue == value) { | |
field1.show(); | |
} else { | |
field1.hide(); | |
} | |
return this._super(); | |
}, | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment