Skip to content

Instantly share code, notes, and snippets.

@shiftenterdev
Created August 20, 2020 09:41
Show Gist options
  • Save shiftenterdev/383adbceb832b3ffd46a75dd95419f43 to your computer and use it in GitHub Desktop.
Save shiftenterdev/383adbceb832b3ffd46a75dd95419f43 to your computer and use it in GitHub Desktop.
Magento 2 admin ui-component dependable select field
<!-- 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>
// 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;
}
});
});
// 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