Try this (Note: Don't forget to replace the line "Namespace" and the line "ModuleName" with your values):
<field name="field1">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Namespace\ModuleName\Model\Config\Source\Options</item>
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Parent Option</item>
<item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">number</item>
<item name="formElement" xsi:type="string">select</item>
<item name="source" xsi:type="string">item</item>
<item name="dataScope" xsi:type="string">field1</item>
<item name="sortOrder" xsi:type="number">210</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="field2Depend1">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Field 1</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="sortOrder" xsi:type="number">220</item>
<item name="breakLine" xsi:type="boolean">true</item>
<item name="visibleValue" xsi:type="string">2</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>
<field name="field3Depend1">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Field 2</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="sortOrder" xsi:type="number">230</item>
<item name="breakLine" xsi:type="boolean">true</item>
<item name="visibleValue" xsi:type="string">0</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>
Where:
- The child elements visibility is set by default as
false
;
- The
visibleValue
- is field1
value when element should be
visible;
Namespace\ModuleName\Model\Config\Source\Options
namespace Namespace\ModuleName\Model\Config\Source;
use Magento\Framework\Option\ArrayInterface;
class Options implements ArrayInterface
{
/**
* @return array
*/
public function toOptionArray()
{
$options = [
0 => [
'label' => 'Please select',
'value' => 0
],
1 => [
'label' => 'Option 1',
'value' => 1
],
2 => [
'label' => 'Option 2',
'value' => 2
],
3 => [
'label' => 'Option 3',
'value' => 3
],
];
return $options;
}
}
app/code/Namespace/ModuleName/view/adminhtml/web/js/form/element/options.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('Selected Value: ' + value);
var field1 = uiRegistry.get('index = field2Depend1');
if (field1.visibleValue == value) {
field1.show();
} else {
field1.hide();
}
var field2 = uiRegistry.get('index = field3Depend1');
if (field2.visibleValue == value) {
field2.show();
} else {
field2.hide();
}
return this._super();
},
});
});
Result:
Value 0 selected:
Value 1 selected:
Value 2 selected:
Value 3 selected:
PS: Possibly it not the best solution, but it shall help you
My main problem that DataProvider::getData() function weren't executed was because it didn't know which row to populate. When I added /settings_id/1/ into an url then this function was called.
And return value should be set like this:
return [1 => ['settings' => $item]]
where
[$selectedId => [$fieldsetName => $ArrayOfitemValues]]
I hope it helps somebody.
Best Answer
Try following way:
Create password.html [Vendor/Module/view/adminhtml/web/template/form/element/password.html]